Natürlich braucht das CoffeeLove-Theme auch noch eine Blog-Funktion. So können die Webseiten-Besucher unter dem Navigations-Punkt »Aktuelles« alle Neuigkeiten des Cafés erfahren. Für die Theme-Anpassungen des im Tutorial-Teil 5 vorbereiteten Blog-Designs, müssen der WordPress-Loop, sowie die index.php, single.php und sidebar.php Datei bearbeitet werden. Außerdem kommen auch noch jede Menge CSS-Styles für das Stylesheet des CoffeeLove-Themes dazu. Also los geht’s, machen wir uns an die Arbeit :-)

1. Zur Übersicht

Die aktuelle Version des CoffeeLove-Themes habe ich wieder auf dem Elmastudio-Testblog online gestellt. So kannst du dir die im Tutorial besprochenen Funktionen live anschauen. Wenn du direkt in den WordPress-Dateien mitarbeiten möchtest, kannst du dir hier außerdem die derzeitige Theme-Version downloaden.

Folgende Theme-Dateien werden bearbeitet

• style.css
• index.php
• loop.php
• single.php
• sidebar.php

2. Das Blog-Layout erklärt

Das Layout der CoffeeLove Blog-Seite habe ich im Design etwas anders aufgeteilt, als das Design der Startseite, da ich im Blog eine Sidebar mit den neusten Flickr-Fotos, Blog-Beiträgen und Kommentaren verwenden möchte.

Webseiten Tutorial CoffeeLove Teil12

Da der Blog-Inhalt auf der Webseite des Cafés eher aus kurzen Nachrichten, wie Veranstaltungshinweisen, Menü-Specials etc. bestehen soll, verziehte ich in diesem Fall auf die „Weiterlesen“-Funktion (more-tag) und zeige den gesamten Inhalt der Artikel bereits auf der Startseite des Blogs an. Über den üblichen Link in der Artikel-Überschrift gelangt man dann auf die Einzelansicht eines Artikels. Hier wird später auch noch die Kommentar-Funktion aktiviert.

Webseiten Tutorial CoffeeLove Teil12
Link der Überschrift auf die Einzelansicht eines Artikels.

3. Die benötigten PHP-Dateien bearbeiten

Sobald du dir dein Blog-Layout noch einmal genau angeschaut hast, kannst du mit der Layout-Umsetzung in deinem WordPress-Theme loslegen. Am besten du startest mit dem Anlegen des Grund-Layouts. Für das CoffeeLove-Theme habe ich hierfür die Div-Container #blog-content das Listen-Element ul.sidebar angelegt (siehe farbig markierte Bereiche im ersten Bild).

3.1. Die index.php Datei

In der Index.php Datei des Themes wird immer der Blog-Loop aufgerufen, mit Hilfe dessen man die Reihenfolge der Artikel untereinander erreicht. Der Loop hat in der Starkers 3.0 Version eine eigene PHP-Datei, loop.php.

Der Loop wird in der index.php mit folgendem Code-Schnipsel aufgerufen:

[php]
< ?php get_template_part( ‘loop’, ‘index’ ); ?>
[/php]

Um diesen Codeschnipsel habe ich also den Div-Container mit der ID #blog-content erstellt.

Webseiten Tutorial CoffeeLove Teil12
Der Code für index.php mit dem Blog-Content Div und dem Aufruf des Loops.

3.2. Die sidebar.php Datei

In der sidebar.php Datei benötige ich im CoffeeLove-Theme lediglich einen Sidebar Widget Container innerhalb des Listenelements ul.sidebar. In diesen ersten Container (primary-widget-area) lege ich dann im Adminbereich von WordPress die 3 Widgets für Flickr-Fotos, aktuelle Beiträge und Kommentare an.

Webseiten Tutorial CoffeeLove Teil12
Da das CoffeeLove-Theme nur eine Widget-Area nutzt, reicht es nur diese innerhalb der ul sidebar-Liste aufzurufen.

3.3. Die loop.php Datei

In der Loop.php Datei befindet sich schließlich noch der Code, mit Hilfe dessen man die Anzeige der Blog-Elemente bestimmen kann. Auf den ersten Blick wirkt die loop.php Datei sehr kompliziert. Für die Anzeige der Blog-Übersicht benötigst du aber erst einmal nur einen kleinen Teil des Codes, nämlich den Bereich ab der Beschriftung im Starkers-Theme »How to display all other posts« (ca. Zeile 65).

Die Anzeige der einzelnen Artikel in der Blog-Übersicht habe ich noch einmal mit dem Div mit der Klasse .blog-post umschlossen. Auf diese Weise kann ich die Artikelansicht besser mit Hilfe von CSS gestalten.

[php]
<div class="blog-post">
<p class="meta"><?php the_time(‘d. F Y’) ?> // <?php if ( count( get_the_category() ) ) : ?> <?php printf( __( ‘%2$s’, ‘twentyten’ ), ‘entry-utility-prep entry-utility-prep-cat-links’, get_the_category_list( ‘ | ‘ ) ); ?> <?php endif; ?></p>

<h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( ‘Permalink to %s’, ‘twentyten’ ), the_title_attribute( ‘echo=0’ ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
<?php the_excerpt(); ?>
<?php else : ?>

<?php the_content( __( ‘Artikel weiterlesen &rarr;’, ‘twentyten’ ) ); ?>

<?php endif; ?>
</div>
<!–end Blog Post–>
[/php]

Als erstes Element kommt dann die Anzeige des Datums. Ich nutze dafür die WordPress-Funktion the_time. Die Anzeige der Zeit kannst du über PHP-Funktionen (hier: d. F Y) bestimmen. Eine Übersicht möglicher Datumsformate findest du auch im WordPress-Codex.

Um die Kategorien anzuzeigen, nutze ich die WordPress-Funktion get_the_category.

Um das Datum und die Kategorien mit CSS zu stylen, umschließe ich beide mit einem p-tag der Klasse .meta.

Weiter geht es im Loop mit der Anzeige der Überschrift (h2) als Link. Überschriften werden in WordPress mit der Funktion the_title aufgerufen.

Der nächste Absatz im Loop beschreibt, dass nicht der vollständige Artikel-Text, sondern lediglich eine Text-Vorschau (Excerpt) angezeigt werden soll, wenn es sich um eine Abfrage des Blog-Archivs oder der Suchergebnisse handeln sollte.

[php]
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
[/php]

Falls dies nicht der Fall ist soll der Inhalt (content) angezeigt werden.

[php]
<?php the_content( __( ‘Artikel weiterlesen &rarr;’, ‘twentyten’ ) ); ?>
[/php]

Möchtest du in der Blog-Übersicht nur eine bestimmte Vorschau deines Textes zeigen, kannst du beim Schreiben deines Artikels den more-tag an die gewünschte Text-Stelle setzen. Den Text deines Weiterlesen-Links kannst du dann innerhalb der Klammer von the_content bestimmen.

Mit dem Code endif und endwhile beendest du deinen Loop. Darunter kannst du noch den Code für eine Seiten-Navigation einfügen, mit den Funktionen next_posts_link und previous_posts_link kannst du so auf ältere bzw. neue Artikel weiter linken. Alternativ kannst du hierfür aber auch das beliebte Seiten-Navigations Plugin »WP PageNavi« nutzen.

Eine genaue Beschreibung des WordPress-Loops findest du auch im Artikel »WordPress-Tipps: Der Loop im Twenty Ten-Theme erklärt«.

4. Widgets für die Blog-Sidebar nutzen

Um die Flickr-Fotos als Sidebar-Widgets anzuzeigen, habe ich das WordPress-Plugin »Flickr Fotos« installiert. Die Anzeige der Bilder kannst du mit Hilfe des Plugins bequem in den Widget-Einstellungen bestimmen.

Webseiten Tutorial CoffeeLove Teil12
Deine Flickr User-ID kannst du über die Webseite idgettr.com herausfinden.

Für die Anzeige der Aktuellen Beiträge und der neusten Kommentare habe ich einfache Standard-Widgets verwendet.

Webseiten Tutorial CoffeeLove Teil12
Alle drei verwendeten Widgets sind in der Primary Widget Area abgelegt.

5. Ein Artikel in der Einzelansicht

Für die Anzeige der Artikel in der Einzelansicht wiederholst du lediglich die bereits verwendeten Code-Elemente in der single.php Datei deines Themes. Wenn du möchtest kannst du lediglich den Anchor-tag in der Überschrift entfernen, so dass die Überschrift nicht mehr anzuklicken ist. Außerdem gibt es mit der WordPress-Funktion get_the_author_meta noch die Möglichkeit, eine keine Autoreninfo anzuzeigen. Dazu musst du die Beschreibung in deinem Benutzer-Profil im WordPress-Admin ausfüllen.

Der Code für die Anzeige des Autorenfelds ist dann:

[php]
<?php if ( get_the_author_meta( ‘description’ ) ) : // If a user has filled out their description, show a bio on their entries ?>
<?php echo get_avatar( get_the_author_meta( ‘user_email’ ), apply_filters( ‘twentyten_author_bio_avatar_size’, 60 ) ); ?>
<h2><?php printf( esc_attr__( ‘About %s’, ‘twentyten’ ), get_the_author() ); ?></h2>
<?php the_author_meta( ‘description’ ); ?>
<a href="<?php echo get_author_posts_url( get_the_author_meta( ‘ID’ ) ); ?>">
<?php printf( __( ‘View all posts by %s &rarr;’, ‘twentyten’ ), get_the_author() ); ?>
</a>
[/php]

In der single.php Datei rufst du außerdem die Kommentare zu deinem Artikel auf. Der Code-Schnipsel hierfür lautet:

[php]
<?php comments_template( ”, true ); ?>
[/php]

Das Styling der Kommentare werde ich in einem extra Tutorial-Teil von CoffeeLove besprechen, da hier ebenfalls wieder jede Menge Einstellungen nötig sind.

6. Fazit

Natürlich gibt es noch jede Menge Möglichkeiten in WordPress und mit Hilfe von Plugins deinen Blog und die Artikel-Einzelseite zu gestalten und zu erweitern. Vielleicht findest du hierfür ja auf unserem Blog bereits weitere Inspirationen und Plugin-Tipps. Schaue dich doch einfach einmal in der Blog-Kategorie zum Thema WordPress um.

Ich hoffe dir hat auch dieser Teil der Tutorial-Serie Spaß gemacht, und die Tipps helfen dir bei der Arbeit in deinem eigenen WordPress-Theme weiter. Über dein Feedback, Fragen und Tipps zur Optimierung des Tutorials freue ich mich sehr!

Weitere Teile der Tutorial-Serie