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 Minimal 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
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.
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
WordPress-Themeentwicklung: Die Hintergrundinfos zu unserem Quiz
In unserem Quiz zur WordPress-Themeentwicklung hast du neun Fragen rund um das beliebte Content Management System WordPress beantwortet. In diesem Artikel zeigen wir dir, wann wir welche Fragen als richtig beantwortet erachten. Wir helfen mit den richtigen Links zu den einzelnen Fragen, um so mehr Hintergrund für die Theorie hinter der Praxis zu liefern.
Die erste Frage
Wie fügst du eine neue CSS-Datei der header.php von WordPress hinzu?
Richtig ist hier eindeutig die Antwort mit der Nummer 3. Du nutzt für diese Funktion die beiden Tags wp_enqueue_style und wp_enqueue_scripts. Diese Lösung gilt auch für das Hinzufügen von JavaScript. Die Funktionen für CSS und JavaScript kommen in die functions.php des Themes.
Die Beispiel-Funktion zur Lösung:
Links zur Frage:
Die zweite Frage
Du möchtest mit dem Theme-Customizer dem späteren User deines WordPress-Theme die farbliche Änderung des Hintergrunds anbieten, der bereits eine Farbe im style.css bekommen hat. Wie löst du das Problem am geschicktesten?
Richtig ist hier die Antwort 1. Du schreibst eine Funktion, die das benötigte CSS dynamisch hinzufügt und nutzt eine Kombination von wp_add_inline_style und wp_enqueue_scripts.
Die Beispiel-Funktion zur Lösung:
Der Code des Beispiels stammt von dieser Seite.
Links zur Frage:
- Function Reference: add_inline_style()
- Caching the WordPress Customizer
Die dritte Frage
Wie fügt man den Titeltag wp_title korrekt zu dem HTML-Element <head> hinzu?
Richtig ist Antwort Nummer 3. Der Titel-Tag sollte nur noch in der functions.php des Themes notiert werden. Dieser Weg existiert seit WordPress 4.1 und ist recht einfach. Außerdem wird im verlinkten Dokument auch ein Weg für eine Rückwärts-Kompatibilität angegeben.
Das Beispiel zur Lösung:
Links zur Frage:
Die vierte Frage
Du möchtest eine nummerierte Seitennavigation (Paginierung) in deinem Theme umsetzen. Wie gehst du vor, wenn du nicht zu viel Aufwand betreiben möchtest?
Richtig ist die Antwort mit der Nummer 2. Eine nummerierte Blogseiten-Navigation anstatt der bekannten Ältere-/Neuere-Beiträge-Navigation zu erstellen, ist seit WordPress 4.1 extrem einfach geworden. Man fügt einfach ein WordPress-Tag an die gewünschte Stelle der index.php und muss im Anschluss nur noch etwas CSS für das Layout der Paginierung schreiben.
Das Beispiel zur Lösung:
Link zur Frage:
What’s New In WordPress 4.1 For Theme Developers?
Die fünfte Frage
Du bist gerade bei der Installation von WordPress und die Frage nach den Benutzerdaten taucht auf. Du überlegst nun, welchen Benutzernamen man wählen sollte.
Zur Auswahl standen: 1: Admin – 2: Ein anderer Benutzername – 3: Völlig egal, nur das Passwort zählt.
Richtig ist in der Tat die Antwort Nummer 3:
Der Benutzername des Administrators kann innerhalb von circa 5 Sekunden durch das Anhängen von /?author=1 an die Domain herausgefunden werden. Die 1 steht hierbei für die ID 1 der Benutzernamen, also für den Administrator. Sollte die 1 keinen Erfolg zeigen, wechselt man diese gegen eine 2 aus (und so weiter…). Der ausgegebene Name ist immer der Administrator.
Wichtig ist daher: Schütze deinen Adminbereich durch ein anständiges Passwort, dass mindestens 12 Zeichen, eine Buchstaben und Zahlenkombination und Sonderzeichen beinhalten sollte. Eine 2-Faktor Authentifizierung sollte ebenfalls zum Pflichtprogramm gehören.
Die sechste Frage
Du befindest dich im WordPress-Adminbereich, dem Dashboard. Du möchtest ein anderes „Kopfbild“ (Header-Bild) wählen. Auf welcher Seite der Navigation kannst du diese Aufgabe erledigen?
Die richtige Antwort ist Nummer 2. Auch wenn die betreffenden Links im Menü für Hintergrund und Header (noch) vorhanden sind, so linken sie doch auf den Theme-Customizer. Und da wir nach der Seite gefragt haben, zählen die Links im Menü nicht.
Die siebte Frage
Du würdest in deinem WordPress-Theme gerne gleich große, pixelgenau zugeschnittene Artikelbilder verwenden. Wie kannst du diese Aufgabe realisieren und gleichzeitig die Sicherheit deines Systems wahren?
Richtig ist hier die Antwort Nummer 2: Nutze die Funktion des the_post_thumbnail() Tags, aber füge dort kein Array mit der für die Artikelbilder gewünschten Maße hinzu. Das funktioniert nämlich seit WordPress 3.0+ nicht mehr. Heute fügst du den WordPress -ag the_post_thumbnail(); dorthin ein, wo die Artikelbilder erscheinen sollen.
Damit deine Artikelbilder nun auch auf die gewünschte Größe zugeschnitten werden, ist noch ein weiterer Arbeitsschritt nötig. Logge dich in deine WordPress-Installation ein und gehe zu folgender Seite: „Einstellungen => Medien“. Dort schneide die Bilder nun pixelgenau zurecht.
Selbstverständlich gibt es auch weitere Lösungen, wie zum Beispiel das vt_resize() Script, welches nur die eingebauten WordPress-Funktionen zur Größenänderung nutzt. Hierbei ist es allerdings wichtig, die neueste Version des Scripts zu erwischen.
Links zur Frage:
vt_resize() Script von Github downloaden
Die achte Frage
Du möchtest unter den eigentlichen Beiträgen eine Liste mit ähnlichen Artikeln (Related Posts) zeigen. Um diese zu programmieren, nutzt du welchen Tag für die nötige, zweite Loop?
Richtig ist die zweite Antwort.
Beispiel A: Multiple Loops mit WP_Query(), die mit Sicherheit beste Lösung. Der Beispielcode stammt von dieser Seite.
Beispiel B mit get_posts(). Hier mit einem Code mit offset aus der Kategorie 1. Der Beispielcode stammt von dieser Seite.
Links zur Frage:
Die neunte Frage
Du schreibst eine WordPress-Funktion für die Ausgabe von Kommentaren in deinem Theme. Wie sollte die Funktion benannt werden?
Richtig ist Antwort Nummer 2. Der Theme-Name sollte stets als Präfix vor den eigentlichen Funktionsnamen gestellt werden. Nur dann ist ein absolut fehlerfreier Betrieb auch in Zukunft möglich und es passieren keine fatalen PHP-Fehler, nur weil ein Plugin-Entwickler eine Funktion ebenso wie du deine benannt hat.
Ein Beispiel:
Links zur Frage:
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.
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.
(dpe)
