Bastelarbeit mit Wordpress
Teil 3: Wordpress "Themes": Grundwissen ist gefragt
- Wordpress "Themes": Grundwissen ist gefragt
- Teil 2: Wordpress "Themes": Grundwissen ist gefragt
- Teil 3: Wordpress "Themes": Grundwissen ist gefragt
- Teil 4: Wordpress "Themes": Grundwissen ist gefragt
- Teil 5: Wordpress "Themes": Grundwissen ist gefragt
Eine vollständige Übersicht aller Template Tags finden Sie im Abschnitt "Design and Layout" der Wordpress-Dokumentation, dem sogenannten Wordpress Codex. Hinzu kommen gegebenenfalls weitere Tags, die von Plugins bereitgestellt werden.
Ein Theme - viele Dateien
Aktivieren Sie jetzt Version 2.0 unseres Themes. Es enthält alle Änderungen, die Sie zuvor an Version 1.0 durchgeführt haben. Außerdem finden Sie im head-Bereich alle Template-Tags, die dort üblicherweise hingehören.Beachten Sie, dass sogar Details wie der Pfad zum Stylesheet in Form von Tags codiert werden. Die Seitenbreite haben wir auf 900 Pixel festgeklopft. Und wenn Ihr Blog mehr als zehn Artikel enthält, erscheinen - dank der Tags in den Zeilen 52 bis 57 - Vor- und Zurück-Links.
Die zum Theme gehörenden Dateien finden Sie im Ordner internetmagazin_2. Öffnen Sie die index.php im Editor und schneiden Sie den Kopfbereich (Zeilen 7 bis einschließlich 23) aus. An dessen Stelle fügen Sie das folgende Template-Tag ein:
<?php get_header(); ?>
Die zuvor ausgeschnittenen Zeilen fügen Sie anschließend in die Datei header.php ein, und zwar unter dem vorhandenen Code. Jetzt speichern Sie beide Dateien und laden das Blog im Browser neu. Es sieht genauso aus wie vorher? Bestens!
Sie haben gerade damit begonnen, Ihr Theme auf mehrere Dateien zu verteilen. Statt den gesamten Code in der index.php zu speichern, haben Sie den Kopfbereich in eine eigene Datei ausgelagert. Dank des Template-Tags holt sich Wordpress den Kopf aus der Datei header.php und fügt ihn automatisch in Ihre Seiten ein.
Datei-Hierarchie
Auf den ersten Blick sieht es so aus, als sei unser Theme durch die letzten Handgriffe einfach nur unübersichtlicher geworden. Doch tatsächlich steckt mehr dahinter. Bisher erzeugt unser Wordpress Themealle Seiten auf Basis einer einzigen Template-Datei, der index.php.
In der Praxis bietet das aber nicht genügend Flexibilität, denn alle Seiten des Blogs sehen zwangsweise gleich aus. Eine unterschiedliche Gestaltung, beispielsweise von Startseite und Unterseiten, ist so nicht möglich.
Wordpress bietet mit seiner internen Datei-Hierarchie eine Lösung für dieses Problem. Ruft ein Besucher beispielsweise die Homepage Ihres Blogs auf, dann prüft Wordpress zunächst, ob im Verzeichnis des aktiven Themes eine Template-Datei namens home.php existiert.
Ist das der Fall, dann erzeugt die Blog-Engine die gewünschte Seite auf Basis dieser Datei. Anderenfalls greift sie auf die index.php zurück. Klickt jemand auf den Link zum chronologisch sortierten Artikel-Archiv, erzeugt Wordpress diese Seite auf Basis der Template-Datei date.php. Ist Letztere nicht vorhanden, dann fällt die Engine wiederum auf die index.php zurück.
Für die Praxis bedeutet das: Wenn Sie für einen bestimmten Seitentyp ein eigenes Design anlegen möchten, müssen Sie dafür lediglich eine entsprechend den Wordpress-Konventionen benannte Template-Datei in Ihrem Theme anlegen.
Standard-Elemente wie der Seitenkopf und die Fußzeile, die auf allen Seiten gleich sein sollen, lassen sich an zentraler Stelle (in der header.php, der footer.php und so weiter) pflegen und dank der Tags dennoch in mehrere Templates integrieren.
Die exakte Reihenfolge, in der Wordpress Template-Dateien beim Seitenabruf abarbeitet, zeigt das Schaubild auf der nächsten Seite oben (tinyurl.com). Es stammt aus dem Blog. Spätestens, wenn Sie ein Theme auf verschiedene Dateien aufteilen, sollten Sie intensiven Gebrauch von Kommentaren machen.
Insbesondere schließende div-Tags sollten Sie mit einem Kommentar versehen, aus dem die ID beziehungsweise Klasse des div hervorgeht, das da geschlossen wird. Ansonsten beginnt spätestens mit der Validierung des HTML ein gar nicht heiteres Such- und Ratespiel.
Sidebar mit Widgets
Aktivieren Sie nun Version 3 unseres Beispiel-Themes. Hier haben wir die Aufteilung noch etwas weiter vorangetrieben. Der Kopf, die Fußzeile und auch die Sidebar stecken jetzt jeweils in einer eigenen Datei. Allerdings zeigt die Sidebar noch keine Widgets an.
per Drag&Drop hinzufügen können. Über diese Funktion sind auch technisch nicht versierte Anwender in der Lage, beispielsweise eine Link-Liste in die Sidebar zu integrieren. Es ist eine Selbstverständlichkeit, dass moderne Themes eine widgetfähige Sidebar enthalten. Und dazu sind nur wenige Handgriffe notwendig.
zm_timkaufmann
