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

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 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.

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]

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

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

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

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.

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.

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

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

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)

Mehr dazu:

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...