Bastelarbeit mit Wordpress

Teil 2: Wordpress "Themes": Grundwissen ist gefragt

Wenn Sie bereits über ein fertiges Stylesheet verfügen, das Sie für ein eigenes Theme nutzen möchten, dann müssen Sie nur diese Kommentarzeilen hinzufügen und das CSS ist fertig für Wordpress.

HTML-Konventionen

Deutlich komplexer ist der Inhalt der Template-Datei index.php. Er besteht aus HTML- und PHP-Code und generiert die verschiedenen Ansichten Ihres Blogs, das heißt die Startseite, die Anzeige eines einzelnen Artikels und weitere. Die Datei beginnt mit einem fünf Zeilen langen PHP-Kommentar, der alle zum selben Theme gehörenden PHP-Dateien kennzeichnet.An HTML finden Sie in der index.php neben dem üblichen Grundgerüst (Doctype sowie die Tags html, head und body) eine über div-Blöcke realisierte Seitenstruktur, die aus den Bereichen Seitenkopf, Inhalt, Seitenleiste und Fußzeile besteht.

Wordpress Themes

© Archiv

Stellen Sie Ihren Editor auf UTF-8, bevor Sie mit der Arbeit am Wordpress Theme beginnen.

Die IDs der div-Blöcke haben wir den Wordpress-Konventionen folgend auf #header, #content, #sidebar und #footer gesetzt. Das Ganze steckt in einem Wrapper, der - auch das eine Wordpress-Konvention - die ID #page trägt.

Durch die Einhaltung standardisierter Namen erleichtern Theme-Entwickler es anderen Nutzern, Anpassungen an ihrem Theme vorzunehmen, das Theme für neue Wordpress-Versionen zu aktualisieren etc. Die Reihenfolge der Blöcke im Code ist dabei natürlich freigestellt.

Wenn Sie ein CSS-Framework wie YUI CSS im Template verwenden möchten, heften Sie dessen Klassennamen nach Möglichkeit an die bereits vorhandenen Container an (<div id="content" class="yui-main">) oder fügen gegebenenfalls zusätzliche Container ein.

Template-Tags

Die Zeile 24 der index.php enthält den Anfang des sogenannten Wordpress Loop. Das sind mehrere Zeilen PHP-Code, die Ihre Beiträge aus der Datenbank holen:

24: <?php if (have_posts()) : ?>

Falls die Wordpress-Datenbank keine Artikel enthält, sorgen die Zeilen 43 bis 46 für eine Fehlermeldung. Im Regelfall wird aber der Code-Block der Zeilen 25 bis 45 aktiv. Er generiert die Artikelübersicht oder gibt einen einzelnen Artikel aus, je nachdem, welche Seite des Blogs aufgerufen wird.

Dreh- und Angelpunkt dieses Code-Blocks sind die sogenannten Template-Tags. Das sind Code-Schnippsel wie zum Beispiel

29: <?php the_title(); ?>

Diese Schnippsel ersetzt der PHP-Interpreter im Moment des Seitenaufrufs durch entsprechende Inhalte aus der Wordpress-Datenbank, in diesem Fall durch den Titel eines Blog-Artikels.

Indem Sie Template-Tags mit HTML-Tags mischen, können Sie die dynamischen Inhalte auszeichnen und anschließend über CSS formatieren. Ein Beispiel dafür finden Sie in den Zeilen 27 bis einschließlich 31:

27: <h2>
28: <a href="<?php the_permalink() ?>
" rel="bookmark" title="Permanenter Link zu <?php the_title_attribute(); ?>">
29: <?php the_title(); ?>
30: </a>
31: </h2>

Daraus entsteht beim Seitenaufruf HTML, etwa dieses für eine verlinkte Überschrift:

<h2><a href="http://meinblog.de/
artikel.html" rel="bookmark" title="Permanenter Link zu Mein Artikel">Mein Artikel</a></h2>

Um die Arbeit mit Template-Tags zu üben, ersetzen Sie "Hartcodierte Überschrift" in Zeile 17 mit folgendem Code:

<a href="<?php echo get_option
('home'); ?>/"><?php bloginfo('name'); ?></a>

Außerdem ersetzen Sie "Hartcodierter Slogan" in Zeile 18 durch

<?php bloginfo('description'); ?>

Sobald Sie die index.php abgespeichert und die Blog-Startseite im Browser aktualisiert haben, sehen Sie die Folgen. Im Kopf der Seite erscheinen jetzt der Name Ihres Blogs und der Slogan.

Der Name ist mit der Homepage verlinkt. Auf die gleiche Weise können Sie sich bei der Gestaltung von Themes immer wieder aus dem großen Baukasten der Template Tags bedienen.

zm_timkaufmann

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".