Stellen wir uns vor, wir sollen einer Firma eine Webseite mit WordPress bauen. Er möchte ein System, was ihn in die Lage versetzt, selbst Inhalte zu erstellen bzw. zu verändern. Weiterhin möchte er Neuigkeiten aus seiner Branche und besondere Angebote auf einer News-Seite gesondert darstellen und pflegen. Der Newsbereich ist also eigentlich der Blog. Die Seitenstruktur halten wir für dieses Beispiel einfach:

• Home
• News
• Leistungen
• Kontakt
• Impressum

Wie bekommen wir das nun hin? Die Punkte Leistungen, Kontakt und Impressum werden als statische Seiten realisiert. Also im Adminbereich auf Schreiben->Seite schreiben gehen und diese Seiten als Hauptseiten anlegen. Unter Reihenfolge kann man die Reihenfolge der Seiten in der Navigation festlegen.

Für die Topnavigation notieren wir im Quelltext:

<ul>
<?php wp_list_pages('depth=1&title_li=0&sort_colunm=menu_order'); ?>
</ul>

und sehen die Menüpunkte Leistungen, Kontakt und Impressum. depth=1 bedeutet, dass wir uns nur auf die Hauptseiten beschränken, title_li=0 bedeutet, dass eine Liste ohne Überschrift ausgegeben werden soll und sort_colunm=menu_order sortiert nach der Reihenfolge, wie sie beim Schreiben der Seiten eingestellt worden ist.

Jetzt fehlt eine Startseite. Wir schreiben eine neue Seite mit dem Seitentitel Home und lassen den Inhalt leer. Wenn wir die Startseite nun anklicken, sehen wir die Überschrift Home, eventuell noch Datum und Autor, je nachdem, wie unsere page.php aufgebaut ist. Das wollen wir natürlich nicht. Wir legen eine neue Datei in unserem Theme an und nennen sie startseite.php (der Name ist egal, nur keine Namen verwenden, die WordPress verwendet.). Ganz an den Anfang der Datei kommt folgender Code:

<?php
/*
Template Name:  Startseite
*/
?>

WordPress erkennt an diesem Code, das es sich um ein spezielles Template handelt und stellt es beim Schreiben einer Seite unter Seiten-Template zur Verfügung. Dieses Template können wir nach unseren Anforderungen gestalten. Wir können die letzten News listen, normalen statischen HTML-Code verwenden, irgendwelche WordPress-Funktionen, was immer wir wollen.
Jetzt müssen wir lediglich die Seite Home noch einmal in den Editor laden und als Seiten-Template Startseite auswählen und speichern.

Damit die Home auch wirklich die Startseite ist, müssen wir unter Einstellungen->Lesen die Seite Home als Startseite festlegen.

Jetzt haben wir eine schöne Startseite, aber der Blogbereich, den wir als News nutzen wollen, ist weg. Wie können wir den aufrufen? Ganz einfach. Wir legen eine neue Datei an, nennen sie news.php und kopieren folgenden Code hinein:

<?php
/*
Template Name:  News
*/
load_template( TEMPLATEPATH . '/index.php' );
?>

Dieses Template ist nichts weiter als eine Dummyseite, welche die index.php läd, nur das wir die Dummyseite “greifen” können.

Jetzt schreiben wir eine neue Seite, nennen sie in der Überschrift News, lassen den Inhalt leer und wählen bei Seiten-Template News und veröffentlichen die Seite. Danach gehen wir noch einmal in Einstellungen->Lesen und wählen bei Beitragsseite News aus.

Wir können jetzt noch in Einstellungen->Permalinks auf benutzerdefiniert klicken und ein /news vor /%year%/%monthnum%/%day%/%postname%/ setzten. Damit stehen die Newsbeiträge optisch unter der URL domain.de/news/ .

Damit haben wir alle Anforderungen erfüllt und unser Kunde kann nun seine Seiten mit Inhalten versehen. Er freut sich bestimmt wie ein Schneekönig, das er kein Geld für das Ändern von HTML Seiten ausgeben muß. Was der Gute jedoch noch nicht weiß… wir werden ihm alle 3 Monate eine Rechnung für ein WordPress-Update schreiben .

Noch ein Tipp. Man weiß ja manchmal nie, an was die Kunden überall so rumschrauben, löschen und umbenennen. Um herauszufinden, welcher Art die “Frontpage” oder die “Blogpage” ist, ohne händisch eine ID einzutragen, kann man folgendes verwenden:

• get_option(‘show_on_front’) zeigt an , ob die Frontpage vom Typ page oder post ist
• get_option(‘page_on_front’) liefert die ID der page, falls eine statische Seite die Frontpage ist.
• get_option(‘page_for_posts’) liefert die ID der page, die die Artikel ausgibt.

Im Code sieht das dann ungefähr so aus:

<?php
if('page' == get_option('show_on_front')){
	$listpageotions = '&exclude=' . get_option('page_on_front').'';
} elseif ('posts' == get_option('show_on_front')) {
	$listpageotions = '&exclude=' . get_option('page_for_posts').'';
} else {
	$listpageotions = '';
}
<ul>
<li>"><a href="<?php bloginfo('url')?>/">Startseite</a></li>
<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'.$listpageotions); ?>
</ul>
?>

Damit haben wir die Startseite, egal welche es ist, aus wp_list_pages ausgeschlossen, ohne eine ID zu kennen und können mit bloginfo(‘url’) die Startseite manuell notieren.

• Probleme erkennen
• wp_page_menu in WordPress 2.7
• Seitenpagination bei get_posts
• WordPress: private Seite in der Navigation
• Posts als Hilfsmittel für Pages

Von den zahlreichen neuen Widgets der Ext hat mir besonders das Grouping Grid gefallen. Damit lassen sich sehr übersichtliche Zusammenfassungen realisieren.

Ich habe mir für dieses Beispiel etwas mit Autos ausgedacht. Hier können wir nach Hersteller, nach Motorart und nach Baujahr gruppieren. Der fiktive Autohändler hat mit den Möglichkeiten des Grouping Grid eine super Übersicht über die Struktur seines Fahrzeugbestands.
Also bauen wir dem Autohändler sein ultimatives Tool.

Vorbereitungen

Wir benötigen einen lokalen Webserver (XAMPP oder ähnliches) und erstellen in dem Verzeichnis htdocs ein neues Verzeichnis grouping-grid. In dieses Verzeichnis entpacken wir das komplette Ext 2.0 Downloadpaket. Dann erzeugen wir ein HTML Grundgerüst und speichern es mit dem Namen grouping-grid.php ab. Da wir das Grid direkt in den Body rendern, bruachen wir kein zusätzliches Markup. Wir binden lediglich die benötigten Stylesheets und Scriptbibliotheken ein.

<?php
$url = "http://localhost/grouping-grid";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A Ext JS 2.0 Grouping Grid</title>
<link rel="stylesheet" type="text/css" href="<?php echo $url; ?>/ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="<?php echo $url; ?>/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<?php echo $url; ?>/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="grouping.js"></script>
<script type="text/javascript">
	Ext.BLANK_IMAGE_URL = '<?php echo $url; ?>/ext-2.0/resources/images/default/s.gif';
</script>
<style type="text/css">
	.icon-grid {
		background-image:url(<?php echo $url; ?>/ext-2.0/examples/shared/icons/fam/grid.png) !important;
    }
	.x-panel {margin:40px}
</style>
</head>

Ich habe extra eine PHP Seite gewählt, da ich das Beispiel anschließend online stellen möchte. Damit ich nicht jeden einzelnen Pfad editieren muß, habe ich in der ersten Zeile des Dokuments die Variable $url definiert, die ich später durch meine Blog-Url ersetzten werde. Ihr könnt genauso gut eine HTML Datei benutzen und die Pfade manuell notieren.
Wichtig ist nur die richtige Reihenfolge der Scripte. Die Datei grouping.js müssen wir noch anlegen.
Die Ext.BLANK_IMAGE_URL gehört normalerweise in die Ext.onReady Funktion, da ich das Pfad-Problem umgehen möchte, habe ich sie hier im Dokumentkopf notiert. Es ist der Pfad zu einer 1×1 Pixel transparenten GIF Datei. Diese wird in unserem Grid für die automatisch erzeugten Grid-Menue-Icons benötigt.
Abschließend habe ich noch ein Stylesheet mit den Klassen icon-grid und x-panel definiert. icon-grid läd ein kleines Hintergrundbild als Icon neben der Gridüberschrift. Unser Grid wird später in einem Div mit der Klasse x-panel erzeugt. Ich habe einen Abstand von 40px angegeben. Damit ist die Seite für unser Grid fertig.

Das Javascript

Wir erzeugen eine leere Datei und speichern sie als grouping.js ab. Dann fügen wir folgenden Code ein:

Ext.onReady(function(){
	alert("Ext geladen....");
});

Jetzt rufen wir im Browser die Datei grouping-grid.php auf und es sollte die Meldung “Ext geladen….” erscheinen. Falls nicht, bitte die Scriptpfade überprüfen.

Da ich online nicht extra eine Datenbank aufsetzten wollte, habe ich mich für ein Array mit Daten entschieden. Dieses Array kommt unter die Ext.onReady Funktion.

Ext.grid.kfzData = [
	[1,'Volvo','S60','2002','69300','13800,- €','Diesel'],
	[2,'BMW','323i','1999','74700','14780,- €','Benzin'],
	[3,'BMW','316','2003','13600','18330,- €','Benzin'],
	[4,'BMW','525i Touring','2005','2500','54050,- €','Benzin'],
	[5,'Mercedes-Benz','E 270 CDI','2002','4520','27900,- €','Diesel'],
	[6,'Renault','Laguna 2.0','1999','75000','4950,- €','Benzin'],
	[7,'Renault','Modus','2004','1030','9999,- €','Benzin'],
	[8,'Mercedes-Benz','C 220 CDI','2001','79100','19900,- €','Diesel'],
	[9,'Mercedes-Benz','SLK 200','2002','65000','24900,- €','Benzin'],
	[10,'Mercedes-Benz','ML 55','2001','105000','29900,- €','Benzin'],
	[11,'Ferrari','360 Modena','2005','15000','119900,- €','Benzin']
];

Wir haben in dem Array pro Datensatz die Felder id, hersteller, modell, baujahr, kilometer, preis und motor. Um diese Daten einlesen zu können, benötigen wir den Ext-ArrayReader.

Ext.onReady(function(){

	Ext.QuickTips.init();

	var xg = Ext.grid;

	var reader = new Ext.data.ArrayReader({}, [
		{name: 'id'},
		{name: 'hersteller'},
		{name: 'modell'},
		{name: 'baujahr'},
		{name: 'kilometer'},
		{name: 'preis'},
		{name: 'motor'}
	]);

});

Wir müssen dem ArrayReader die Felder exakt in der Reihenfolge zuweisen, wie sie im Array definiert sind, da ja kein Feld id oder hersteller existiert. Kommen wir nun zu dem Grid. Das Grid selbst ist eigentlich nichts weiter als eine Konfiguration von Parametern. Wir benötigen nicht eine einzige selbstgeschriebene Funktion, um das Beispiel auszuführen. Hier der Code:

var grid = new xg.GridPanel({
	store: new Ext.data.GroupingStore({
		reader: reader,
		data: xg.kfzData,
		sortInfo:{field: 'hersteller', direction: "ASC"},
		groupField:'hersteller'
	}),
	columns: [
		{id:'id',header: "Hersteller", width: 40, sortable: true, dataIndex: 'hersteller'},
	    {header: "Modell", width: 40, sortable: true, dataIndex: 'modell'},
		{header: "Motor", width: 20, sortable: true, dataIndex: 'motor'},
		{header: "Baujahr", width: 20, sortable: true, dataIndex: 'baujahr', align: 'right'},
		{header: "Kilometer", width: 20, sortable: true, dataIndex: 'kilometer', align: 'right'},
		{header: "Preis", width: 20, sortable: true, dataIndex: 'preis', align: 'right'}
	],
	view: new Ext.grid.GroupingView({
		forceFit:true,
		groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Fahrzeuge" : "Fahrzeug"]})'
	}),
	frame:true,
	width: 700,
	height: 450,
	collapsible: true,
	animCollapse: false,
	title: 'Mein Fahrzeugbestand',
	iconCls: 'icon-grid',
	renderTo: document.body
});

Einfach, oder? Wir haben den GroupingStore definiert, die Spalten unseres Grids, einen GroupingView sowie ein paar Einstellungen zum Grid. Alles andere handelt die Ext. Sämtliche Kofigurationsparameter findet ihr in der Ext API Dokumentation, welchhe dem Downloadpaket beliegt und wirklich sehr gut und ausführlich ist.

Wenn wir uns das Grid jetzt anschauen, sehen wir, das eine Menge Funktionalität drin steckt. Wir können das Grid auf- und zuklappen, die Spalten vergrößern/verkleinern. Wir können jede Spalte auf- und absteigend sortieren. Die Gruppen können auf- und eingeklappt werden. Ein Klick auf den rechten Pfeil im Spaltenkopf bringt ein Menü zum Vorschein. Dort können einzelne Spalten ein- btzw. ausgeblendet werden. Mit Show in Groups kann die Gruppierung aufgehoben bzw. erzeugt werden und mit Group this Field wird nach der gewählten Spalte gruppiert. Einfach genial.

Onlinedemo Ext 2.0 Grouping Grid

• Ext JS News 02
• Ein XML Grid mit der Ext Library
• 960 Gridder Bookmarklet
• Templates mit der Ext Library
• Jack Slocums Ext Ajax Library

In meinem Fall habe ich die Bilder in ein extra Verzeichnis hochgeladen, so spar ich mir den Uploaddialog, ein Eintrag in der Datenbank und habe ausserdem jederzeit die Möglichkeit, ein Bild zu verändern, ohne in WordPress erneut den Uploaddialog zu starten. Möchte man den WordPress eigenen Uploaddialog benutzen, muß man bei dem Wert natürlich den vollen Pfad zum Bild hineinkopieren, zB. http://url.de/blog/wp-content/uploads/2007/11/deinbild.jpg.

Jetzt brauchen wir noch eine Funktion, die eben dieses Bild liefert. Die schreiben wir am besten in die functions.php, damit sie zentral zur Verfügung steht.

Hier die Variante mit einem extra Verzeichnis:

function getPageIcon($pageID){
	$picpath = get_bloginfo('url').'/deinverzeichnis/';
	$pageID = intval($pageID);
	$defaultIcon = 'default.jpg';
	$pageIcon = get_post_custom_values('aufmacherbild',$pageID);

	if (!$pageIcon [0] || empty($pageIcon [0])){
		$pageIcon [0] = $defaultIcon;
	}
	$myIcon = clean_url($picpath.$pageIcon [0]);
	return $myIcon;
}

An diese Funktion wird die Seiten-ID ($pageID) übergeben. $picpath ist der Pfad zum Bildverzeichnis. Das defaultIcon habe ich für den Fall angelegt, das kein Bild vorhanden ist. Dann holen wir mit get_post_custom_values(‘aufmacherbild’,$pageID) den Wert des benutzerdefinierten Felds “aufmacherbild”. Sollte der Wert leer sein, wird das defaulticon verwendet. Anschließend wird der komplette Pfad von der Funktion zurückgegeben. Wenn du den WordPress internen Uploaddialog für Bilder benutzt, sieht der Code so aus:

function getPageIcon($pageID){
	$pageID = intval($pageID);
	$defaultIcon = 'default.jpg';
	$pageIcon = get_post_custom_values('aufmacherbild',$pageID);

	if (!$pageIcon [0] || empty($pageIcon [0])){
		$pageIcon [0] = $defaultIcon;
	}
	$myIcon = clean_url($pageIcon [0]);
	return $myIcon;
}

Jetzt muß die Funktion nur noch im Template innerhalb des Loops aufgerufen werden:

<?php $pageID = get_the_ID(); ?>
<img src="<?php echo getPageIcon($pageID); ?>" alt="Aufmacherbild der Seite"/>

Diese Vorgehensweise kann man ebenfalls für eine Kurzbeschreibung einer Seite verwenden, da WordPress Pages ja keine optionale Kurzfassung (excerpt) haben. Der Code ist ähnlich:

function getPageTeaser($pageID){
	$pageID = intval($pageID);
	$seitenteaser = get_post_custom_values('seitenbeschreibung', $pageID);

	$myTeaser = wp_specialchars($seitenteaser[0]);
	return $myTeaser;
}

So habe ich zB. meine WordPress Tutorial Übersicht realisiert. Dazu habe ich aber ein eigenes Template angelegt.

• Ferienwohnungs-Projekt mit WordPress
• Topartikel besser präsentieren
• Ein ♥ für Blogs
• Bilder freistellen
• Blogupdate vollzogen

Um vorhandene Tags in WordPress 2.3 zu nutzen, bietet WordPress den Import von Bunny’s Technorati Tags, Jerome’s Keywords, Simple Tagging Tags sowie Ultimate Tag Warrior Tags. Ich habe den Simple Tagging Import getestet und es war nach 3 Schritten erledigt. Auf jeden Fall vorher ein Backup der Datenbank machen.

Es gibt zwei neue Template Tags in WordPress 2.3, the_tags und wp_tag_cloud. Um die Tags zum jeweiligen Beitrag auszugeben, wird the_tags verwendet. wp_tag_cloud stellt eine Tagwolke dar. Schauen wir uns zuerst einmal the_tags genauer an.

the_tags

Die Anweisung im Template sieht so aus:

<?php the_tags(); ?>

Diese Defaultanweisung gibt die Tags kommagetrennt aus. Um die Ausgabe der Tags ein bischen zu individualisieren, stehen drei Parameter zur Verfügung:

<?php the_tags('before', 'separator', 'after'); ?>

• before – Text, der vor den Tags dargestellt wird. Defaultwert Tags:
• separator – Trenner, der zwischen den Tags dargestellt wird. Defaultwert Komma
• after – Text, der nach den Tags dargestellt wird. Kein Defaultwert

Um die Tags unterhalb des Beitrags darzustellen, fügt man in der index.php und/oder der single.php den Template Tag einfach an der entsprechende Stelle ein:

...
<?php the_content(' weiterlesen ...'); ?>
<p><?php the_tags(); ?></p>
...

das Ergebnis sieht dann so aus:

Tags: blog, hören, kaufen, lernen, lesen, reisen, sehen, testen, video, wordpress

<p><?php the_tags('Meine Tags: ', ' &bull; ', '<br />'); ?></p>

ergibt

Meine Tags: blog • css • html • php • video • wordpress

Möchte man die Tags in einer Liste anzeigen, muss als Separator ein schliessendes und ein öffnendes Listenelement verwendet werden, da sonst alle Tags in einem Listenelement stehen:

<ul><?php the_tags('<li>', '</li><li>', '</li>'); ?></ul>

Kommen wir nun zur Tagwolke.

wp_tag_cloud

Es gibt viele Möglichkeiten, eine Tagwolke im Theme zu platzieren. Manche mögen es in der Fussleiste oder in der Sidebar (für die Sidebar ist in WordPress 2.3 ein Tag Cloud Widget verfügbar). Auch eine eigene Seite mit der Tagwolke ist möglich. Um eine Tagwolke zu erzeugen, schreiben wir

<p><?php wp_tag_cloud(); ?></p>

an entsprechender Stelle in unser Template.

Es stehen 9 Parameter zur Verfügung:

• smallest – die kleinste Schriftgrösse. Defaultwert 8pt
• largest – die grösste Schriftgrösse. Defaultwert 22pt
• unit – Maßeinheit der Schriftgrösse. Defaultwert pt
• number – Anzahl der anzuzeigenden Tags. Defaultwert 45
• format – Format der Tagwolke. Es gibt 3 Varianten. Defaultwert flat
  • flat – Tags werden mit Leerzeichen getrennt hintereinander angezeigt
  • list – Tags in einer ungeordneten Liste mit der Klasse “wp_tag_cloud”.
  • array – Ausgabe der Tags in einem Array
• orderby – Sortierung der Tags. Defaultwert name
  • name – Sortierung nach dem Namen der Tags
  • count – Sortierung nach der Anzahl der Artikel
• order – Sortierung der Tags. Defaultwert ASC
  • ASC – Sortierung aufsteigend
  • DESC – Sortierung absteigend
• exclude – auszuschliessende Tags. Mehrere kommagetrennt angeben. Kein Defaultwert
• include – einzuschliessende Tags. Mehrere kommagetrennt angeben. Kein Defaultwert

Mehrere Parameter müssen mit einem & voneinander getrennt angegeben werden. Ein Beispiel:

<?php wp_tag_cloud('smallest=8&largest=22&unit=pt&number=30&format=flat&orderby=name&order=asc'); ?>

Das Ergebnis ist eine Tagwolke sortiert nach dem Tagnamen aufsteigend, angezeigte Anzahl der Tags sind 30. Die kleinste Schriftgrösse ist 8pt und die grösste 22pt. Die Tags werden mit Leezeichen getrennt hintereinander ausgegeben.

Wer bisher das Simple Tagging Plugin verwendet hat, wird an dieser Stelle sehr schnell erkennen, das die WordPress Entwickler eine Menge Unfug getrieben haben.

Das Dilemma

Schauen wir uns einmal der erzeugten Quelltest der Tag Cloud an. Ich beschränke mich auf eine Zeile:

<a href='http://localhost/wordpress-23/wordpress/tag/reisen/' class='tag-link-13' title='2 topics' rel="tag" style='font-size: 12.6666666667pt;'>reisen</a>

Das Tag “reisen” erhält automatisch die Klasse “tag-link-13″. Was kann ich mit dieser Klasse im Stylesheet anfangen? Im Grunde genommen garnichts. Die 13 ist die ID von dem Tag “reisen”. Um die Tags unterschiedlich zu stylen, müsste man dazu immer die ID’s der Tags wissen. Macht überhaupt keinen Sinn.

Die Krönung des Ganzen ist jedoch der Inline Style mit der Schriftgrösse. Diese wird von WordPress automatisch kalkuliert. Man kann zwar auch als Maßeinheit % oder em statt pt angeben, das Ergebnis ist jedoch nicht vorhersehbar. Auch gibt es bei der Verwendung von wp_tag_cloud keine Möglichkeit, die Schriftfarbe der Relevanz der Tags anzupassen. Warum wurden nicht einfach Klassen erzeugt, die die Relevanz eines Tags wiedergeben, so wie ich es von Simple Tagging gewohnt bin?

Fazit

Halbherzige Integration der Tags in WordPress 2.3, nicht annähernd die Funktionalität, die man von den Plugins gewohnt ist. Es fehlen grundlegende Sachen wie die Verwaltung von Tags. Die Integration der Tagwolke ist denkbar schlecht gelöst.

Alle, die mit Erscheinen von WordPress 2.3 updaten wollen, haben hoffentlich mit diesem Beitrag eine kleine Hilfe erhalten, die Tags in das eigene Template zu integrieren.

• WordPress 2.3 alpha
• Related Posts im Feed
• Mein Blog mit YAML 3.1
• Tag Import für WordPress 2.3 Alpha
• WordPress The Loop und Template Tags

Bei diesen Seiten handelt es sich um die Beschreibung von Baudenkmalen. Da es sehr viele Seiten werden (so locker über 100), überlegte ich mir gleich zu Beginn, diese Objekte etwas zu strukturieren, obwohl ich noch nicht wußte, wie ich diese Struktur verwenden würde. Ich habe also jedem Objekt 4 benutzerdefinierte Felder hinzugefügt:

• Objekt
• Epoche
• Baujahr
• Lage

Da man ja die Schlüssel der benutzerdefinierten Felder nur einmal anlegen braucht, kann man sie bei jeder neuen Seite einfach aus der Combobox auswählen und muß nur den Wert eintragen.

Diese Metainformationen schreibe ich in dem Pagetemplate in eine Art Teaser zusammen mit der Seitenüberschrift, dem Autor und der Erstellungs- bzw. Aktualisierungszeit. Damit hat der Leser gleich alle wichtigen Daten schön übersichtlich angeordnet.

Die übergeodnete Seite dieser Baudenkmale listet alle Objekte auf. das ist sehr einfach zu realisieren:

<ul>
	<?php wp_list_pages('child_of=7&depth=1&title_li=0&sort_column=post_name'); ?>
</ul>

Jetzt wollte ich die Objekte auch nach Epoche sortieren, um dem Leser mehr Auswahlmöglichkeiten zu geben. Es sollte die Epoche als Überschrift erscheinen und die zugehörigen Links zu den Objekten darunter. Also zuerst mal ein Query, um die verschiedenen Epochen auszulesen und mit wp_list_pages() ausgeben:

<?php
$epochen = $wpdb->get_results("SELECT DISTINCT meta_value
	FROM $wpdb->postmeta
	WHERE meta_key ='Epoche'
	ORDER BY meta_value ASC");
foreach ($epochen as $epoche) { ?>
	<h4><?php echo $epoche->meta_value; ?></h4>
	<ul>
		<?php wp_list_pages('child_of=7&depth=1&title_li=0&meta_key=Epoche&meta_value='.$epoche->meta_value.'&sort_column=post_name'); ?>
	</ul>
<?php } ?>

Wie man sieht, hat man mit den benutzerdefinierten Feldern Möglichkeiten ohne Ende, Inhalte aufzubereiten. Wer weiß, was mir noch so alles einfällt …

Sollte jemand meiner werten Leser ebenfalls Erfahrungen mit den benutzerdefinierten Feldern gemacht haben, würde ich mich über ein Kommentar freuen.

• WordPress Pages nach meta_value sortieren
• Neu in WordPress 3.0: Custom Background
• WordPress Custom Fields nutzen
• WordPress Neue XSS Sicherheitslücke in manchen Themes
• Top Artikel in WordPress hervorheben

Schauen wir uns einmal wp_list_pages im default_de Theme an:

Ihr findet wp_list_pages(‘arguments’) in der sidebar.php so ziemlich in der Mitte.

<?php wp_list_pages('title_li=<h2>Seiten</h2>'); ?>

Das Resultat ist eine Liste aller angelegten Seiten (Pages) unterhalb der Überschrift “Seiten”. Manchem wird das reichen, da ein Blog meistens nur sehr wenige Pages hat. Möchte man aber zum Beispiel eine horizontale Menüleiste haben, muß man den Template Tag schon etwas anpassen.

<div id="topnavigation">
 <ul>
 	<?php wp_list_pages('title_li=&sort_column=menu_order'); ?>
 </ul>
</div>

Wir haben das Argument title_li leer gelassen, was uns die Pages in <li> Tags schreibt, sort_column=menu_order sortiert uns die Seiten in der Reihenfolge, wie wir sie beim Seite schreiben unter Reihenfolge definiert haben.
 Die Sortierung ist möglich nach:

• post_title – Seitentitel
• menu_order – Reihenfolge der Seiten
• post_date – Erstellugsdatum der Seiten
• menu_modified – Aktualisierungsdatum der Seiten
• ID – nach der Seiten ID
• post_author – nach Reihenfolge der Autoren ID’s
• post_name – nach Titelform der Seiten

Diese Liste können wir mit CSS zu einem schicken Menü verwandeln, was aber hier nicht Bestandteil ist.

WordPress fügt automatisch alle von uns angelegten Seiten in das Menü ein. Was, wenn wir aber eine Seite als Unterseite einer Seite anlegen? Houston, we have a problem! Das schöne Menü wird zerissen, weil WordPress logischerweise die Liste so verschachtelt, wie wir die Seitenhierarchie erstellt haben.
 Je nachdem, welche Anforderungen wir für unser Menü haben, können wir per Argument die Tiefe der darzustellenden Seiten beeinflussen:

<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>

Das Argument depth=1 teilt WordPress mit, das nur Seiten der obersten Hierarchiestufe angezeigt werden sollen. Der Wert kann je nach Tiefe der Seitenstruktur erhöht werden. depth=-1 Zeigt alle erstellten Seiten in einer Liste ohne die Hierarchie zu berücksichtigen.

Wollen wir bestimmte Seiten von der Navigation ausschließen, verwenden wir

<?php wp_list_pages('depth=1&exclude=4&title_li=0&sort_column=menu_order'); ?>

wobei mit dem Argument exclude die ID der jeweiligen Seite angegeben werden muß. In diesem Beispiel ist es die Seite mit der ID 4, welche von der Navigation ausgeschlossen wird. Es können auch mehrere ID’s kommagetrennt angegeben werden. Ebenfalls ist es möglich, nur bestimmte Seiten einzuschließen, was man verwendet, ist Geschmackssache:

<?php wp_list_pages('depth=1&include=1,2,4&title_li=0&sort_column=menu_order'); ?>

Ok, noch sind wir nicht am Ende. Mal angenommen, ihr habt euer Hauptmenü mit Home, Blog und Kontakt. Die Seite Kontakt hat die Unterseiten Impressum und Datenschutzerlärung. Ihr wollt aber die Seiten Impressum und Datenschutzerklärung nicht in der Navigationsleiste haben, sondern in der Sidebar und auch nur dann, wenn man auf Kontakt geklickt hat. Hier der Code:

<div id="topnavigation">
 <ul>
 	<?php wp_list_pages('depth=1&title_li=&sort_column=menu_order'); ?>
 </ul>
</div>  

// in der sidebar.php
<?php if (is_page('kontakt')) { ?>
 <ul>
 	<?php wp_list_pages('child_of=4&depth=1&title_li=&sort_column=post_name');?>
 </ul>
<?php } ?>

In der Topnavigation wie gehabt nur die obersten Seiten. In der sidebar.php nutzen wir zuerst das conditional Tag is_page(‘konatkt’), wo wir prüfen, ob es auch wirklich sie Seite Kontakt ist. Ihr müßt aber in den Klammern die Titelform (post_slug) eintragen, nicht die Überschrift der Seite. Wenn also die aufgerufene Seite die Kontaktseite ist, geben wir deren Unterseiten aus. Das geschieht mit child_of=4, wobei die Kontaktseite hier die ID 4 hat.
 depth kann in diesem Beispiel weggelassen werden, da es keine Unterseiten von Impressum und Dateschutz gibt. Sollte jedoch so ein Fall eintreten, müßt ihr bei depth aufpassen. Da wir durch child_of schon eine Ebene tiefer in der Seitenhierarchie sind, bezieht sich die 1 auf die aktuelle Ebene und 2 wären dann die Unterseiten von Impressum und Datenschutz. Verstanden?

Ein weitere Möglichkeit, die Auflistung von Seiten zu beinflussen, wären meta_key(‘argument’) und meta_value(‘argument’). Über die Verwendung dieser benutzerdefinierten Felder (custom fields) habe ich ein Tutorial geschrieben.

Eins ist bei der Navigation von Seiten und Unterseiten noch wichtig: WordPress erzeugt die li Tags mit entsprechenden CSS Klassennamen, welche für das Aussehen der Navigation und die Kennzeichnung der aktuellen Seite nötig sind.

Standardklasse einer nicht angeklickten Seite
<li class="page_item">  

Klasse der aktuell angeklickten Seite
<li class="page_item current_page_item">  

Klasse der aktuellen Oberseite wenn eine
Unterseite angeklickt wird
<li class="page_item current_page_parent">

Diese können dann wie gewohnt im Stylesheet ausgezeichnet werden.

Sollte ich etwas vergessen haben, oder Fragen auftauchen, bitte das Kontaktformular strapazieren .

• Flexi Pages Widget für WordPress
• wp_page_menu in WordPress 2.7
• YAML Coffee Theme neue Version
• WordPress MU sprachabhängige Templates einbinden
• Eine Seitennavigation für die Sidebar

Nach ein paar Überlegungen bin ich auf die benutzendefinierten Felder (Custom Fields) gekommen, welche ich in Verbindung mit ein bischen CSS benutze. Los gehts.

Was sind Custom Fields?

Wenn Ihr einen Beitrag schreibt, seht ihr unter Trackbacks eine Leiste “Benutzerdefinierte Felder”, welche ihr aufklappen könnt. Dort seht ihr Schlüssel und Wert.
Custom Fields sind also nichts weiter als ein Schlüssel/Wert Paar (key/value). Diese werden in der Datenbanktabelle wp_postmeta gespeichert.
Um diese Daten in eurem Blog darzustellen, gibt es den Template Tag the_meta(), der innerhalb des Loops verwendet werden kann.

Tragt bei einem Beitrag einfach mal als Schlüssel “Hallo” und als Wert “Welt” ein und drückt benutzerdefiniertes Feld hinzufügen. Wenn ihr das beim Bearbeiten eines Beitrages macht, braucht ihr den Beitrag nicht extra noch einmal speichern, der Wert wird bei hinzufügen schon in die Datenbank geschrieben.
Um nun unser tolles Schlüssel/Wert Paar unter dem Beitrag zu sehen, schreibt in die single.php unter the_content()

<?php the_meta(); ?>

Ihr seht nun eine Liste mit Hello und World. Klasse, oder? Nun zu meinem speziellen Kategorie Template.

Kategorie Template

Da ich dieses Template nur für meine Kategorie Tutorials haben möchte, schaue ich nach der ID der Kategorie “Tutorials” (Verwalten->Kategorien), welche bei mir die ID 5 hat.
Die Datei nenne ich category-5.php, da WordPress diese Datei zuerst aufzurufen versucht, wenn nicht vorhanden nach category.php schaut, wenn die auch nicht da ist, nach archive.php und wenn die ebenfalls fehlt, die index.php aufruft.
Das ist die Template Hierarchie in WordPress.

Da ich alle Tutorials untereinander haben möchte und nicht die in WordPress voreingestellten 5 oder 10 Beiträge, muß ich diese Einstellung mit einem custom query überschreiben:

<?php get_header(); ?>

<div class="Euer_div">

<?php

 query_posts('cat=5&showposts=-1');

 $catergorytitle = get_catname(5);

?>

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

 <h2>Alle Beiträge der Kategorie <?php echo $catergorytitle; ?></h2>

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

 <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link zu diesem Artikel"><?php the_time('d.m.Y'); ?> - <?php the_title(); ?></a></h3>

 <?php the_excerpt(); ?>

<?php endwhile; ?>

<?php else : ?>

// Suchtemplate oder was auch immer

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Ihr müßt naturlich schauen, welche HTML Elemente in eurem Template verwendet werden.

Wenn wir jetzt diese Seite aufrufen, indem wir im Blog auf Kategorie Tutorials klicken, sehen wir alle Tutorials mit Überschrift und den ersten 55 Wörtern. Jetzt kommen die custom fields ins Spiel.

Ich habe momentan Turorials über die Ext Library und über WordPress geschrieben. Also bearbeite ich alle meine Beiträge der Kategorie Tutorials und füge allen als Schlüssel “tutorial” hinzu, bei den Ext Beiträgen als Wert ext und bei denen von WordPress als Wert wordpress.
Mit diesen Informationen erstelle ich einfach ein DIV um jedes Tutorial und weise dem DIV einfach als Klasse den entprechenden Wert zu. Verstanden?

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

<?php $metadata = get_post_custom_values('tutorial'); ?>

 <div class="artikel <?php echo $metadata[0]; ?>">

 	<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link zu diesem Artikel"><?php the_time('d.m.Y'); ?> - <?php the_title(); ?></a></h3>

 	<?php the_excerpt(); ?>

 </div>

<?php endwhile; ?>

Mit get_post_custom_value(‘tutorial’) holen wir uns den Wert, welcher als Array zurückgeliefert wird. Diesen Wert setzten wir bei dem DIV als zweite Klasse ein. Nun müssen wir noch ein paar Kleinigkeiten erledigen.

Der CSS Teil

Ich habe mir das Ext- und das WordPress Logo als 40×40 Pixel JPG abgespeichert. Diese Logos nutzen wir jetzt in unserem Stylesheet.

// die erste Klasse artikel

.artikel{

 margin:20px 0;

}

.artikel h3{

 margin:10px 0 0 60px;

 font-size:1.2em;

}

.artikel p{

 margin:5px 0 0 60px;

}

// die zweite Klasse mit dem Werten aus dem custom Field

.ext{

 background:url(../euerPfadzu/extlogo.jpg) top left no-repeat;

}

.wordpress{

 background:url(../euerPfadzu/wordpresslogo.jpg) top left no-repeat;

}

Die Überschrift und der Text haben einen linken Abstand von 60 Pixel zu dem Logo. Wenn ihr mal vergeßt, bei einem Tutorial die benutzerdefinierten Felder einzutragen, passiert nichts, die zweite Klasse ist dann leer, es erscheint kein Logo, aber der Abstand zum Rand bleibt erhalten.

Das war nur eine Möglichkeit, die custom fields zu nutzen. Wem etwas anderes damit einfällt, der kann gerne einen Kommentar hinterlassen.

• WordPress Custom Fields in Action
• Neu in WordPress 3.0: Custom Background
• WordPress Pages nach meta_value sortieren
• Top Artikel in WordPress hervorheben
• User Contact Info in WordPress 2.9 erweitern

In meinem Tutorial Ext Tree Basics haben wir die Grundlagen der Programmierung eines Ext Trees gelernt. Wenn du dieses Tutorial noch nicht gelesen hast, hole es schnell nach, da das heutige Tutorial darauf aufbaut und den selben Code verwenden wird.

Voraussetzungen: Grundkenntnisse in HTML, CSS und Javascript.

Dieses Tutorial basiert auf der Version Ext-1.0, die aktuelle Version kann hier heruntergeladen werden.

Vorbereitung

Am besten ihr kopiert das basic-tree.js und die basic-tree.html und speichert beide Dateien unter anderem Namen ab.

Ein paar Änderungen müssen wir trotzdem durchführen. Wir löschen aus der Javascript Datei die Zeile myTree.on(‘click’, alertID); und ebenfalls die komplette Funktion function alertID(node).
In der HTML Datei müssen wir auch ein paar kleine Änderungen durchführen. Wir brauchen ein zweites Div für den Drop Tree:

<div id="wrapper">
	<div id="tree-div"></div>
	<div id="drop-div"></div>
</div>

// zum style hinzufügen
#tree-div{float:left;width: 300px; height: 300px;border:2px solid #B2D0F7;overflow:auto;}
#drop-div{float:right;width: 300px; height: 300px;border:2px solid #B2D0F7;overflow:auto;}
#wrapper{width:650px;}

Asserdem wollen wir in diesem Beispiel nicht, daß komplette Gruppen verschoben werden, sondern nur einzelne Musiker. Dazu fügen wir bei Pink Floyd und den Rolling Stones hinter der id allowDrag:false, ein.
Ihr seht, wie einfach es ist, solche grundlegenden Sachen per config festzulegen.

Der Drop Tree

Wir haben in der HTML den Container drop-div angelegt, in den wir den Drop Tree, also das Ziel, hineinpacken.
In der Javascript Datei fügen wir unter den Zeilen von myTree den Drop Tree ein:

var dropTree = new Tree.TreePanel('drop-div', {
	animate:true,
	enableDD:true,
	containerScroll: true,
	lines:false,
	rootVisible:true
});

var dropRoot = new Tree.TreeNode({
	allowDrag:false,
	allowDrop:true,
	id:'dRoot',
	text:'Meine liebsten Musiker'
});

dropTree.setRootNode(dropRoot);
dropTree.render();
dropRoot.expand(false, false);

Der Drop Tree sieht fast genau so aus wie der myTree, nur mit dem Unterschied, daß wir dem TreePanel mit enableDD Drag&Drop einschalten und der dropRoot mit allowDrop:true das Ablegen von Treenodes erlauben. Das war schon alles. Den Rest macht die Ext Library.
Wenn ihr nun die HTML Datei ausführt, könnt ihr Shakira oder die anderen Musiker in den Drop Tree ziehen.

Ein Tree Node kopieren

Es kann je nach Anwendung der Fall sein, daß ihr beim Einfügen in den Drop Tree keine Verschiebung des Tree Nodes haben möchtet, sondern eine Kopie. Um das zu realisieren, brauchen wir nichts weiter als eine Funktion schreiben, die das gewünschte Node mit samt seinen Attributen kopiert.
Damit die Funktion auch klappt, muß es natürlich passieren, bevor das Node losgelassen wird. Dafür gibt es das beforenodedrop Event.

dropTree.on('beforenodedrop', function(e){
	var n = e.dropNode;
	var copy = new Tree.TreeNode(Ext.apply({}, n.attributes));
	e.dropNode = copy;
	return true;
});

Jetzt könnt ihr einzelne Musiker in den anderen Tree ziehen und habt eine Kopie. Auch die Attribute, wie der QuickTip, wurden übergeben. Bei Davis Gilmour könnt ihr es sehen, es wird ebenfalls wieder Gitarre,Gesang angezeigt.

Hier der komplette Javascript Code aus diesem Tutorial:

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "yourPathTo/ext-1.0/resources/images/default/s.gif";
	Ext.QuickTips.init();
	var Tree = Ext.tree;

	var myTree = new Tree.TreePanel('tree-div', {
		loader: new Tree.TreeLoader(),
		containerScroll: true,
		animate:true,
		enableDrag:true,
		rootVisible:true
	});

	var Rroot = new Tree.AsyncTreeNode({
		text: 'Rockstars',
		id:'rockstars',
		draggable:false,
		children: [
			{text: 'Pink Floyd', id:'rock-1', allowDrag:false ,children: [
				{text: 'David Gilmour', id:'floyd-1', qtip:'Gitarre, Gesang', leaf:true, allowDelete:true},
				{text: 'Nick Mason', id:'floyd-2', qtip:'Schlagzeug', leaf:true, allowDelete:true},
				{text: 'Richard Wright', id:'floyd-2', qtip:'Keyboards', leaf:true, allowDelete:true}
			]},
			{text: 'Rolling Stones', id:'rock-2',allowDrag:false, children: [
				{text: 'Mick Jagger', id:'stones-1', leaf:true, allowDelete:true},
				{text: 'Keith Richard', id:'stones-2', leaf:true, allowDelete:true},
				{text: 'Ron Wood', id:'stones-3', leaf:true, allowDelete:true},
				{text: 'Charlie Watts', id:'stones-4', leaf:true, allowDelete:true}
			]},
			{text: 'Shakira', id:'shakira', leaf:true, allowDelete:true},
			{text: 'Madonna', id:'madonna', leaf:true, allowDelete:true}
		]
	});
	myTree.setRootNode(Rroot);
	myTree.render();
	myTree.expandAll();
	myTree.on('contextmenu', prepareMenu);

	var dropTree = new Tree.TreePanel('drop-div', {
        animate:true,
        enableDD:true,
        containerScroll: true,
        lines:false,
        rootVisible:true
    });

    var dropRoot = new Tree.TreeNode({
        allowDrag:false,
        allowDrop:true,
        id:'dRoot',
        text:'Meine liebsten Musiker'
    });

    dropTree.setRootNode(dropRoot);
    dropTree.render();
    dropRoot.expand(false, false);

	dropTree.on('beforenodedrop', function(e){
		var n = e.dropNode;
		var copy = new Tree.TreeNode(Ext.apply({}, n.attributes));
		e.dropNode = copy;
		return true;
	});

	var sm = myTree.getSelectionModel();

	var Menu = new Ext.menu.Menu({
        id:'menu',
        items: [{
                id:'expand',
                handler:expandAll,
                cls:'expand',
                text:'ausklappen/expand'
            },{
                id:'collapse',
                handler:collapseAll,
                cls:'collapse',
                text:'einklappen/collapse'
            },'-',{
                id:'remove',
                handler:removeNode,
                cls:'remove',
                text: 'löschen/delete'
        }]
    });
	function prepareMenu(node, e){
        node.select();
        Menu.items.get('remove')[node.attributes.allowDelete ? 'enable' : 'disable']();
        Menu.showAt(e.getXY());
    }
	function collapseAll(){
        Menu.hide();
        setTimeout(function(){
            Rroot.eachChild(function(n){
               n.collapse(false, false);
            });
        }, 10);
    }
    function expandAll(){
        Menu.hide();
        setTimeout(function(){
            Rroot.eachChild(function(n){
               n.expand(false, false);
            });
        }, 10);
    }
	function removeNode(){
        var n = sm.getSelectedNode();
        if(n && n.attributes.allowDelete){
            myTree.getSelectionModel().selectPrevious();
            n.parentNode.removeChild(n);
        }
    }
});

Den fertigen Tree könnt ihr euch hier anschauen.

• Ext JS News 01
• Ext Tree Basics
• Update Blogarchive
• Ext 2.0 beta 1 und YAML
• Blogarchive mit der Ext Ajax Library

Der einfache Loop

WordPress benutzt den Loop, um Blogposts darzustellen und entsprechend der eingesetzten Tags zu formatieren. Und so sieht The Loop aus:

<?php
if (have_posts()) :
	while (have_posts()) : the_post();
	//irgendwelcher code
	endwhile;
else :
//code falls keine post da ist
endif;
?>

Auf deutsch heißt das etwa: Wenn wir Beiträge haben, zeige die Beiträge, wenn keine Beiträge da sind, mach das, was hinter else: steht.

Template Tags

Um dem Nutzer Möglichkeiten zu geben, in seinem Template Beiträge und Seiten individuell darzustellen, wurden von WordPress sogenannte “Template Tags” eingeführt, die innerhalb von The Loop verwendet werden. Template Tags sind nichts weiter als Worpress Funktionen, die bestimmte Informationen ausgeben. Eine vollständige Liste aller Template Tags findet ihr auf
http://codex.wordpress.org/Template_Tags. Um nun auf der Blogstartseite Beiträge darzustellen, müssen wir den Loop um Template Tags und eigenen HTML Code erweitern.

Der Beitragstitel

Für die Beitragsüberschrift verwenden wir gleich zwei Template Tags: the_permalink() und the_title().

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

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

Der Beitragstitel wird nun in einer Überschrift 2. Grades angezeigt, the_permalink() schreibt den Link zu dem Beitrag und the_title() gibt den Titel aus.

Beitragsinformationen

Wir möchten natürlich Informationen ausgeben, von wem und wann der Beitrag geschrieben wurde. Dafür stehen uns eine Menge Template Tags zur Verfügung. Ich verwende hier mal eine ungeordnete Liste, um die Infos auszugeben. Den Code unter die Überschrift einfügen.

<ul>
	<li><?php the_time('d. F Y'); ?></li>
	<li> <?php the_author() ?></li>
	<li> <?php the_category(', ')?></li>
	<li> <?php comments_popup_link('0 Kommentare', '1 Kommentar', '% Kommentare'); ?></li>
	<?php edit_post_link('bearbeiten','<li>','</li>'); ?>
</ul>

Was bedeutet das nun im Einzelnen? the_time(‘d. F Y’) gibt uns das Datum (und auch die Uhrzeit wenn man will) des Beitrags aus. Wie ihr seht, hat man die Möglichkeit, mit Parametern innerhalb der Klammern sich die Template Tags anzupassen. In diesem Fall gibt the_time(‘d. F Y’) das Datum als 14. Mai 2007 aus. Mehr Informationen zum Datums- und Zeitformat findet ihr hier.
the_author() gibt Namen des Autors aus, the_category(‘, ‘) listet die Kategorie(n), in die der Beitrag eigeordnet wurde. Der Parameter in den Klammern steht für den Trenner bei mehreren Kategorien. comments_popup_link() fügt einen Link mit der Anzahl der Kommentare ein, bei dem beim Klicken die comments-popup.php (oder wenn die nicht da ist, die single.php) aufruft und direkt zur Überschrift “Ein Kommentar schreiben” springt (<h3 id="respond">). Der edit_post_link(‘bearbeiten’,'<li>’,'</li>’)
fügt ein link “bearbeiten” ein, wenn man selber angemeldet ist. Hier sind die Parameter Text, der ausgegeben werden soll, öffendes Tag und schießendes Tag.

Der Beitrag

Um den Beitrag auszugeben, haben wir zwei Möglichkeiten. Wir können

<?php the_content('Den ganzen Beitrag lesen ...'); ?>

benutzen. Das gibt uns den Inhalt aus. Wenn der <!–more–> Quicktag benutzt wurde, wird der Inhalt bis zum <!–more–> ausgegeben und ein Link mit dem angegebenen Text zur Einzelansicht des Beitrags eingefügt. Wir können aber auch

<?php the_excerpt(); ?>

verwenden. the_excerpt() gibt die ersten 55 Wörter des Beitrags aus. Parameter gibt es dafür keine.

Zum Abschluß noch die beiden Template Tags zur Seitennaviation und der Code, der ausgeführt wird, falls kein Beitrag gefunden wurde:

...
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Vorherige Eintr&auml;ge') ?></div>
<div class="alignright"><?php previous_posts_link('N&auml;chste Eintr&auml;ge &raquo;') ?></div>
</div>

<?php else : ?>
		<h2 class="center">Nicht gefunden</h2>
		<p class="center">Sorry, aber du suchst gerade nach etwas, was hier nicht ist.</p>
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>
...

Nun sollte jeder die Funktionsweise von The Loop und den Template Tags verstanden haben. Natürlich kann man sich den Loop auch seinen eigenen Bedürfnissen anpassen. Um das zu erreichen, verwendet man die sogenannten Conditional Tags. Aber um das zu erklären, müßte ich erstmal in meinen Semmelstatz Suchergebnisse zu Conditional Tags finden .

• 3 Teil des WordPress Theme Tutorials
• WordPress Snippets für Aptana Studio
• WordPress Archiv Template erstellen
• Bestimmte Kategorien ausschließen in WordPress
• Ein zweiter Loop in WordPress

Hinzu kommt, das es mir persönlich nicht gefällt, in Blogs mit großen Archiven immer 10 komplette Artikel anzeigt zu bekommen, um dann zu den nächsten 10 weiterzublättern. Das ist unübersichtlich und es gehen dem Leser mit Sicherheit interessante Beiträge verloren, weil er entnervt aufgibt.

Also hab ich mich mal aufgemacht und habe mir ein Template für die Kategorien und das Monatsarchiv gebaut. Inspiriert wurde ich durch Robert Hartl’s Jahresarchiv.

Vorüberlegungen

Das Template soll für die Kategorien und für das Archiv (Monats- oder Jahresarchiv) zugleich sein und soll nur eine Liste der jeweils vorhandenen Artikel mit Datum und Permalink darstellen. Es soll in der Überschrift zu sehen sein, was der Leser gerade für ein Archiv/Kategorie anschaut. Ausserdem müssen wir den Loop überlisten, da er nur soviel Beiträge darstellt, wie im Admin Modul unter Lesen eingestellt ist.

Das Template

WordPress schaut bei Kategorien immer zuerst, ob eine category.php da ist, wenn nicht, nach archive.php und wenn die nicht da ist, nach index.php. Beim Archiv genauso, zuerst nach archive.php, dann nach index.php. Also legen wir eine archive.php in unserem Template Verzeichnis an.
Wir fügen den Header, den Loop sowie Sidebar und Footer ein:

 

<?php get_header(); ?>
//the Loop
<?php if (have_posts())  >
<div class="beitrag">
	<ul class="archivelist">
<?php while (have_posts()) : the_post(); ?>
		<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanenter Link zu diesem Artikel"><?php the_time('d.m.Y'); ?> - <?php the_title(); ?></a></li>
<?php endwhile; ?>
	</ul>
</div> 

<?php endwhile; ?> 

<?php else : ?>
// Tu hier was du willst, zB. Fehlermeldung, wenn nichts da ist.
<?php endif; ?>
//End the Loop
<?php  get_sidebar(); ?>
<?php get_footer(); ?>

Nun haben wir unser Grundgerüst. Ihr müßt natürlich eure HTML Elemente anpassen. Jetzt müssen wir unterscheiden, ob wir von einer Kategorie- oder Archiveseite kommen und ob das Archiv monatlich oder jährlich dargestellt ist. Weiterhin wollen wir alle Posts anzeigen lassen und wir brauchen unsere Überschriften.
Wir fügen über dem Loop folgenden Code ein:

 

if (is_category()){
	$category = get_query_var('cat');
	query_posts('cat='.$category.'&showposts=-1');
	$catergorytitle = get_catname($category);
	$headline="<h2>Alle Beiträge der Kategorie ".$catergorytitle."</h2>n";
}
if (is_month()){
	$month = get_query_var('monthnum');
	$year = get_query_var('year');
	query_posts('year='.$year.'&monthnum='.$month.'&showposts=-1');
	$localmonth = $wp_locale->get_month($month);
	$headline="<h2>Archiv ".$localmonth." ".$year."</h2>n";
}
if (is_year()){
	$year = get_query_var('year');
	query_posts('year='.$year.'&showposts=-1');
	$headline="<h2>Archiv ".$year."</h2>n";
} 

Die Überschrift fügen wir unterhalb von if (have_posts()) : ein.

 

if (have_posts()) :
echo $headline; ?> 

Jetzt sollte eurer Archiv genauso aussehen wie meins . Die Liste könnt ihr mit CSS euren Bedürfnissen anpassen.

Ich hatte gedacht, das ich das Template ebenfalls für die Tags benutzen kann, leider bekomme ich eine Fehlermeldung von der Datenbank. Mal sehen, ob ich das hinbekomme.

• Pagebar Plugin mit nofollow
• Mein Ext Blog Archiv geht wieder
• Portfolioseite mit WordPress
• Templates mit der Ext Library
• Blogarchive mit der Ext Ajax Library