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.

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.