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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…