Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
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 ent­wi­ckeln, ist eine tol­le Sache. Ich kann mich noch gut an mein ers­tes Theme erin­nern und dar­an, wie viel Spaß ich bei der Entwicklung hat­te. Anschließend habe ich aller­dings Blut und Wasser geschwitzt und viel nach­ge­ar­bei­tet, damit es durch den Theme-Testing-Prozess bei WordPress ging. Schliesslich woll­te ich es der gan­zen Welt zugäng­lich machen. Da ich damals noch kei­ner­lei Ahnung von WordPress hat­te, waren mir auch die vie­len klei­nen Helferchen nicht bekannt, die das Leben eines Entwicklers unge­mein erleich­tern kön­nen. Ihnen soll es nicht wie mir erge­hen, des­halb lis­te ich Ihnen heu­te die wich­tigs­ten – mir bekann­ten – 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 selbst­ver­ständ­lich auch PHP beherr­schen muss), ist das A und O bei der Entwicklung eines WordPress-Themes. Hier gibt es vie­le ver­schie­de­ne Ansätze und Lösungen, daher ist es unmög­lich, eine Empfehlung für einen bestimm­ten Editor aus­zu­spre­chen. Dafür ist die­ser Teil des Entwicklungsprozess zu per­sön­lich. Jedoch haben wir in jüngs­ter Vergangenheit die bes­ten Editoren für Mac OS X und für Windows zusam­men­ge­stellt, da soll­te sich ein pas­sen­der Editor für Sie fin­den.

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

Um ein WordPress-Theme auf dem eige­nen Rechner über­haupt ent­wi­ckeln zu kön­nen, benö­ti­gen Sie eine Webserver-Struktur auf Ihrem Computer, mit PHP-Interpreter, mySQL und so wei­ter… Für die­sen Anforderungsbereich gibt es 2 Lösungen, die auf Mac und Windows glei­cher­ma­ßen funk­tio­nie­ren.

Mamp

Mamp - Entwicklungsumgebung

Das ist eine wirk­lich sehr gute, schnel­le und zuver­läs­si­ge Lösung. Mamp hat auch Phyton und Perl inte­griert. Dadurch kön­nen Python- und Perl-Skripte aus­ser­halb des cgi-bin aus­ge­führt wer­den. Die Konfiguration funk­tio­niert wie bei den gän­gi­gen Webspace-Providern, so dass Sie pro­blem­los Ihre Python- oder Perl-Projekte off­line ent­wi­ckeln und spä­ter ein­fach auf Ihren Webspace über­tra­gen kön­nen. Mamp läuft unter Windows und Mac OS X und ist kos­ten­los. Die Pro-Version ist in den meis­ten Fällen nicht nötig.

Xampp

Xampp - Entwicklungsumgebung für WordPress / PHP

XAMPP ist eine kos­ten­lo­se, leicht zu instal­lie­ren­de Apache-Distribution, die MySQL, PHP und Perl ent­hält. Das XAMPP Open-Source-Paket wur­de für eine sehr ein­fa­che Installation und Nutzung ein­ge­rich­tet. Die Software ist für Windows, Mac OS X und Linux erhält­lich.

Eine rich­ti­ge Dokumentation ist nicht vor­han­den, aber eine FAQ für jedes Betriebssystem.

Die Basis für ein WordPress-Theme

Ein WordPress-Theme soll­te heut­zu­ta­ge auf einer sehr gut funk­tio­nie­ren­den, voll­stän­dig respon­si­ven HTML- und CSS-Basis ent­wi­ckelt wer­den. Wenn man einen nähe­ren Blick in das WordPress-Theme-Verzeichnis wirft, wird man schnell fest­stel­len, dass der über­wie­gen­de Teil aktu­el­ler Themes auf dem Open-Source HTML- und CSS-Framework Bootstrap auf­setzt.

Bootstrap, das HTML- und CSS-Framework

Bootstrap hat alle moder­nen Komponenten und Ressourcen an Bord, die man heu­te für ein moder­nes Theme benö­tigt. Außerdem stellt es eine Menge Shortcodes zu Verfügung, die anschlies­send im fer­ti­gen Theme genutzt wer­den kön­nen, wenn man vom visu­el­len in den Texteditor von WordPress wech­selt.

Bootstrap - Überblick

Das ursprüng­lich von Twitter ent­wi­ckel­te Framework bringt neben den neu­es­ten Technologien wie Sass und {less} alle nöti­gen Komponenten für ein wirk­lich gutes Theme mit und kann vor dem Download-Prozess noch ange­passt wer­den.

Wichtige Links und Ressourcen zur WordPress-Theme-Entwicklung

Hilfreiche Links über die Entwicklung von WordPress-Themes kann man nie­mals genug haben, sei es, dass man die Template-Hierarchie ver­ste­hen, oder in Erfahrung brin­gen möch­te, wie man ein Theme nach Fertigstellung am bes­ten tes­tet. Ressourcen sind genau­so wich­tig, denn es gibt vie­le klei­ne Helferlein, die einem Entwickler das Leben sehr erleich­tern und ver­ein­fa­chen kön­nen.

Die WordPress Template Hierarchy

[Ein Klick auf die Grafik öff­net eine bedeu­tend grö­ße­re Auflösung]

Die WordPress Template Hirarchie

Wichtige Links

Dummy-Inhalte zum Testen der Themes

Vor Abschluss aller Arbeiten soll­te das Theme stets mit einem spe­zi­ell für Theme-Tests ent­wi­ckel­ten Dummy-Inhalt auf etwai­ge Darstellungsfehler über­prüft wer­den. Erst danach kann sicher­ge­stellt wer­den, dass das Theme jede Art von Inhalt immer kor­rekt dar­stellt. Sie kön­nen zwi­schen 2 ver­schie­de­nen Anbietern wäh­len, gut sind bei­de Test-Inhalte.

Generate WP – 21 Tools für korrekten Code

Das GenerateWP Tool zum Entwickeln von WordPress-Themes

GenerateWP ist eines der nütz­lichs­ten Tools zur Entwicklung von WordPress-Themes über­haupt, denn es stellt dem Entwickler 21 Tools zur Seite, die alle­samt her­vor­ra­gen­den Code aus­lie­fern. Man sucht sich das benö­tig­te Tool aus, geht die Navigation durch, füllt die Formulare aus und klickt im Anschluss auf “Update Code”. Dann kopiert man ein­fach nur den gene­rier­ten Code. GenerateWP stellt Tools für fol­gen­de Anwendungsbereiche zu Verfügung:

  • Taxonomy Generator
  • Post Type Generator
  • Post Status Generator
  • Theme Support Generator
  • Sidebar Generator
  • Menü Generator
  • Shortcodes Generator
  • Quick Tags gene­ra­tor
  • 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ön­nen Sie mit jedem Browser ent­wi­ckeln, emp­feh­lens­wert sind jedoch erfah­rungs­ge­mäß nur Firefox und Google Chrome. Für bei­de gibt es aus­rei­chend Add-Ons zur Theme-Entwicklung und bei­de stel­len Webseiten so dar, wie sie auch gedacht und ent­wi­ckelt sind. Die wich­tigs­ten Add-Ons oder Ressourcen haben wir hier ver­linkt.

Mozilla Firefox

Google Chrome

FTP-Programme

FTP-Programme sind sehr wich­tig, man benö­tigt sie zur Übertragung von Dateien auf den Webserver oder das Webhosting-Paket. Hier gibt es sicher­lich vie­le ver­schie­de­ne Programme, bekann­te wie auch unbe­kann­te Lösungen. Mir per­sön­lich sind nur 2 Programme wirk­lich geläu­fig, mit bei­den habe ich bereits gear­bei­tet und bei­de kann ich unein­ge­schränkt emp­feh­len. FileZilla wäre hier die kos­ten­lo­se Möglichkeit und Transmit für den Mac ist kos­ten­pflich­tig.

FileZilla Client

Das FileZilla FTP-Programm

 

FileZilla ist voll­kom­men kos­ten­frei und platt­form­über­grei­fend für Windows, Mac und Linux zu bekom­men. Die Optik ist schon etwas in die Jahre gekom­men, doch das Programm ver­rich­tet sei­nen Job sehr gut. Es unter­stützt FTP, FTP over SSL/TLS (FTPS) und das SSH File Transfer Protocol (SFTP).

Transmit von Panic

transmit-ftp-programm

Transmit ist ein kos­ten­pflich­ti­ges FTP-Programm für Mac OS X. Es unter­stützt neben FTP auch SFTP, Amazon S3 und WebDAV. Transmit 4 kos­tet 34 USD und als Upgrade von Transmit 3 19 USD. Das Programm kann eini­ge Tage kos­ten­frei getes­tet wer­den. Es bie­tet neben den Standard-Features etli­che, prak­ti­sche Funktionen, wie zum Beispiel die Synchronisierung zwi­schen Ordnern auf Rechner und Server, eine sehr schnel­le Übertragung und vie­les mehr.

transmit-praktische-features

Hilfreiche Einstellungen zur Theme-Entwicklung

Um ein WordPress-Theme zu tes­ten und frei von jeg­li­chen PHP-Fehlern und Notices zu bekom­men, gibt es eini­ge wun­der­ba­re Plugins, die ich Ihnen wärms­tens an Herz legen möch­te. Doch eine wich­ti­ge Einstellung befin­det sich schon in der wp-config.php und die­se soll­te man auch akti­vie­ren. Der aller­letz­te Test eines Themes fin­det auf einem Webserver direkt live statt, hier­für soll­te man eine ansons­ten nicht genutz­te Domain bereit­hal­ten. Die Voraussetzung dafür ist aller­dings, dass in den Einstellungen des Webservers bezie­hungs­wei­se des Webhosting-Pakets die Einstellung “display_errors” auf “On” steht, damit PHP-Fehlermeldungen oder die berüch­tig­ten PHP-Notices auch ange­zeigt wer­den. Offline in Verbindung mit den Programmen Xampp und Mamp soll­te die­se Einstellung auto­ma­tisch auf “On” ste­hen.

Servereinstellungen eines Webhosting-Pakets

Zum Testen soll­te die­se Einstellung auf “On” ste­hen. Live natür­lich auf “Off”.

Die wp-config.php – WP_DEBUG einschalten

wp-config-einstellungen

Ungefähr in Zeile 91 fin­det sich die Einstellung WP_DEBUG. Dieser Wert steht nor­ma­ler­wei­se auf “fal­se” und soll­te für die Theme-Entwicklung auf “true” ste­hen. Dann wer­den Fehlermeldungen auch ange­zeigt. Soll das ent­wi­ckel­te Theme spä­ter in das WordPress-Theme-Verzeichnis auf­ge­nom­men wer­den, müs­sen jeg­li­che Fehler und Notices eli­mi­niert wer­den, sprich “fal­se” wie­der akti­viert.

Tutorials für die WordPress Theme-Entwicklung

Hier füh­re ich eini­ge nütz­li­che Tutorials für die­je­ni­gen auf, die ger­ne ein eige­nes WordPress-Theme erstel­len möch­ten, jedoch nicht wis­sen, wie es geht.

Nützliche WordPress-Plugins und Widgets

Das Developer WordPress-Plugin

developer-wordpress-plugin

Dieses Plugin darf in kei­nem Entwicklungsprozess feh­len. Das Plugin sorgt dafür, dass alle für die Entwicklung nöti­gen Plugins instal­liert sind und nimmt Rücksicht dar­auf, ob nur ein Plugin oder ein Theme ent­wi­ckelt wird.

developer-einstellungen

  • Entwickler: Automattic
  • Wird stän­dig wei­ter ent­wi­ckelt: nach Notwendigkeit
  • Letzte Version vom: 18.10.2013
  • Kompatibel mit WP 4.1: Ja, voll­stän­dig
  • Kosten: kos­ten­frei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit ande­ren Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

 Theme Check

theme-check-plugin

Mit dem Theme-Check Plugin kön­nen Sie Ihr Theme nach den Standards des offi­zi­el­len WordPress Theme-Reviews tes­ten. Dies ist natür­lich beson­ders wich­tig, wenn Sie Ihr Theme in dem WordPress.org Theme-Directory zur Verfügung stel­len möch­ten, da alle ein­ge­reich­ten Themes vor der Veröffentlichung nach die­sen Richtlinien getes­tet wer­den.

  • Entwickler: Samuel Wood
  • Wird stän­dig wei­ter ent­wi­ckelt: Ja
  • Letzte Version vom: 22.12.2014
  • Kompatibel mit WP 4.1: Ja, voll­stän­dig
  • Kosten: kos­ten­frei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit ande­ren Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Log Deprecated Notices

log-deprecated-notices

Das Plugin tes­tet auf ver­al­te­te (depre­ca­ted) Dateien, Funktionen und Funktions-Argumente und iden­ti­fi­ziert die Stellen, wo die­se ver­wen­det wer­den. Alle gefun­de­nen “Fehler” wer­den geloggt und es wer­den Vorschläge unter­brei­tet für Alternativen.

  • Entwickler: Andrew Nacin
  • Wird stän­dig wei­ter ent­wi­ckelt: Ja
  • Letzte Version vom: 02.09.2014
  • Kompatibel mit WP 4.1: Ja, voll­stän­dig
  • Kosten: kos­ten­frei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit ande­ren Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Debug Bar

Die Debug Bar

Fügt der obe­ren Adminleiste eine hilf­rei­che Ergänzung hin­zu, die Queries und genutz­ten Cache anzeigt. Wenn WP_Debug auf On steht, trackt das Plugin außer­dem die PHP Warnings und Notices, um die­se leich­ter zu loka­li­sie­ren.

  • Entwickler: word­press­do­torg
  • Wird stän­dig wei­ter ent­wi­ckelt: Ja
  • Letzte Version vom: 02.09.2014
  • Kompatibel mit WP 4.1: Ja, voll­stän­dig
  • Kosten: kos­ten­frei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit ande­ren Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Monster Widget

Das Monster Widget

Ein sehr prak­ti­sches Plugin, dass unter Garantie dafür sorgt, dass man kein WordPress-Core-Widget ver­gisst mit Design zum Leben zu erwe­cken. Es fügt alle 13 Widgets in einem ein­zi­gem Widget der Sidebar hin­zu und gibt einem Entwickler daher die Möglichkeit, alle Widgets opti­mal zu desi­gnen und kei­nes zu ver­ges­sen. Für den Produktiv-Einsatz ist es hin­ge­gen nicht gedacht.

  • Entwickler: Automattic
  • Wird stän­dig wei­ter ent­wi­ckelt: Ja
  • Letzte Version vom: 16.12.2014
  • Kompatibel mit WP 4.1: Ja, voll­stän­dig
  • Kosten: kos­ten­frei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit ande­ren Plugins: nicht bekannt
  • Entwickler-Homepage:  nicht bekannt
  • Download von WordPress.org

Plugins: Längere Zeit keine Updates mehr – austesten

Zwei wirk­lich wich­ti­ge Plugins für den Entwicklungsprozess haben län­ge­re Zeit kein Update mehr erhal­ten. Dies heißt nicht auto­ma­tisch, dass sie mit den neu­es­ten Versionen von WordPress nicht mehr funk­tio­nie­ren wer­den. Ich emp­feh­le ein­fach, die Plugins zu instal­lie­ren und selbst zu tes­ten, ob sie ohne Fehler lau­fen.

Codestyling Localization

codestyling-lokalization-plugin

Das Plugin ist mit Sicherheit eines der bes­ten, wenn es um Übersetzungen in ande­re Sprachen geht. Ein WordPress-Theme soll­te immer in eng­li­scher Sprache ent­wi­ckelt wer­den, wenn man das Theme ger­ne im offi­zi­el­len Verzeichnis sehen möch­te. Im Anschluss über­set­zen Sie es noch ein­mal auf Deutsch oder in ande­re Sprachen, je nach Zielmarkt. Es gibt eine detail­lier­te, deutsch­spra­chi­ge Anleitung zu die­sem Plugin.

  • Entwickler: code­sty­ling
  • Wird stän­dig wei­ter ent­wi­ckelt: Nein
  • Letzte Version vom: 06.02.2013
  • Kosten: kos­ten­frei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit ande­ren Plugins: nicht bekannt
  • Entwickler-Homepage:  Codestyling Localization
  • Download von WordPress.org

Debogger

Debogger Plugin für WordPress

Ein sehr ein­fa­ches, aber nütz­li­ches Tool zum Debuggen (Definition: das Lokalisieren von Fehlern und die Behebung die­ser) von WordPress-Themes. Das Tool sam­melt alle Fehler und gibt die­se im Footer der Adminoberfläche von WordPress aus. Außerdem führt es eine W3C Validierung des Themes durch.

  • Entwickler: Simon Prosser
  • Wird stän­dig wei­ter ent­wi­ckelt: Nein
  • Letzte Version vom: 15.11.2010
  • Kosten: kos­ten­frei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit ande­ren Plugins: nicht bekannt
  • Entwickler-Homepage: kei­ne vor­han­den
  • Download von WordPress.org

Fazit

Ich hof­fe, Ihnen mit den vor­ge­stell­ten Programmen, Plugins und Ressourcen genü­gend Material an die Hand gege­ben zu haben, um Ihr ers­tes WordPress-Theme von Anfang an zu ent­wi­ckeln. Alle mir bekann­ten Quellen und Materialien sind ver­linkt und vor­ge­stellt. Natürlich kann es vor­kom­men, dass ich doch etwas wich­ti­ges ver­ges­sen habe. Bitte dann die Links und eine kur­ze Beschreibung in den Kommentaren pos­ten.

Links zum Beitrag

Tutorials zur WordPress Theme Entwicklung

(dpe)

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­äf­tigt, aber ich soll­te es mir doch ein­mal näher anse­hen.

  2. Danke für die­se schö­ne und umfang­rei­che Linksammlung zum Thema WP Themeentwicklung!

    Aich ich kann mich noch gut an mein ers­tes Theme erin­nern. Und, hät­te es damals schon all die­se Ressourcen gege­ben bzw. ich sel­bi­ge gekannt, hät­te ich mir mit Sicherheit einen Haufen Zeit gespart.

    LG, Stephan

  3. Zum Webserver-Aspekt, ich zitie­re: “Für die­sen Anforderungsbereich gibt es 2 Lösungen”. Die nahe­lie­gends­te und imho kor­rek­te Lösung lau­tet: Native Installation von Apache, MySQL etc. Ist ein­fa­cher, schnel­ler & sta­bi­ler als die­ses Gefrickel mit XAMPP.

Schreibe einen Kommentar

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