Anzeige
 Smartes Cloud Hosting für anspruchsvolle Projekte. ↬ Jetzt testen
Andreas Hecht 24. Februar 2015

WordPress-Developer mit Dr. Web: Alles rund um die Theme-Entwicklung

WordPress-Developer zu sein und etwa Themes selbst zu entwickeln, ist eine tolle Sache. Ich kann mich noch gut an mein erstes Theme erinnern und daran, wie viel Spaß ich bei der Entwicklung hatte. Anschließend habe ich allerdings Blut und Wasser geschwitzt und viel nachgearbeitet, damit es durch den Theme-Testing-Prozess bei WordPress ging. Schliesslich wollte ich es der ganzen Welt zugänglich machen. Da ich damals noch keinerlei Ahnung von WordPress hatte, waren mir auch die vielen kleinen Helferchen nicht bekannt, die das Leben eines Entwicklers ungemein erleichtern können. Ihnen soll es nicht wie mir ergehen, deshalb liste ich Ihnen heute die wichtigsten – mir bekannten – Plugins und Ressourcen zur WordPress-Theme-Erstellung auf.

wordpressdeveloper-theme-entwicklung

Ein guter HTML- und PHP-Editor

Der ATOM HTML-Editor

Ein guter HTML-Editor (der selbstverständlich auch PHP beherrschen muss), ist das A und O bei der Entwicklung eines WordPress-Themes. Hier gibt es viele verschiedene Ansätze und Lösungen, daher ist es unmöglich, eine Empfehlung für einen bestimmten Editor auszusprechen. Dafür ist dieser Teil des Entwicklungsprozess zu persönlich. Jedoch haben wir in jüngster Vergangenheit die besten Editoren für Mac OS X und für Windows zusammengestellt, da sollte sich ein passender Editor für Sie finden.

Lokale Webserver-Lösungen für den eigenen Rechner

Um ein WordPress-Theme auf dem eigenen Rechner überhaupt entwickeln zu können, benötigen Sie eine Webserver-Struktur auf Ihrem Computer, mit PHP-Interpreter, mySQL und so weiter… Für diesen Anforderungsbereich gibt es 2 Lösungen, die auf Mac und Windows gleichermaßen funktionieren.

Mamp

Mamp - Entwicklungsumgebung

Das ist eine wirklich sehr gute, schnelle und zuverlässige Lösung. Mamp hat auch Phyton und Perl integriert. Dadurch können Python- und Perl-Skripte ausserhalb des cgi-bin ausgeführt werden. Die Konfiguration funktioniert wie bei den gängigen Webspace-Providern, so dass Sie problemlos Ihre Python- oder Perl-Projekte offline entwickeln und später einfach auf Ihren Webspace übertragen können. Mamp läuft unter Windows und Mac OS X und ist kostenlos. Die Pro-Version ist in den meisten Fällen nicht nötig.

Xampp

Xampp - Entwicklungsumgebung für WordPress / PHP

XAMPP ist eine kostenlose, leicht zu installierende Apache-Distribution, die MySQL, PHP und Perl enthält. Das XAMPP Open-Source-Paket wurde für eine sehr einfache Installation und Nutzung eingerichtet. Die Software ist für Windows, Mac OS X und Linux erhältlich.

Eine richtige Dokumentation ist nicht vorhanden, aber eine FAQ für jedes Betriebssystem.

Die Basis für ein WordPress-Theme

Ein WordPress-Theme sollte heutzutage auf einer sehr gut funktionierenden, vollständig responsiven HTML- und CSS-Basis entwickelt werden. Wenn man einen näheren Blick in das WordPress-Theme-Verzeichnis wirft, wird man schnell feststellen, dass der überwiegende Teil aktueller Themes auf dem Open-Source HTML- und CSS-Framework Bootstrap aufsetzt.

Bootstrap, das HTML- und CSS-Framework

Bootstrap hat alle modernen Komponenten und Ressourcen an Bord, die man heute für ein modernes Theme benötigt. Außerdem stellt es eine Menge Shortcodes zu Verfügung, die anschliessend im fertigen Theme genutzt werden können, wenn man vom visuellen in den Texteditor von WordPress wechselt.

Bootstrap - Überblick

Das ursprünglich von Twitter entwickelte Framework bringt neben den neuesten Technologien wie Sass und {less} alle nötigen Komponenten für ein wirklich gutes Theme mit und kann vor dem Download-Prozess noch angepasst werden.

Wichtige Links und Ressourcen zur WordPress-Theme-Entwicklung

Hilfreiche Links über die Entwicklung von WordPress-Themes kann man niemals genug haben, sei es, dass man die Template-Hierarchie verstehen, oder in Erfahrung bringen möchte, wie man ein Theme nach Fertigstellung am besten testet. Ressourcen sind genauso wichtig, denn es gibt viele kleine Helferlein, die einem Entwickler das Leben sehr erleichtern und vereinfachen können.

Die WordPress Template Hierarchy

[Ein Klick auf die Grafik öffnet eine bedeutend größere Auflösung]

Die WordPress Template Hirarchie

Wichtige Links

Dummy-Inhalte zum Testen der Themes

Vor Abschluss aller Arbeiten sollte das Theme stets mit einem speziell für Theme-Tests entwickelten Dummy-Inhalt auf etwaige Darstellungsfehler überprüft werden. Erst danach kann sichergestellt werden, dass das Theme jede Art von Inhalt immer korrekt darstellt. Sie können zwischen 2 verschiedenen Anbietern wählen, gut sind beide Test-Inhalte.

Generate WP – 21 Tools für korrekten Code

Das GenerateWP Tool zum Entwickeln von WordPress-Themes

GenerateWP ist eines der nützlichsten Tools zur Entwicklung von WordPress-Themes überhaupt, denn es stellt dem Entwickler 21 Tools zur Seite, die allesamt hervorragenden Code ausliefern. Man sucht sich das benötigte Tool aus, geht die Navigation durch, füllt die Formulare aus und klickt im Anschluss auf „Update Code“. Dann kopiert man einfach nur den generierten Code. GenerateWP stellt Tools für folgende Anwendungsbereiche zu Verfügung:

  • Taxonomy Generator
  • Post Type Generator
  • Post Status Generator
  • Theme Support Generator
  • Sidebar Generator
  • Menü Generator
  • Shortcodes Generator
  • Quick Tags generator
  • Toolbar Generator
  • WP_Query Generator
  • WP_User_Query Generator
  • WP_Comment_Query Generator
  • wp-config.php Generator
  • Plugin Readme Generator
  • Schedule Cron Job Event Generator
  • Register WordPress Scripts Generator
  • Register WordPress Styles Generator
  • Register Oembed Providers Generator
  • Theme Default Headers Generator
  • User Contact Methods Generator
  • Custom Snippets

So generiert man die wp-config.php Datei mit GenerateWP

GenerateWP.com

Browser und Add-Ons

Google Chrome Canary

Im Prinzip können Sie mit jedem Browser entwickeln, empfehlenswert sind jedoch erfahrungsgemäß nur Firefox und Google Chrome. Für beide gibt es ausreichend Add-Ons zur Theme-Entwicklung und beide stellen Webseiten so dar, wie sie auch gedacht und entwickelt sind. Die wichtigsten Add-Ons oder Ressourcen haben wir hier verlinkt.

Mozilla Firefox

Google Chrome

FTP-Programme

FTP-Programme sind sehr wichtig, man benötigt sie zur Übertragung von Dateien auf den Webserver oder das Webhosting-Paket. Hier gibt es sicherlich viele verschiedene Programme, bekannte wie auch unbekannte Lösungen. Mir persönlich sind nur 2 Programme wirklich geläufig, mit beiden habe ich bereits gearbeitet und beide kann ich uneingeschränkt empfehlen. FileZilla wäre hier die kostenlose Möglichkeit und Transmit für den Mac ist kostenpflichtig.

FileZilla Client

Das FileZilla FTP-Programm

 

FileZilla ist vollkommen kostenfrei und plattformübergreifend für Windows, Mac und Linux zu bekommen. Die Optik ist schon etwas in die Jahre gekommen, doch das Programm verrichtet seinen Job sehr gut. Es unterstützt FTP, FTP over SSL/TLS (FTPS) und das SSH File Transfer Protocol (SFTP).

Transmit von Panic

transmit-ftp-programm

Transmit ist ein kostenpflichtiges FTP-Programm für Mac OS X. Es unterstützt neben FTP auch SFTP, Amazon S3 und WebDAV. Transmit 4 kostet 34 USD und als Upgrade von Transmit 3 19 USD. Das Programm kann einige Tage kostenfrei getestet werden. Es bietet neben den Standard-Features etliche, praktische Funktionen, wie zum Beispiel die Synchronisierung zwischen Ordnern auf Rechner und Server, eine sehr schnelle Übertragung und vieles mehr.

transmit-praktische-features

Hilfreiche Einstellungen zur Theme-Entwicklung

Um ein WordPress-Theme zu testen und frei von jeglichen PHP-Fehlern und Notices zu bekommen, gibt es einige wunderbare Plugins, die ich Ihnen wärmstens an Herz legen möchte. Doch eine wichtige Einstellung befindet sich schon in der wp-config.php und diese sollte man auch aktivieren. Der allerletzte Test eines Themes findet auf einem Webserver direkt live statt, hierfür sollte man eine ansonsten nicht genutzte Domain bereithalten. Die Voraussetzung dafür ist allerdings, dass in den Einstellungen des Webservers beziehungsweise des Webhosting-Pakets die Einstellung „display_errors“ auf „On“ steht, damit PHP-Fehlermeldungen oder die berüchtigten PHP-Notices auch angezeigt werden. Offline in Verbindung mit den Programmen Xampp und Mamp sollte diese Einstellung automatisch auf „On“ stehen.

Servereinstellungen eines Webhosting-Pakets

Zum Testen sollte diese Einstellung auf „On“ stehen. Live natürlich auf „Off“.

Die wp-config.php – WP_DEBUG einschalten

wp-config-einstellungen

Ungefähr in Zeile 91 findet sich die Einstellung WP_DEBUG. Dieser Wert steht normalerweise auf „false“ und sollte für die Theme-Entwicklung auf „true“ stehen. Dann werden Fehlermeldungen auch angezeigt. Soll das entwickelte Theme später in das WordPress-Theme-Verzeichnis aufgenommen werden, müssen jegliche Fehler und Notices eliminiert werden, sprich „false“ wieder aktiviert.

Tutorials für die WordPress Theme-Entwicklung

Hier führe ich einige nützliche Tutorials für diejenigen auf, die gerne ein eigenes WordPress-Theme erstellen möchten, jedoch nicht wissen, wie es geht.

Nützliche WordPress-Plugins und Widgets

Das Developer WordPress-Plugin

developer-wordpress-plugin

Dieses Plugin darf in keinem Entwicklungsprozess fehlen. Das Plugin sorgt dafür, dass alle für die Entwicklung nötigen Plugins installiert sind und nimmt Rücksicht darauf, ob nur ein Plugin oder ein Theme entwickelt wird.

developer-einstellungen

  • Entwickler: Automattic
  • Wird ständig weiter entwickelt: nach Notwendigkeit
  • Letzte Version vom: 18.10.2013
  • Kompatibel mit WP 4.1: Ja, vollständig
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

 Theme Check

theme-check-plugin

Mit dem Theme-Check Plugin können Sie Ihr Theme nach den Standards des offiziellen WordPress Theme-Reviews testen. Dies ist natürlich besonders wichtig, wenn Sie Ihr Theme in dem WordPress.org Theme-Directory zur Verfügung stellen möchten, da alle eingereichten Themes vor der Veröffentlichung nach diesen Richtlinien getestet werden.

  • Entwickler: Samuel Wood
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 22.12.2014
  • Kompatibel mit WP 4.1: Ja, vollständig
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Log Deprecated Notices

log-deprecated-notices

Das Plugin testet auf veraltete (deprecated) Dateien, Funktionen und Funktions-Argumente und identifiziert die Stellen, wo diese verwendet werden. Alle gefundenen „Fehler“ werden geloggt und es werden Vorschläge unterbreitet für Alternativen.

  • Entwickler: Andrew Nacin
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 02.09.2014
  • Kompatibel mit WP 4.1: Ja, vollständig
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Debug Bar

Die Debug Bar

Fügt der oberen Adminleiste eine hilfreiche Ergänzung hinzu, die Queries und genutzten Cache anzeigt. Wenn WP_Debug auf On steht, trackt das Plugin außerdem die PHP Warnings und Notices, um diese leichter zu lokalisieren.

  • Entwickler: wordpressdotorg
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 02.09.2014
  • Kompatibel mit WP 4.1: Ja, vollständig
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Monster Widget

Das Monster Widget

Ein sehr praktisches Plugin, dass unter Garantie dafür sorgt, dass man kein WordPress-Core-Widget vergisst mit Design zum Leben zu erwecken. Es fügt alle 13 Widgets in einem einzigem Widget der Sidebar hinzu und gibt einem Entwickler daher die Möglichkeit, alle Widgets optimal zu designen und keines zu vergessen. Für den Produktiv-Einsatz ist es hingegen nicht gedacht.

  • Entwickler: Automattic
  • Wird ständig weiter entwickelt: Ja
  • Letzte Version vom: 16.12.2014
  • Kompatibel mit WP 4.1: Ja, vollständig
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Plugins: Längere Zeit keine Updates mehr – austesten

Zwei wirklich wichtige Plugins für den Entwicklungsprozess haben längere Zeit kein Update mehr erhalten. Dies heißt nicht automatisch, dass sie mit den neuesten Versionen von WordPress nicht mehr funktionieren werden. Ich empfehle einfach, die Plugins zu installieren und selbst zu testen, ob sie ohne Fehler laufen.

Codestyling Localization

codestyling-lokalization-plugin

Das Plugin ist mit Sicherheit eines der besten, wenn es um Übersetzungen in andere Sprachen geht. Ein WordPress-Theme sollte immer in englischer Sprache entwickelt werden, wenn man das Theme gerne im offiziellen Verzeichnis sehen möchte. Im Anschluss übersetzen Sie es noch einmal auf Deutsch oder in andere Sprachen, je nach Zielmarkt. Es gibt eine detaillierte, deutschsprachige Anleitung zu diesem Plugin.

  • Entwickler: codestyling
  • Wird ständig weiter entwickelt: Nein
  • Letzte Version vom: 06.02.2013
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage:  Codestyling Localization
  • Download von WordPress.org

Debogger

Debogger Plugin für WordPress

Ein sehr einfaches, aber nützliches Tool zum Debuggen (Definition: das Lokalisieren von Fehlern und die Behebung dieser) von WordPress-Themes. Das Tool sammelt alle Fehler und gibt diese im Footer der Adminoberfläche von WordPress aus. Außerdem führt es eine W3C Validierung des Themes durch.

  • Entwickler: Simon Prosser
  • Wird ständig weiter entwickelt: Nein
  • Letzte Version vom: 15.11.2010
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: keine vorhanden
  • Download von WordPress.org

Fazit

Ich hoffe, Ihnen mit den vorgestellten Programmen, Plugins und Ressourcen genügend Material an die Hand gegeben zu haben, um Ihr erstes WordPress-Theme von Anfang an zu entwickeln. Alle mir bekannten Quellen und Materialien sind verlinkt und vorgestellt. Natürlich kann es vorkommen, dass ich doch etwas wichtiges vergessen habe. Bitte dann die Links und eine kurze Beschreibung in den Kommentaren posten.

Links zum Beitrag

Tutorials zur WordPress Theme Entwicklung

(dpe)

Mehr dazu:

Dr. Web Newsletter

Handverlesene Infos für den Webworker-Alltag. Zwei kostenlose eBooks gibt’s obendrauf.
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

🥰 Mit freundlicher Unterstützung von:

Mittwald. Webhosting, einfach intelligent

Webhosting. Einfach intelligent.

Mittwald. Webhosting, einfach intelligent
Das deutsche Shop-Plugin.

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google. Auf seinem Blog schreibt er über WordPress, SEO und Content SEO.

3 Kommentare

  1. Schöne Sammlung. Habe mich bis jetzt eher am Radne mit WP bechäftigt, aber ich sollte es mir doch einmal näher ansehen.

    Antworten

  2. Danke für diese schöne und umfangreiche Linksammlung zum Thema WP Themeentwicklung!

    Aich ich kann mich noch gut an mein erstes Theme erinnern. Und, hätte es damals schon all diese Ressourcen gegeben bzw. ich selbige gekannt, hätte ich mir mit Sicherheit einen Haufen Zeit gespart.

    LG, Stephan

    Antworten

  3. Zum Webserver-Aspekt, ich zitiere: „Für diesen Anforderungsbereich gibt es 2 Lösungen“. Die naheliegendste und imho korrekte Lösung lautet: Native Installation von Apache, MySQL etc. Ist einfacher, schneller & stabiler als dieses Gefrickel mit XAMPP.

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.