neontrauma.de | Tutorials & Webdesign

Nachdem ich im letzten Tutorial gezeigt habe, wie man Wordpress installiert, folgt nun eine Einführung in das Erstellen eines eigenen Layouts.
Im ersten Teil dieses Tutorials gehe ich darauf ein, wie Wordpress-Themes grundsätzlich funktionieren, im zweiten Teil wird’s dann konkret und wir springen ins kalte Wasser. ;-)

Voraussetzungen

Du solltest über zumindest grundlegende Kenntnisse in (X)HTML und CSS verfügen, dich praktischerweise auch ein wenig in PHP auskennen, ehe du dein eigenes Theme erstellst; auf das Erklären der verwendeten HTML-Elemente kann ich hier aus Platzgründen nicht eingehen. (Dazu findest du auf neontrauma.de aber genügend andere Tutorials.)
Zum Schreiben des Codes benötigst du auch bei WordPress nichts anderes als einen ganz normalen Texteditor, beispielsweise Scite, der eine farbige Darstellung bietet und somit für einigen Überblick sorgt..
Testen kannst du das Ganze entweder online oder aber – was ich persönlich praktischer finde – lokal mit einem Webserver wie XAMPP.

wie funktioniert’s?

Wordpress-Themes basieren auf einem Template-System, bei dem “Platzhalter” im Quelltext die Stellen kennzeichnen, an denen Wordpress später den Inhalt einfügt.

Zu Grunde liegt dem Ganzen ein ganz normales HTML-Gerüst mit Head und Body, in das die verschiedenen Bereiche wie Navigation, Content oder Header via Div oder Liste eingefügt werden. Diejenigen Inhalte, die von Wordpress dynamisch erzeugt werden – also zum Beispiel die Postings, deren Überschriften oder auch die Inhalte der Sidebar – werden hier durch sogenannte Template-Tags angegeben. Dies sind sozusagen Platzhalter für die später automatisch eingefügten Inhalte.
Dass das System der Template Tags so funktioniert, ist dem Loop zu verdanken – was das ist, würde hier einmal mehr den Rahmen sprengen, aber zumindest hast du das Wort jetzt schon einmal gehört. ;-)

Zunächst legt man sich also ein solches Gerüst an und fügt dann an den benötigten Stellen Template Tags ein.
Damit das Ganze übersichtlicher wird und es zudem möglich ist, die Anzeige eines einzelnen Artikels anders darzustellen als etwa die Übersichtsseite aller Artikel einer Kategorie, verteilen wir den Code auf mehrere einzelne Dateien. Diese einzelnen Komponenten werden nachher immer dort, wo sie benötigt werden, über das include-Tag ( get(…) ) eingebunden.

WordPress arbeitet in Bezug auf die Template Tags hierarchisch. Dies bedeutet, dass beim Aufrufen einer Kategorie zunächst nach einer Datei gesucht wird, die genau der ID dieser Kategorie entspricht. Gibt es diese nicht, weicht WordPress auf die category.php aus. Sofern auch diese nicht existiert, kommt die archive.php an die Reihe, und gibt es auch diese nicht, landen wir bei der index.php.
Hier erkennst du bereits, wie ausgefeilt du dein Theme einrichten kannst: wenn du möchtest, kannst du jede Kategorie (rein theoretisch sogar jedes einzelne Posting) anhand der jeweiligen ID anders stylen. Anbieten würde sich so etwas zum Beispiel, wenn du einen Blog über Hunde und Katzen betreibst und im Header bei allen Artikeln, die unter “Hund” abgelegt wurden, ein Hundefoto zu sehen sein soll, während das Headerfoto der Katzen-Kategorie ein Samtpfötchen zeigen soll.

die Vorteile

Neben dem gerade angesprochenen speziellen Designen einzelner Bereiche bietet dieses System auch noch andere Vorteile:

Durch das Verwenden der Template Tags werden doppelte Inhalte vermieden – so taucht zum Beispiel der Inhalt des Footers nicht in der index.php, der archive.php, der single.php usw. auf und muss in jeder einzelnen dieser Dateien geändert werden, sondern nur in der footer.php.
Dies spart sowohl Zeit beim Bearbeiten des Themes, als auch beim Laden des Blogs.

Dadurch, dass WordPress auf diese Weise Inhalt und Layout streng voneinander trennt, kannst du zudem nach Herzenslust neue Themes hinzufügen und diese verändern, ohne dass dies Auswirkungen auf deinen Inhalt hat. Es geht nichts verloren.

Daraus folgt natürlich auch, dass auch Menschen, die eher weniger Ahnung vom Layouten haben, sich ihr Blog einfach und unkompliziert mit einem Mausklick im Backend umstylen können, indem sie einfach ein heruntergeladenes Theme installieren. Umgekehrt bietet es Webdesignern die Möglichkeit, fertige Styles anzubieten.

die einzelnen Dateien

Es ist nicht zwingend notwendig, genau soundso viele einzelne Dateien in seinem Theme zu haben -das hängt eben, wie gesagt, davon ab, wie ausgefeilt es werden soll.

Wir werden hier mit folgenden Dateien arbeiten:

• header.php – enthält den ganz nomalen HTML-Header
• footer.php – alles, was am Ende jeder Seite stehen soll, beispielsweise das Copyright
• sidebar.php – die Navigationsspalte, die zusätzlich zum normalen Menue auch eine Tag-Cloud und vieles mehr beinhalten kann
• index.php – die Startseite
• single.php – wenn ein einzelnes Posting aufgerufen wird
• page.php – wenn eine statische Seite dargestellt werden soll
• archive.php – Kategorien- und Archivinhalte werden aufgelistet
• comments.php – das Formular zum Posten von Kommentaren sowie die Darstellung dieser
• search.php – zeigt die Suchergebnisse an
• searchform.php – hier kannst du das Suchfeld designen
• 404.php – wenn etwas nicht gefunden werden kann, erscheint statt des üblichen 404-Fehlers diese Seite
• functions.php -stellt Funktionen für die Sidebar usw. zur Verfügung
• style.css – ganz wichtig für das Aussehen des Blogs ist natürlich das Stylesheet

Auf den ersten Blick mag diese Anzahl von einzelnen Dateien etwas abschreckend wirken, aber keine Sorge. Die Inhalte sind jeweils relativ kurz und außerdem erkläre ich alles so genau wie nötig.

Weiter geht’s in Teil 2 des Tutorials.