Bastelarbeit mit Wordpress

Teil 2: Wordpress "Themes": Grundwissen ist gefragt

28.2.2010 von Redaktion pcmagazin und Tim Kaufmann

ca. 2:35 Min
Ratgeber
  1. Wordpress "Themes": Grundwissen ist gefragt
  2. Teil 2: Wordpress "Themes": Grundwissen ist gefragt
  3. Teil 3: Wordpress "Themes": Grundwissen ist gefragt
  4. Teil 4: Wordpress "Themes": Grundwissen ist gefragt
  5. 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 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
Stellen Sie Ihren Editor auf UTF-8, bevor Sie mit der Arbeit am Wordpress Theme beginnen.
© Archiv

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

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

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

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

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

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

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

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

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