Teil 2: 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
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...
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.
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="https://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
