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.
Ein guter HTML- und PHP-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.
- Die 9 besten kostenlosen HTML-Editoren für Webentwickler (Windows-Edition)
- Die 5 besten kostenlosen HTML-Editoren für Webentwickler (Mac-Edition)
- Plattformübergreifend: Dr. Web testet: Atom, der HTML-Editor “für das 21. Jahrhundert”
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
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.
- Mamp – Download
- Mamp – Benutzerhandbuch und Dokumentation
- WP Codex: Installing WordPress Locally on Your Mac With MAMP
Xampp
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 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.
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.
- Download Bootstrap Framework
- 16-teilige Einführung in das Bootstrap-Framework auf deutsch
- Sehr ausführliches Bootstrap 3 Tutorial (EN)
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]
Wichtige Links
- WordPress Codex: Theme Developement
- WordPress Codex: Site Design and Layout
- WordPress Codex: Template Hierarchy
- WordPress Codex: Theme Customization API – der Theme Customizer
- WordPress Codex: Theme Review
- Make WordPress Core: CSS Coding Standards
- Make WordPress Core: HTML Coding Standards
- Make WordPress Core: PHP Coding Standards
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.
- WordPress Codex: Theme Unit Test Data
- WP Candy: Easier Theme Development with Sample WordPress Content
Generate WP – 21 Tools für korrekten Code
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
Browser und Add-Ons
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
- Firefox Download
- Firefox – Web Developer Add-On
- Firefox – Firebug Add-On
Google Chrome
- Die eingebauten Chrome-Entwickler Tools – Umfangreiche Dokumentation
- Google Chrome – Web Developer Add-On
- Download Google Chrome Canary, die Version mit den neuesten Features für Entwickler
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
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 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.
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.
Die wp-config.php – WP_DEBUG einschalten
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.
- The Themeshaper WordPress Theme Tutorial: 2end Edition
- In 17 Schritten führt dieses englischsprachige Tutorial durch den Theme-Entstehungsprozess. Themeshaper ist übrigens ein Blog von Automattic, der Firma hinter WordPress.
- Making the Perfect WordPress Theme
- In 6 Beiträgen zum perfekten WordPress-Theme.
- WordPress Tutorial: How To Create A WordPress Theme from HTML
- In 3 Beiträgen werden einem Novizen die Basics beigebracht.
- Eigenes WordPress Template erstellen
- Sehr umfangreiche, deutschsprachige Ressource zur Theme-Entwicklung.
- Eine neue Webseite entsteht
- Elmastudios Beitrag zur Theme-Entwicklung mit WordPress in 12 Teilen.
- How to Build a Responsive WordPress Theme with Bootstrap
- Gutes Tutorial, dass gleichzeitig einen Einstieg in Bootstrap bietet.
- Der große t3n-Guide zum eigenen WordPress-Theme
- 3-teiliges Tutorial auf deutsch.
Nützliche WordPress-Plugins und Widgets
Das 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.
- 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
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
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
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
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
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
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
- Die 9 besten kostenlosen HTML-Editoren für Webentwickler (Windows-Edition)
- Die 5 besten kostenlosen HTML-Editoren für Webentwickler (Mac-Edition)
- Plattformübergreifend: Dr. Web testet: Atom, der HTML-Editor “für das 21. Jahrhundert”
- Mamp – Download
- Mamp – Benutzerhandbuch und Dokumentation
- WP Codex: Installing WordPress Locally on Your Mac With MAMP
- Xampp – Download
- Using XAMPP for Local WordPress Theme Development
- Download Bootstrap Framework
- 16 teilige Einführung in das Bootstrap-Framework auf deutsch
- Sehr ausführliches Bootstrap 3 Tutorial (EN)
- WordPress Codex: Theme Developement
- WordPress Codex: Site Design and Layout
- WordPress Codex: Template Hierarchy
- WordPress Codex: Theme Customization API – der Theme Customizer
- WordPress Codex: Theme Review
- Make WordPress Core: CSS Coding Standards
- Make WordPress Core: HTML Coding Standards
- Make WordPress Core: PHP Coding Standards
- WordPress Codex: Theme Unit Test Data
- WP Candy: Easier Theme Development with Sample WordPress Content
- Generate WP – 21 Tools für korrekten Code
- Firefox Download
- Firefox – Web Developer Add-On
- Firefox – Firebug Add-On
- Die eingebauten Chrome-Entwickler Tools – Umfangreiche Dokumentation
- Google Chrome – Web Developer Add-On
- Download Google Chrome Canary, die Version mit den neuesten Features für Entwickler
- Download FileZilla
- Dokumentation FileZilla
- Transmit von Panic – Download
- Transmit Kaufen für $34
- Transmit Support und FAQ
- Developer Plugin: Download von WordPress.org
- Theme Check Plugin: Download von WordPress.org
- Log Deprecated Notices Plugin: Download von WordPress.org
- Debug Bar Plugin: Download von WordPress.org
- Monster Widget Plugin: Download von WordPress.org
- Codestyling Localization Plugin: Download von WordPress.org
- Debogger Plugin: Download von WordPress.org
Tutorials zur WordPress Theme Entwicklung
- The Themeshaper WordPress Theme Tutorial: 2end Edition
- In 17 Schritten führt dieses englischsprachige Tutorial durch den Theme-Entstehungsprozess. Themeshaper ist übrigens ein Blog von Automattic, der Firma hinter WordPress.
- Making the Perfect WordPress Theme
- In 6 Beiträgen zum perfekten WordPress-Theme.
- WordPress Tutorial: How To Create A WordPress Theme from HTML
- In 3 Beiträgen werden einem Novizen die Basics beigebracht.
- Eigenes WordPress Template erstellen
- Sehr umfangreiche, deutschsprachige Ressource zur Theme-Entwicklung.
- Eine neue Webseite entsteht
- Elmastudios Beitrag zur Theme-Entwicklung mit WordPress in 12 Teilen.
- How to Build a Responsive WordPress Theme with Bootstrap
- Gutes Tutorial, dass gleichzeitig einen Einstieg in Bootstrap bietet.
- Der große t3n-Guide zum eigenen WordPress-Theme
- 3-teiliges Tutorial auf Deutsch.
(dpe)
3 Antworten zu „WordPress: Alles rund um die Theme-Entwicklung“
— was ist Deine Meinung?
Schöne Sammlung. Habe mich bis jetzt eher am Radne mit WP bechäftigt, aber ich sollte es mir doch einmal näher ansehen.
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
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.