WordPress - So erstellen Sie Ihr eigenes WordPress Theme

Wem die kostenlosen Vorlagen nicht zusagen, kann auch ein eigenes WordPress Theme erstellen. Dies bietet Ihnen die Möglichkeit, eine einzigartige Webseite mit einem stark individualisierten Look zu erstellen, mit welcher Sie sich und Ihr Business identifizieren können. Erfahrenen Programmierern eröffnet dieses Vorgehen ungeahnte Möglichkeiten. Gleichzeitig bleibt Ihnen die Qual der Wahl erspart, sich zwischen den Hunderten von vorhandenen Vorlagen zu entscheiden. Wie also gehen Sie vor?
Um ein eigenes Theme zu erstellen, müssen Sie Wordpress.org installiert haben und sich mit der Applikation gut auskennen. Zwingend notwendig sind außerdem Kenntnisse in HTML, PHP und CSS.
HTML = „Hypertext Markup Language“ ist die Standard-Programmiersprache für Webseiten-Inhalte. HTML dient zur Strukturierung von Texten mit Überschriften und Textkörpern, Hyperlinks, Bildern, Listen und anderen Inhalten.
PHP = weit verbreitete Skriptsprache für Webserver. PHP dient zur Erstellung von Webseiten und Online-Anwendungen.
CSS = „Cascading Style Sheets“ ist die Standard-Stylesheet-Sprache für die optische Darstellung von Webseiten. CSS ist für das Visuelle verantwortlich und arbeitet daher ergänzend zu HTML.
In der Regel starten Sie mit einer Idee, die dann in eine konkretere Skizze und später in eine Vorlage umgewandelt wird. Hierzu bedürfen Sie eventuell der Hilfe von Grafik- und Webdesignern, die basierend auf Ihren Wünschen ein passendes Layout erstellen.
Erstellen Sie nun im Wordpress Template-Ordner /wp-content/themes/ einen eigenen Ordner, in dem Sie alle nachfolgend angefertigten Dateien abspeichern.
Mithilfe des Grundgerüsts definieren Sie die Basis Ihres Templates und geben die Hauptstruktur vor, aufgeteilt in Header / Navigationsbereich, Content-Bereich, Footer, Sidebar und so weiter.
Hierzu erstellen Sie im Texteditor ein Dokument mit dem Namen index.html und legen es in Ihrem WordPress-Ordner ab. Später erweitern Sie das Dokument, indem Sie z.B. Überschriften, Listen, Texte und Links einfügen – alles natürlich mit den entsprechenden HTML-Tags. Im Browser können Sie dann bereits eine simple, gegliederte Webseite ohne grafische Elemente sehen.
Nun geht es darum, den visuellen Part der Vorlage zu gestalten. Erstellen Sie hierzu die Datei style.css. Innerhalb des Stylesheets definieren Sie für jeden einzelnen Bereich Ihres Grundgerüsts die optischen Details wie etwa die Hintergrundfarbe, das Hintergrundbild, die Schriftfarbe, die Schriftgröße und die Schriftart.
Nun geht es darum, auf Basis der HTML-Vorlage ein funktionstüchtiges WordPress Theme zu erstellen. Zusätzlich zu den index.html- und style.css-Dateien, die sich bereits in Ihrem Ordner befinden, werden Sie nun einzelne Template-Dateien anlegen, die unterschiedliche Funktionen erfüllen.
Diese Datei ist dringend notwendig. Zusammen mit style.css ist die index.php-Datei die funktionale Basis für Ihr eigenes WordPress Theme. Sie kommt immer dann zum Einsatz, wenn die anderen (optionalen) Templates fehlen.
Wer die unterschiedlichen Bereiche seiner Webseite individuell ausgestalten möchte, sollte jeweils spezifische Templates anlegen und diese mit Informationen und Befehlen füllen. Typisch für ein WordPress Theme sind unter anderem folgende Dateien:
In dieser Übersicht ⇱ zur Wordpress Template-Hierarchie können Sie sehen, welche Templates aufeinander aufbauen und wie sich die einzelnen Templates zueinander verhalten.
So würde beispielsweise ein einfaches index.php-Template aussehen:
So wiederum würde die ausgelagerte footer.php-Datei aussehen, auf welche am Ende von index.php Bezug genommen wird:
Jedes dieser Templates enthält zusätzliche Informationen zu Aussehen und Funktionsweise entsprechender Webseitenbereiche, sofern sich diese vom Haupttemplate unterscheiden sollen. All dies bestimmen Sie mit spezifischen Codes. Sie müssen natürlich nicht alle der vorgeschlagenen Template-Dateien erstellen und können auch jederzeit weitere hinzufügen. Wollen Sie beispielsweise nur auf einer bestimmten Seite Kommentare zulassen, müssen Sie zusätzlich zu page.php eine Datei namens page-comments.php erstellen, die sich bezüglich der Kommentar-Funktion von der Standard-Datei unterscheidet. Ähnlich verhält es sich, wenn Sie auf einer speziellen Seite die Sidebar ausblenden möchten: Dann öffnen Sie die Datei page.php, ändern die entsprechenden Befehle und speichern das Template unter einem neuen Namen ab.
Der Loop wird gerne als das Herzstück einer Wordpress Template-Datei umschrieben, denn er ermöglicht es, dass die Beiträge einer Webseite überhaupt erst ausgegeben werden. Deshalb muss der Loop in jedes Template eingebunden werden, das für die Ausgabe von Inhalten (index.php, page.php, single.php…) verantwortlich ist. Mit dem Loop können Sie beispielsweie bestimmen, wie viele Beitragsvorschauen auf einer Seite angezeigt werden, wie lange der Vorschautext ist und ob unterhalb eines einzelnen Beitrags auf verwandte Beiträge verwiesen wird. Im untenstehenden Beispiel sehen Sie einen Loop, der in die page.php-Datei eingefügt wurde.
Der Standard-Code sieht folgendermaßen aus:
Eine Template-Datei kann weiterhin folgende Elemente besitzen:
Ihr eigenes Theme können Sie als ZIP-Datei innerhalb von WordPress.org hochladen. Wenn Sie Ihr Theme einem breiten Publikum zugänglich machen wollen, können Sie dieses zur Überprüfung an WordPress.org senden. In diesem Fall muss Ihr Theme folgende Dateien zwingend aufweisen:
Sofern die index.php-Datei nicht die komplette Funktionalität Ihres Themes abdeckt und Sie weitere Templates erstellt haben, müssen Sie natürlich auch diese mit einreichen.