---
title: "Eine neue Webseite entsteht (Teil 12): Der WordPress-Blog"
author: "Ellen Bauer"
date: 2010-11-19
lang: de
source: https://elmastudio.de/neue-webseite-entsteht-teil-12-wordpress-blog/
---

# Eine neue Webseite entsteht (Teil 12): Der WordPress-Blog

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](https://elmastudio.de/eine-neue-webseite-entsteht-teil-5-vorbereitungen-programmierung/) 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.

- Live-Demo
  des CoffeeLove Theme
- [Download
  Theme Dateien](https://elmastudio.de/wp-content/uploads/2010/11/coffeelove-themedateien-teil-12.zip)

### 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](https://elmastudio.de/wp-content/uploads/2010/11/webseiten-tutorial-teil12-01.jpg)

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](https://elmastudio.de/wp-content/uploads/2010/11/webseiten-tutorial-teil12-02.jpg)

*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 get_template_part( 'loop', 'index' ); ?>
```

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

![Webseiten Tutorial CoffeeLove Teil12](https://elmastudio.de/wp-content/uploads/2010/11/webseiten-tutorial-teil12-03.jpg)

*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](https://elmastudio.de/wp-content/uploads/2010/11/webseiten-tutorial-teil12-04.jpg)

*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.

```
<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-->
```

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](https://codex.wordpress.org/Formatting_Date_and_Time) findest du auch im WordPress-Codex.

Um die Kategorien anzuzeigen, nutze ich die WordPress-Funktion [get_the_category](https://codex.wordpress.org/Function_Reference/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](https://codex.wordpress.org/Function_Reference/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 if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
```

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

```
<?php the_content( __( 'Artikel weiterlesen &rarr;', 'twentyten' ) ); ?>
```

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«](https://wordpress.org/plugins/wp-pagenavi/) nutzen.

Eine genaue Beschreibung des WordPress-Loops findest du auch im Artikel [»WordPress-Tipps: Der Loop im Twenty Ten-Theme erklärt«](https://elmastudio.de/wordpress-tipps-der-loop-im-twenty-ten-theme-erklart/).

## 4. Widgets für die Blog-Sidebar nutzen

Um die Flickr-Fotos als Sidebar-Widgets anzuzeigen, habe ich das WordPress-Plugin [»Flickr Fotos«](https://wordpress.org/plugins/simple-flickr-plugin/) installiert. Die Anzeige der Bilder kannst du mit Hilfe des Plugins bequem in den Widget-Einstellungen bestimmen.

![Webseiten Tutorial CoffeeLove Teil12](https://elmastudio.de/wp-content/uploads/2010/11/webseiten-tutorial-teil12-05.jpg)

*Deine Flickr User-ID kannst du über die Webseite [idgettr.com](http://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](https://elmastudio.de/wp-content/uploads/2010/11/webseiten-tutorial-teil12-06.jpg)

*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 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>
```

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

```
<?php comments_template( '', true ); ?>
```

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](https://elmastudio.de/category/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

- [Eine neue Webseite entsteht (Teil 1): Inspiration und Materialsammlung](https://elmastudio.de/webseite-entsteht-teil-1-inspiration-materialsammlung/)
- [Eine neue Webseite entsteht (Teil 2): Die Layout-Vorlage (Mockup)](https://elmastudio.de/eine-neue-webseite-entsteht-teil-2-die-layout-vorlage-mockup/)
- [Eine neue Webseite entsteht (Teil 3): Webdesign mit Illustrator und Photoshop](https://elmastudio.de/webseite-entsteht-teil-3-webdesign-illustrator-photoshop/)
- [Eine neue Webseite entsteht (Teil 4): Das Webdesign-Styling](https://elmastudio.de/eine-neue-webseite-entsteht-teil-4-das-webdesign-styling/)
- [Eine neue Webseite entsteht (Teil 5): Vorbereitungen für die Programmierung](https://elmastudio.de/eine-neue-webseite-entsteht-teil-5-vorbereitungen-programmierung/)
- [Eine neue Webseite entsteht (Teil 6): WordPress lokal Installation und Blank-Theme](https://elmastudio.de/webseite-entsteht-teil-6-wordpress-lokal-installation-blank-theme/)
- [Eine neue Webseite entsteht (Teil 7): Die Datei-Struktur des WordPress-Themes](https://elmastudio.de/eine-neue-webseite-entsteht-teil-7-die-datei-struktur-des-wordpress-themes/)
- [Eine neue Webseite entsteht (Teil 8): Der WordPress-Theme Header](https://elmastudio.de/neue-webseite-entsteht-teil8-wordpress-theme-header/)
- [Eine neue Webseite entsteht (Teil 9): Eine individuelle Startseite in WordPress](https://elmastudio.de/neue-webseite-entsteht-teil-9-individuelle-startseite-wordpress/)
- [Eine neue Webseite entsteht (Teil 10): WordPress Footer-Widgets nutzen](https://elmastudio.de/neue-webseite-entsteht-teil-10-footer-widgets/)
- [Eine neue Webseite entsteht (Teil 11): Einen jQuery Bilder-Slider integrieren](https://elmastudio.de/eine-neue-webseite-entsteht-teil-11-jquery-bilder-slider/)