Nachdem der Webseiten-Header fertig in WordPress programmiert ist (siehe Tutorial Teil 8), geht es auf der CoffeeLove-Startseite weiter mit einem individuellen Seiten-Template. Dabei zeige ich dir wie praktisch benutzerdefinierte Felder in WordPress sind, und wie du die neusten Blog-Artikel oder Twitter-Nachrichten auf deiner Startseite integrieren kannst.

Live-Demo des Themes

Inzwischen habe ich das CoffeeLove-Theme auf einer Test-Installation online gestellt. So kannst du dir das Ergebnis der Programmierung live anschauen.

Bisher bearbeitete Theme-Dateien:

• header.php
• template-home.php
• footer.php
• style.css

1. Die Startseite

Wie schon im Teil 8 des Tutorials beschrieben, habe ich die WordPress-Seite »Home« als Startseite unter Einstellungen / Lesen im WordPress-Admin von CoffeeLove angelegt. Den standardmäßig in WordPress angezeigten Blog möchte ich stattdessen auf der Seite »Aktuelles« anzeigen. Mit dieser Möglichkeit eine »statische« Seite als Startseite zu definieren, ist WordPress leicht in der Funktion eines CMS zu nutzen.

Für den Inhalt der Home-Seite habe ich bereits ein individuelles Seiten-Template in meinem WordPress-Themeordner angelegt. Diese Template-Datei heißt template-home.php. Ich benötige ein individuelles Template (Anleitung Tutorial-Serie Teil 7), da auf der CoffeeLove-Seite jede Seite ein eigenes Layout hat. Auf der Startseite möchte ich z.B. einen Introtext, ein JavaScript Foto-Slider, ein Feature der neusten 3 Artikel, einen Link zum aktuellen Menü des Cafés und einen Twitterstream integrieren.

WordPress Tutorial Teil 9
Die einzelnen Elemente der Startseite habe ich hier farbig unterteilt, und die CSS-Klassen der jeweiligen Divs dazu notiert.

Im Teil 4 des Tutorials kannst du dir auch noch einmal die Layout-Vorlage der CoffeeLove-Startseite in einer Gesamtansicht anschauen.

2. Die template-home.php Datei

WordPress Tutorial Teil 9
Klicke auf das Bild, um es in einer größeren Ansicht anzuzeigen.

Um dem Tutorial besser folgen zu können, kannst du dir auch die template-home.php und die style.css (im aktuellen Zustand) Datei downloaden.

Im Texteditor öffne ich nun die template-home.php Datei und die style.css Datei. Als erstes umschließe ich den gesamten Inhalt der template-home.php Datei (außer get_header und get_footer) mit einem Div mit der ID content. So kann ich u.a. mit CSS den Abstand oberhalb und unterhalb des Seiteninhalts bestimmen oder andere CSS-Eigenschaften einfügen.

3. Der WordPress Loop

Als nächstes will ich den Text anzeigen, den ich im WordPress-Adminbereich auf der Seite »Home« eingetragen habe. Bei der CoffeeLove-Seite ist dies der Introtext. Um den Inhalt einer Seite oder eines Artikels in einem Template aufzurufen, nutzt man den WordPress Loop. Im WordPress-Codex kannst du dich ausführlich über den Loop in WordPress informieren.

Der Loop zu startet an folgender Stelle in deiner php-Datei:

[php]< ?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>[/php]

Der Loop endet bei:

[php]< ?php endwhile; ?>[/php]

Dazwischen nutzt den den WordPress Template-Tag the_content, um den gesamten Inhalt der Seite anzuzeigen.

[php]< ?php the_content(); ?>[/php]

Im WordPress-Codex findest du weitere Infos zum Template Tag »the_content«.

Den Featured-Slider mit Bilder-Impressionen des Cafés werde ich übrigens in einem späteren Teil des Tutorials mit Hilfe eines JavaScript-Plugins einfügen. Daher hier nur ein Platzhalter-Hintergrund.

4. Zusätzliche Inhalte integrieren

Besonders bei individuellen Seiten-Layouts, wie z.B. auf der CoffeeLove-Startseite kommt es häufig vor, dass du zusätzliche Infos auf der Seite anzeigen möchtest. Diese kannst du meist nicht alle innerhalb des Loops (also über den Seiteninhalt) einfügen.

4.1. Die neusten Artikel auf der Startseite

Um z.B. die neusten Artikel-Überschriften deines Blogs anzuzeigen, kannst du einen neuen Loop starten. Füge dazu folgenden Code ein.

[php]
<div class="recent-posts">
<h3><?php _e("Aktuelles", "twentyten"); ?></h3>
<ul>
<?php $my_query = new WP_Query(‘posts_per_page=4’); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<li><?php the_post_thumbnail(array( 50,50 ), array( ‘class’ => ‘recent-posts-thumbs’ )); ?>
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></li>
<?php endwhile; wp_reset_query(); ?>
</ul>
</div>
<!–end recent Posts –>
[/php]

Mit der WordPress-Funktion the_post_thumbnail (seit WordPress 2.9) kannst du dabei die Vorschaubilder der Artikel anzeigen. Hier findest du eine tolle Anleitung zur WordPress Thumbnail-Funktion.

4.2. Benutzerdefinierte Felder nutzen

Den Text für die aktuelle Menükarte und den Download-Button kannst du am besten über ein benutzerdefiniertes Feld einfügen. So kann später der Text und der Link leicht über den Admin-Bereich von WordPress aktualisiert werden. Normalerweise funktioniert die Ausgabe eines benutzerdefinierten Feldes nur innerhalb des Loops. Du gibst einfach den Namen (z.B. weeklymenu) und den Wert (Text mit Button-Link) auf der Home-Seite in ein neues benutzerdefiniertes Feld ein.

WordPress Tutorial Teil 9
Benutzerdefiniertes Feld (custom field) für das Menü-Feld auf der Startseite von CoffeeLove.

Innerhalb des Loops kannst du das benutzerdefinierte Feld jetzt einfach mit folgendem Code ausgeben.

[php]
<div class="recent-menu">
<h3><?php _e("Unser Wochenmen&uuml;", "twentyten"); ?></h3>
<p> <?php echo get_post_meta($post->ID, ‘weeklymenu’, true) ?> </p>
</div>
<!–end recent Menu –>

[/php]

Da ich auf der CoffeeLove-Seite den Loop ja bereits geschlossen habe, kann ich den Wert des benutzerdefinierten Feldes mit Hilfe dieses Code-Schnipsels auch außerhalb des Loops ausgeben.

[php]
<div class="recent-menu">
<h3><?php _e("Unser Wochenmen&uuml;", "twentyten"); ?></h3>
<p> <?php global $wp_query; $postid = $wp_query->post->ID; echo get_post_meta($postid, ‘weeklymenu’, true); wp_reset_query(); ?> </p>
</div>
<!–end recent Menu –>

[/php]

(Code-Quelle: WP Beginner)

4.3. Die neusten Tweets anzeigen

Für die Ansicht deiner neusten Twitter-Nachrichten kannst du z.B. das Twitter for WordPress-Plugin verwenden und per CSS an dein Layout anpassen. Oder du nutzt das von Twitter direkt zur Verfügung gestellte Twitter-Widget.

Ich habe das Twitter for WordPress-Plugin verwendet, und kann somit die neusten Tweets mit diesem Code-Schnipsel anzeigen (mehr Infos zum Plugin-Code findest du auf der Homepage des Plugins).

[php]
<div class="recent-twitter">
<h3><?php _e("Zwitscher mit uns", "twentyten"); ?></h3>
<?php twitter_messages(‘ellenbauer’, 3, true, true, ‘>>’, true, true, false); ?>
</div>
<!–end recent Tweets –>
[/php]

Mit Hilfe des folgenden CSS-Stylings habe ich den Twitter-Stream an mein Layout angepasst.

[php]
ul.twitter {
color:#6D4D35;
text-shadow: 1px 1px 1px #FFFCFA;
}
li.twitter-item {
padding:15px 0px 14px 0px;
border-bottom:1px solid #BFAB91;
}
li.twitter-item a {
color:#D35C59;
text-decoration:none;
}
li.twitter-item a:hover {
color:#D35C59;
text-decoration: underline;
}
[/php]

Wie man an diesen Beispielen sieht ist WordPress sehr vielseitig einsetzbar, und hast jede Menge Extras zu bieten. Besonders wenn du WordPress eher als CMS einsetzen möchtest, sind Funktionen wie eine individuelle Startseite oder benutzerdefinierte Felder sehr nützlich.

Im nächsten Teil der Tutorial-Serie geht es weiter mit der Footer der Webseite. Für die drei Bereiche des Footers werde ich die im Starkers Theme bereits vorbereiteten Footer-Widgets zum Einsatz bringen. So kann später der Text des Footers praktisch über den Widget-Adminbereich geändert werden.

Ich hoffe dir gefällt auch dieser Teil der Tutorial-Reihe. Über deine Fragen, sowie Änderungs- / Verbesserungsvorschläge zu den besprochenen Funktionen in WordPress freue ich mich sehr!

Weitere Teile der Tutorial-Serie