dynamicinternet Wir machen Ihr Web dynamisch!

WordPress Themes Step by Step Teil 3

Folgende Teile sind erschienen:

• WordPress Themes Step by Step Teil 1
• WordPress Themes Step by Step Teil 2
• WordPress Themes Step by Step Teil 3
• WordPress Themes Step by Step Teil 4

Inhaltsverzeichnis:

• Lizenz
• Download
• Einleitung
• Die index.php
• The Loop
• Template Tags
• Template Tag the_title
• Template Tag the_permalink
• Template Tag the_content
• Template Tag the excerpt
• Template Tag the_ID
• Template Tag post_nav_link
• Template Tags previous_post_link und next_post_link
• Template Tag the_time
• Template Tags the_author, the_author_link, the_author_ID
• Template Tag the_category
• Template Tag comments_popup_link
• Template Tag edit_post_link
• Die Infoliste
• Template Tag comments_number

Lizenz

YAML wurde unter der Creative Commons Attribution 2.0 Lizenz (CC-A 2.0) veröffentlicht. Aus diesem Grund stehen die Downloadpakete ebenfalls unter der CC-A 2.0. Eine kostenlose private und kommerzielle Nutzung ist gestattet.
Bedingung: Für die kostenfreie Nutzung des YAML Framework und des hier erstellten Themes ist die Namensnennung der Autoren/Rechteinhaber und die Rückverlinkung zur YAML Homepage (http://www.yaml.de) sowie zu meiner Homepage (http://dynamicinternet.eu) in der Fußzeile der Webseite oder im Impressum vorgeschrieben.

Download

Die erforderlichen Dateien können als Zip-Datei heruntergeladen werden. Sie beinhalten alle in Teil 1 durchgeführten Schritte. Download Beginn Teil 3.

Einleitung

Nachdem im zweiten Teil dieser Serie die header.hp und die footer.php fertig gestellt wurden, wenden wir uns hier im dritten Teil der index.php zu. Wir wissen von der WordPress Template Hierarchie, dass immer, wenn die von WordPress erwartete Datei fehlt, in letzter Konsequenz die index.php aufgerufen wird. Sie ist damit die wichtigste Template-Datei. Selbst wenn wir keine anderen Template-Dateien in unserem Theme hätten (ich rede hier von single.php, page.php, archiv.php usw., nicht von header.php uä.), würde unser Blog voll funktionieren. Die einzige Einschränkung, die wir uns dadurch auferlegen, ist der immer identische Look aller Seiten. Das bedeutet also, dass all die anderen Template-Dateien nur unterschiedliche Views (Ansichten) sind, an die wir besondere Ansprüche stellen. Sehen wir uns jetzt die index.php im Editor an.

Die index.php

<?php get_header(); ?>

<!-- begin: main content area #main -->

<div id="main">

 <!-- begin: #col1 - first float column -->

 <div id="col1">

 	<div id="col1_content" class="clearfix">

 		<h2>Column  #col1</h2>

 		<p>Lorem ipsum ... porttitor. </p>

 	</div>

 </div>

 <!-- end: #col1 -->

 <?php get_sidebar();?>

 <?php get_footer(); ?>

Gleich zu Beginn der index.php wird die header.php mit get_header() eingebunden. Es folgt der Hauptinhaltsbereich div #main. Er umschließt div #col1 und div #col3 in der sidebar.php und wird dort wieder geschlossen. Anschließend folgt die Einbindung der sidebar.php mit get_sidebar() und am Ende der Datei die footer.php mit get_footer(). Durch diese Auslagerung von nicht relevantem Code in andere Dateien können wir uns hier in der index.php ausschließlich mit der Präsentation der Beiträge beschäftigen.

The Loop

Der so genannte Loop ist der Hauptprozess von WordPress. Er erfüllt eine Menge Aufgaben, die wir im Einzelnen nicht unbedingt kennen müssen. Es sind Funktionen wie das Überprüfen, ob alle benötigten Dateien vorhanden sind, dem Einlesen der vom Blogadministrator getätigten Einstellungen, Verbindung zur Datenbank, das Bereitstellen der abgefragten Daten usw. Und so sieht The Loop aus:

if (have_posts()) :

 while (have_posts()) :

 	the_post();

 endwhile;

else :

endif;

Der Loop beginnt mit der Prüfung, ob überhaupt posts vorhanden sind – if (have_posts()). Posts können Beiträge sein (post), statische Seiten (page) oder auch Bilder, Dateianhänge (attachment).
Sollte nichts dergleichen in der Datenbank vorhanden sein, wird die else Bedingung ausgeführt. Sind posts vorhanden, wird die while-Scheife solange durchlaufen, wie have_posts() true zurückliefert. Ist das nicht mehr der Fall, wird mit endif abgebrochen. Die Funktion the_post() stellt alle relevanten Informationen der jeweiligen post bereit und macht sie für die Template Tags nutzbar.

Der Loop muss nun an der richtigen Stelle im Template eingefügt werden. Dabei muss man beachten, dass alle Elemente, die sich innerhalb der while-Schleife befinden, wiederholt werden. Und zwar so oft, wie posts vorhanden sind.
In unserem YAML Template benutzen wir dafür den Bereich innerhalb von div #col1_content. Bauen wir nun den Loop in die index.php ein.

<div id="col1_content" class="clearfix">

<?php if (have_posts()) : ?>

 <?php while (have_posts()) : ?>

 	<?php the_post(); ?>

 	<h2>Column  #col1</h2>

 	<p>Lorem ipsum ... porttitor. </p>

 <?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

</div>

Jetzt rufen wir das Blog auf und sehen x mal die Überschrift sowie den Lorem ipsum Text. Die Anzahl ist abhängig davon, was im Administrationsmodul unter Einstellungen->Lesen->zeige die letzten x Beiträge eingestellt wurde. Das müssen nicht nur Informationen aus dem Beitrag sein. Bilder als Gestaltungselement, HTML Elemente, was immer man als darstellenswert erachtet, wird x mal wiederholt.
Wir stellen für die Theme Entwicklung den Wert in Leseeinstellungen auf 3 Beiträge, dann brauchen wir nicht soviel zu scrollen.

Bevor wir uns der Ausgabe der Beiträge widmen, treffen wir Vorkehrungen für den Fall, dass nichts in der Datenbank gefunden wird. Der Besucher unseres Blogs soll nicht mit einer leeren Seite konfrontiert werden. Das kann man mit einer Überschrift und einem anschließenden kurzen Hinweis erledigen. Vorher gilt es aber zu prüfen, ob man das Theme nur für sich selbst baut, oder ob man es auch Anderen zur Verfügung stellen will. Sollte das der Fall sein, muss wiederum entschieden werden, ob man es auch einem internationalen Publikum zugänglich machen möchte.Für die Übersetzung von Standardtexten stehen 2 Funktionen zur Verfügung:

__(‘message’) , wenn eine Übersetzung innerhalb einer Funktion ausgeführt werden soll
_e(‘message’), wenn der Text direkt übersetzt werden soll. In beiden Fällen wird im Localisation Module nach einer Übersetzung gesucht, wird nichts gefunden, wird ‘message’ ausgegeben. Wir werden uns hier auf unsere Landessprache beschränken.

<?php else : ?>

 <h2>Nichts gefunden</h2>

 <p>Sorry, aber du suchst gerade nach etwas, was hier nicht ist.</p>

<?php endif; ?>

Kommen wir jetzt zu den lang erwarteten Template Tags.

Template Tags

WordPress verfügt über mehr als 120 Template Tags, wobei einige von ihnen als „deprecated“ gekennzeichnet sind. Diese sollten nicht mehr verwendet werden. Last euch durch die Anzahl nicht erschrecken, ich kenne auch nicht alle auswendig und schaue bei Bedarf immer in der Wordpress Dokumentation nach. Was sind Template Tags und was machen sie?

Template Tags sind Funktionen, die die es dem Nutzer erlauben, innerhalb des Themes bestimmte Informationen abzufragen bzw. auszugeben. Intern rufen die Template Tags andere Funktionen auf, teilweise werden Filter hinzugefügt usw. Manche haben Parameter, andere wiederum nicht. Hier der Code des the_title() Template Tags, zu finden in /wp-inlcudes/post-template.php:

function the_title($before = '', $after = '', $echo = true) {

 $title = get_the_title();

 if ( strlen($title) > 0 ) {

 	$title = apply_filters('the_title', $before . $title . $after, $before, $after);

 	if ( $echo )

 		echo $title;

 	else

 		return $title;

 }

}

Wie man sieht, verfügt die Funktion the_title() über 3 optionale Parameter. the_title() ruft die Funktion get_the_title() auf, die den Titel der post liefert. Anschließend wird dem Titelstring ein Filter hinzugefügt, apply_filters(‘the_title’…, welcher die Funktion wptexturize() aufruft, die wiederum in der formatting.php steht. Das muss man nicht unbedingt wissen und ist an dieser Stelle für alle diejenigen als Hinweis gedacht, die etwas tiefer in die Materie einsteigen wollen. Auf keinen Fall irgendwelche Änderungen an diesen Dateien vornehmen.
Bleiben wir gleich bei the_title().

Template Tag the_title

Wir fügen innerhalb der Überschrift the_title() ohne zusätzliche Parameter ein. Den Paragraf mit dem Lorem ipsum Text löschen wir vorher heraus, wir benötigen ihn nicht mehr.

<?php while (have_posts()) : ?>

 <?php the_post(); ?>

 <h2><?php the_title(); ?></h2>

<?php endwhile; ?>

Nach dem Aufrufen des Blogs sehen wir wie erwartet die Titel der Beiträge als Überschrift.
Zusätzlich kann man noch 3 Parameter angeben:

• before – Text, der vor dem Titel dargestellt wird, default ist ”
• after – Text, der nach dem Titel dargestellt wird, default ist ”
• display – true gibt mit echo den Titel aus, false zur Verwendung in PHP

Ein paar Beispiele:
Wir entfernen die h2 Tags und schreiben

<?php the_title('<h2>', '</h2>', true); ?>

Es hat sich nichts geändert, die Überschrift wird ebenfalls in h2 Tags ausgegeben.
Ein anderes Beispiel:

<h2><?php the_title('♥ ', '™', true); ?></h2>

Ok, ein bischen albern, zeigt aber gut die Möglichkeiten auf.
Wozu kann man den dritten Parameter nutzen?

<h2><?php the_title(); ?></h2>

<?php $myTitle = the_title('', '', false); ?>

<p><?php echo "Dieser Beitrag handelt von " . $myTitle; ?></p>

Hinweis: Gib entweder keine Parameter an, oder alle. Nichtbenötigte können in leeren Hochkommata geschrieben werden. Es dient der Lesbarkeit im Quellcode.
Noch ist der Blogtitel nicht komplett, es fehlt der Permalink.

Template Tag the_permalink

Zu the_permalink() ist nicht viel zu sagen. Er liefert die absolute URL zur post, jedoch nicht den kompletten Link. Parameter gibt es für the_permalink() keine.
Bauen wir uns den Beitragstitel zusammen:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link zu diesem Artikel"><?php the_title(); ?></a></h2>

Braucht man für einen Fall den Permalink in einer Variable, benutzt man get_permalink(). Dabei kann innerhalb der Klammern auch die ID einer post stehen.

$link = get_permalink(5);

echo $link;

Gibt den Permalink der post mit der ID 5 aus.

Template Tag the_content

Für den gesamten Inhalt eines Beitrags ist the_content(‘more_link_text’) zuständig. Wird beim Schreiben eines Beitrags das Quicktag <!–more–> verwendet und es ist keine Einzelansicht des Beitrags, wird der Beitrag bis zu diesem Quicktag dargestellt. Es erscheint ein Link zur Beitragsansicht mit dem Titel more_link_text. Anwendung:

<?php the_content('weiterlesen...'); ?>

Bei Internationalisierung:

<?php the_content(__('(more...)')); ?>

Man kann auch individuell den more_link_text zusammenbauen:

<?php the_content(the_title('', '', false) . ' weiterlesen...'  ); ?>

Das ergibt dann: Dein Beitragstitel weiterlesen…
WordPress vergibt dem more-Link automatisch die Klasse more-link. Wenn wir den Link besonders gestalten möchten, müssen wir die Klasse im css/screen/content.css hinzufügen.

Template Tag the_excerpt

Eine zweite Variante, den Inhalt auszugeben, ist the_excerpt(). Dabei handelt es sich um eine optionale Kurzfassung oder auch „Anreißer“ des Beitrags, welche man beim Schreiben des Beitrags in dem Feld “Optionale Kurzfassung” eintragen kann.

Das macht eigentlich nur bei längeren Beiträgen Sinn. Sollte die post keine optionale Kurzfassung haben, werden bei the_exerpt() maximal die ersten 55 Worte ohne Formatierung und HTML Tags ausgegeben. Das kann jedoch manchmal zu unerwünschten Ergebnissen führen. Ich hatte in einem Beitrag beschissenes bescheidenes Wetter geschrieben. Bei der Darstellung auf meiner Blogstartseite mit the_excerpt() war natürlich die Schriftformatierung weg und es sah schon etwas beschissen bescheiden aus
the_excerpt eignet sich gut für eine Startseite oder Archiv- und Kategorieansichten. Dort hat der Leser einen besseren Überblick über die Beiträge. In der index.php würde ich es nicht verwenden, da die index.php so universell wie möglich angelegt werden sollte.

Template Tag the_ID

Bevor wir weitere Template Tags verwenden werden, ein kleiner Zwischenstop. Sehen wir noch einmal auf den Quellcode:

<div id="col1_content" class="clearfix">

<?php if (have_posts()) : ?>

 <?php while (have_posts()) : ?>

 	<?php the_post(); ?>

 	<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link zu diesem Artikel"><?php the_title(); ?></a></h2>

 	<?php the_content(' weiterlesen ...'); ?>

 <?php endwhile; ?>

 <?php else : ?>

 	<h2>Nicht gefunden</h2>

 	<p>Sorry, aber du suchst gerade nach etwas, was hier nicht ist.</p>

 <?php endif; ?>

</div>

Im Moment schreiben wir innerhalb von #col1_content die Beiträge untereinander. Daran ist eigentlich auch nichts auszusetzen. Wir könnten aber auch die Beiträge in einen Div-Container schreiben (ich höre die Div-Hasser gerade aufschreien…). Das würde uns mehr Gestaltungsspielraum geben, falls jemand eine andere Hintergrundfarbe für dem Beitrag möchte, oder einen Rahmen darum. Was auch immer. Auch die Abstände der Beiträge zueinander lassen sich einfacher verändern, ohne die Abstände der Überschriften, Paragrafen etc. anzufassen. Ich nutze jedenfalls diesen zusätzlichen Container in meinen Templates. Bauen wir ihn einmal ein. Das öffnende Div unter the_post() und das schließende unter the_content(), da der Container ebenfalls durch die while-Schleife wiederholt werden soll.

Das Div bekommt eine Klasse zugewiesen, zB. post oder beitrag. Zusätzlich vergeben wir an das Div noch eine id. Da auf einer Webseite Klassen beliebig viel, id’s aber nur einmal vorkommen dürfen, hängen wir an den id-Bezeichner noch die ID des Beitrages an. Dazu verwenden wir den Template_Tag the_ID().

<div class="post" id="post-<?php the_ID(); ?>">

 <h2> ... </h2>

 <?php the_content('weiterlesen...'); ?>

</div>

Wir haben eine einzigartige id erzeugt, da die ID einer post in der Datenbank nur einmal vorkommen kann. Auf diese id könnte man beispielsweise mit JavaScript gezielt zugreifen, oder man benutzt die id als simplen Anker.

Die Klasse .post müssen wir natürlich noch in dem Stylesheet /css/screen/content.css eintragen.
Ich mache meist zuerst einen Rahmen um das Element. Damit kann ich die Position und Abstände besser erkennen: .post { border: 1px solid blue}
Wie erwartet kleben die Divs alle zusammen. Da wir den oberen Abstand nicht verändern wollen, der soll mit der Überschrift in der Sidebar in einer Linie stehen, bekommt die Klasse .post ein margin-bottom von 1.0em und einen unteren Rahmen mit 2px Stärke. Den blauen Rahmen entfernen wir wieder.

CSS

.post {

    border-bottom:2px solid #eee;

    margin-bottom: 1.0em;

  }    

Fehlt noch die Seitennavigation. Hierzu gibt es 2 Template Tags, post_nav_link() und die Kombination von previous_post_link() und next_post_link().

Template Tag post_nav_link

post_nav_link() erzeugt eine einfache Seitennavigation. Es gibt 3 Parameter, mit denen man die Darstellung der Seitenlinks beeinflussen kann:

• sep – Text, der zwischen den Links dargestellt werden soll, default ist ‘ – ‘
• prelabel -Linktext für die vorherige Seite, default << Previous Page
• nextlabel – Linktext für die nächste Seite, default Next Page >>

Benutzung:

<p><?php  post_nav_link(' -- ', ' « vorherige Seite ', ' nächste Seite »')?></p>

Der Unterschied zu den beiden nachfolgenden Template Tags ist der, dass nur ein Navigationslink erzeugt wird.

Template Tags previous_post_link und next_post_link

Diese beiden Template Tags habe ich in meinem Theme als Alternative zu einem Plugin.

Die Benutzung, genauer gesagt die Bezeichnung der Template Tags ist etwas verwirrend. Mit zunehmender Seitenzahl werden die Beiträge immer älter. next_post_link() führt also zu den älteren Beiträgen und previous_post_link() führt zu den Neueren:

next_posts_link('« Previous Entries')

previous_posts_link('Next Entries »')

Irgendwie widersprüchlich liebe WordPress-Entwickler…
Bauen wir den Code ein:

<?php endwhile; ?>

<div class="pagination floatbox">

 <p class="float_left"><?php next_posts_link("« ältere Beiträge") ?></p>

 <p class="float_right"><?php previous_posts_link('neuere Beiträge »') ?></p>

</div>

<?php else : ?>

Wichtig ist, dass der Code nicht innerhalb, sondern unterhalb von The Loop steht, sonst wird er mit jedem Beitrag wiederholt.
Im default Theme besitzt der umschließende Container die Klasse navigation, ich habe sie abgeändert zu pagination, das ist aussagekräftiger und den Namen navigation benutzen wir schon bei den Skiplinks. Die zusätzliche Klasse floatbox ist neben float_left und float_right eine in YAML vordefinierte Klasse, welche die Floats auf den umschließenden Div-Container beschränkt. Siehe dazu: YAML – Die Funktionsweise von Floats. Im Stylesheet css/screen/content.css wird die Klasse .pagination eingetragen und erhält ein margin-top von 2em.
Ich verwende im meinem Blog für die Seitennavigation das Plugin PageBar, welches eine erweiterte Seitennavigation realisiert.

Da ich mit diesem Tutorial keine Plugins ausliefere, hier nur ein Hinweis, wie dieses Plugin in den Quellcode eingebaut werden kann:

<?php if (function_exists('wp_pagebar')) { ?>

 <?php wp_pagebar(array('before'=>'', 'tooltip_text'=>'Seite', 'next'=>'»', 'prev'=>'«')); ?>

<?php } else { ?>

 <div class="pagination">

<p class="float_left"><?php next_posts_link("« ältere Beiträge") ?></p>

 <p class="float_right"><?php previous_posts_link('neuere Beiträge »') ?></p>

 </div>

<?php } ?>

Zuerst fragt man ab, ob die Funktion wp_pagebar überhaupt vorhanden ist. Sollte das nicht der Fall sein, wird die von uns erstellte Seitennavigation aufgerufen. Diese Verfahrensweise ist sehr wichtig bei der Einbindung von Plugins. Es kann passieren, dass das Plugin deaktiviert oder gelöscht wird und man nicht an den Code im Template denkt. Dann kommt es zu unschönen Fehlermeldungen und die Seite wird nicht aufgerufen.

Kommen wir jetzt zu weiteren Template Tags. Jeder kennt die Angaben zu Datum und Uhrzeit, dem Autor des Beitrags, Anzahl der Kommentare, Kategorien usw. Es gibt unzählige Möglichkeiten, diese Informationen zu gestalten. Auch hat jeder andere Vorstellungen, was er für Angaben über seinen Beitrag darstellen möchte. Unterm Strich ist es aber nur HTML und CSS in Verbindung mit den richtigen Template Tags.

Template Tag the_time

the_time(‘d’) liefert das Datum und die Zeit der Veröffentlichung einer post in Abhängigkeit der Formatierungsanweisung innerhalb der Klammern. Dabei handelt es sich um die in PHP verwendeten Parameter der Funktion date.

<?php the_time('j. F Y, G:i') ?>

Gibt aus: 4. September 2007, 17:48
Für die Darstellung dieser Zusatzinformationen werden wir 2 Beispiele weiterverfolgen. Einmal in Form von Text und einmal als ungeordnete Liste. Der Text

<p>geschrieben am <?php the_time('j. F Y'); ?> um <?php the_time('G:i'); ?> Uhr</p>

Gibt aus: geschrieben am 4. September 2007 um 17:48 Uhr
Die Liste:

<ul>

<li><?php the_time('j. F Y'); ?></li>

</ul>

Der Vollständigkeit halber möchte ich noch ein paar Template Tags hier erwähnen, auf die ich nicht genauer eingehen werde. Da wären:
the_date() – Gibt das Datum der post aus, gibt es mehrere posts am gleichen Tag, erhält nur die erste post das Datum.
the_modified_date(), the_modified_time() – gibt das Datum bzw. die Zeit der letzten Aktualisierung wieder. Ich verwende es hier auf diesen Seiten.

Template Tags the_author, the_author_link, the_author_ID

Author Template Tags gibt es 15 Stück, die als deprecated gekennzeichneten nicht mitgezählt. Alle author Tags geben Informationen preis, die in den Benutzer-Einstellungen getätigt worden sind. Ich möchte hier 3 näher erwähnen.

• the_author() – Gibt den Namen des Autors aus, welcher in Benutzerverwaltung-> Name, der im Blog benutzt werden soll, eingestellt ist.
• the_author_link() – Gibt den Namen wie bei the_author() aus, aber mit Link zu seiner Webseite. Das macht Sinn, wenn man Co-Autoren im Blog hat, die eine eigene Webseite haben.
• the_author_ID() – Gibt die ID des Autors aus.

Ergänzen wir die beiden Beispiele von oben mit the_author():

<p>geschrieben von <?php the_author(); ?> am <?php the_time('j. F Y'); ?> um <?php the_time('G:i'); ?> Uhr</p>

geschrieben von admin am 4. September 2007 um 17:48 Uhr
und die Liste:

<ul>

 <li><?php the_time('j. F Y'); ?></li>

 <li><?php the_author(); ?></li>

</ul>

Wir können noch zusätzlich die Kategorien anzeigen, in denen der Beitrag abgelegt ist.

Template Tag the_category

the_category(’separator’, ‘parents’) gibt den/die Link/Links der Kategorien aus, in welcher der Beitrag abgelegt wurde. 2 Parameter sind möglich:

• separator – Trennzeichen bei mehreren Kategorien, default ist ein Leerzeichen
• parents – betrifft Unterkategorien, hier gibt es 2 Varianten:
  • multiple – separate Links der Ober- und Unterkategorie mit Vater/Kind Beziehung
  • single – zeigt nur den Link der Unterkategorie an aber mit Vater/Kind Beziehung
  • default ist nur der Link der Unterkategorie

Ist etwas verwirrend probiert es am besten mal aus.

<p>geschrieben von <?php the_author(); ?> am <?php the_time('j. F Y'); ?> um <?php the_time('G:i'); ?> Uhr, abgelegt unter <?php the_category(', ', '') ?></p>

Und die Liste

<ul>

 <li><?php the_time('j. F Y'); ?></li>

 <li><?php the_author(); ?></li>

 <li><?php the_category(', ', '') ?></li>

</ul>

Die Anzahl der Kommentare können wir ebenfalls mit einbinden. Das ist sogar sehr sinnvoll, weil man mit dem Kommentare-Link direkt zu den Kommentaren bzw. dem Kontaktformular springen kann.

Template Tag popup_link

Sollte comments_popup_script() in der header.php verwendet werden, wird ein Link zum Popup Fenster angezeigt, ansonsten ein Link zum Kommentarbereich des Artikel (Anker #respond). 5 Parameter sind möglich:

• zero – Text für keine Kommentare, Defaultwert ist No Comments
• one – Text für 1 Kommentar, Defaultwert ist 1 Comment
• more – Text für mehr als ein Kommantar, Defaultwert ist % Comments
• CSSclass – optionale Klasse zum stylen des Links, kein Defaultwert
• none – Text, wenn Kommentare nicht erlaubt sind, Defaultwert Comments Off

Da der Paragraf immer länger wird und eine Satzbildung immer schwieriger, würde ich den Kommentarlink in einer extra Zeile unter den Beitragsinhalt packen.

<p><?php comments_popup_link('0 Kommentare', '1 Kommentar', '% Kommentare', '', 'Kommentare sind abgeschaltet.'); ?></p>

Die Liste:

<li><?php comments_popup_link('0 Kommentare', '1 Kommentar', '% Kommentare', '', 'Kommentare sind abgeschaltet.'); ?></li>

Template Tag edit_post_link

Der edit_post_link() ist ein sehr nützlicher Template Tag. Er erscheint, wenn ein Benutzer eingeloggt ist und er berechtigt ist, Beiträge zu editieren. Oft kommt es vor, dass man nach dem Veröffentlichen eines Beitrags beim Lesen doch noch eine Kleinigkeit findet, die man korrigieren möchte. Dann braucht man nur auf den Link klicken und der Beitrag wird zum Bearbeiten geladen. Parameter gibt es 3:

• link – Linktext, der dargestellt werden soll, Defaultwert ist Edit This
• before – Text, der vor dem Linktext erscheint, kein Defaultwert
• after – Text, der nach dem Linktext erscheint, kein Defaultwert

<p><?php comments_popup_link('kein Kommentar', '1 Kommentar', '% Kommentare', '', 'Kommentare sind abgeschaltet.'); ?><?php edit_post_link('bearbeiten',' | ',''); ?></p>

Bei der Liste müssen wir aufpassen. Würden wir die Anweisung in <li> Tags setzten, hätten wir ein leeres Listenelement, wenn ein normaler Leser den Beitrag anschaut. Im schlimmsten Fall sogar das Aufzählungszeichen der Liste.

<ul>

 <li><?php the_time('j. F Y'); ?></li>

 <li><?php the_author(); ?></li>

 <li><?php the_category(', ', '') ?></li>

 <li><?php comments_popup_link('kein Kommentar', '1 Kommentar', '% Kommentare', '', 'Kommentare sind abgeschaltet.'); ?></li>

 <?php edit_post_link('bearbeiten','<li>','</li>'); ?>

</ul>

Die Infoliste

Die Listenvariante sieht so natürlich nicht gut aus. Wir vergeben der Liste zuerst einmal eine Klasse, postinfo und zusätzlich wieder floatbox, da wir den Float der Listenelementen nur auf die Liste beschränken wollen. Wollen wir den einzelnen Listenelementen noch dazu verschiedene Icons voranstellen, müssen wir jedem Listenelement eine eigene Klasse vergeben.
Hier die fertige Liste:

<ul class="postinfo floatbox">

 <li class="infotime"><?php the_time('j. F Y'); ?></li>

 <li class="infoauthor"><?php the_author(); ?></li>

 <li class="infokategorie"><?php the_category(', ', '') ?></li>

 <li class="infocomments"><?php comments_popup_link('kein Kommentar', '1 Kommentar', '% Kommentare', '', 'Kommentare sind abgeschaltet.'); ?></li>

 <?php edit_post_link('bearbeiten','<li class="infoedit">','</li>'); ?>

</ul>

CSS:

.postinfo {

    margin:0.5em 0;

 padding:0;

 background:#fcfcfc;

 border-top:1px solid #ddd;

 border-bottom:1px solid #ddd;

  }

  .postinfo li {

    float:left;

    list-style-type:none;

 padding:0.4em 10px 0.4em 20px;

 margin:0;

  }

  .infotime{

 background:transparent url(../../images/infotime.gif) center left no-repeat;

  }

  .infoauthor{

 background:transparent url(../../images/infoauthor.gif) center left no-repeat;

  }

  .infokategorie{

 background:transparent url(../../images/infocategory.gif) center left no-repeat;

  }

  .infocomments{

 background:transparent url(../../images/infocomments.gif) center left no-repeat;

  }

  .infoedit{

 background:transparent url(../../images/infoedit.gif) center left no-repeat;

  }

Hier ein Screenshot der Liste:

Da ich im Quellcode nicht beide Varianten vorhalten kann, entscheide ich mich vorläufig für die Liste, weil sie etwas aufwendiger ist.
Die Icons stammen von famfamfam. Ich habe sie in den Ordner images mit eingefügt.

Wir rufen jetzt noch einmal das Blog auf und lassen die Seite validieren. Die Einzelansicht der Beiträge und die statischen Seiten funktionieren auch. Die index.php übernimmt so die Funktion der single.php und der page.php, aber das wissen wir ja bereits.
Ein Fehler ist dennoch aufgetreten. In der Einzelansicht und in der Seitenansicht fehlt der Kommentarlink, der nicht in diesen Ansichten funktioniert. Wir könnten darüber hinwegsehen, da wir in einem der nächsten Teile diese Templates bauen werden, aber wir machen es gleich vernünftig.

Template Tag comments_number

comments_number() ist ähnlich wie comments_popup_link(), nur das eben kein Link produziert wird, sondern die Anzahl der Kommentare als Text. Parameter:

• zero – Text für keine Kommentare, Defaultwert ist No Comments
• one – Text für 1 Kommentar, Defaultwert ist 1 Comment
• more – Text für mehr als ein Kommantar, Defaultwert ist % Comments
• number – Anzahl der Kommentare, Defaultwert ist die Anzahl aller Kommentare, Ping/Trackbacks

Wir können aber trotzdem einen Anker #comments einbauen, damit wir säpter zu den Kommentaren springen können. Dieser Bereich steht in der comments.php, aber das ist eine andere Baustelle™.
So sieht der Quellcode aus:

<?php if (is_single() || is_page()) : ?>

<li  class="infocomments"><a href="#comments" title="zu den Kommentaren springen"><?php comments_number('kein Kommentar', '1 Kommentar', '% Kommentare', ''); ?></a></li>

<?php else : ?>

 <li class="infocomments"><?php comments_popup_link('kein Kommentar', '1 Kommentar', '% Kommentare', '', 'Kommentare sind abgeschaltet.'); ?></li>

<?php endif; ?>

Damit hätten wir auch diesen Fehler beseitigt. Zur Übersicht der komplette Quellcode der index.php:

<?php get_header(); ?>

<!-- begin: main content area #main -->

<div id="main">

 <!-- begin: #col1 - first float column -->

 <div id="col1">

 	<div id="col1_content" class="clearfix">

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

 		<div class="post" id="post-<?php the_ID(); ?>">

 			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link zu diesem Artikel"><?php the_title(); ?></a></h2>

 			<ul class="postinfo floatbox">

 				<li class="infotime"><?php the_time('j. F Y'); ?></li>

 				<li class="infoauthor"><?php the_author(); ?></li>

 				<li class="infokategorie"><?php the_category(', ', '') ?></li>

 				<?php if (is_single() || is_page()) : ?>

 				<li  class="infocomments"><a href="#comments" title="zu den Kommentaren springen"><?php comments_number('kein Kommentar', '1 Kommentar', '% Kommentare', ''); ?></a></li>

 				<?php else : ?>

 				<li class="infocomments"><?php comments_popup_link('kein Kommentar', '1 Kommentar', '% Kommentare', '', 'Kommentare sind abgeschaltet.'); ?></li>

 				<?php endif; ?>

 				<?php edit_post_link('bearbeiten','<li class="infoedit">','</li>'); ?>

 			</ul>

 			<?php the_content(' weiterlesen ...'); ?>

 		</div>

 	<?php endwhile; ?>

 		<div class="pagination">

 			<p class="float_left"><?php next_posts_link("« ältere Beiträge") ?></p>

 			<p class="float_right"><?php previous_posts_link('neuere Beiträge »') ?></p>

 		</div>

 	<?php else : ?>

 		<h2>Nicht gefunden</h2>

 		<p>Sorry, aber du suchst gerade nach etwas, was hier nicht ist.</p>

 	<?php endif; ?>

 	</div>

 </div>

 <!-- end: #col1 -->

 <?php get_sidebar();?>

 <?php get_footer(); ?>

Zum Abschluss der Download inclusive Änderungen

Für Fragen, Anregungen, Wünsche etc. bitte einen Kommentar hinterlassen.