WordPress liefert für alle hauseigenen Template-Tags in der Sidebar (Suche, Kategorien, Tags, Archiv, Kalender, Links, RSS, Seiten und Meta) eigene Widgets mit. Diese Widgetfunktionen sind in der Datei includes/widgets.php verankert. Wenn man ein widgetfähiges Theme erstellt und das Layout-Gerüst für die Standard-Sidebar soweit steht, sollte man auf jeden Fall eine “Widget-Probe” machen, indem man sie einmal alle in die Sidebar zieht und sich das Ganze dann ansieht.
Die standardmäßige HTML-Struktur eines von WordPress erzeugten Widgets ist folgende:
Überschrift
<ul>
<li>...</li>
<li>...</li>
</ul>
In der funktions.php kann man ein wenig Einfluß auf die Struktur nehmen, man kann HTML-Code vor und hinter dem Widget einfügen, sowie den Titel in HTML-Tags auszeichnen.
Möchte man diese Strukur im Widget ausgeben (Beispiel Archiv):
<div class="box">
<h2>Archiv</h2>
<ul>
<?php wp_get_archives(); ?></ul>
</div><!--Ende box-->
… notiert man in der funtions.php wie folgt:
'before_widget' => '<div class="box">',
'after_widget' => '</div><!--Ende box-->',
'before_title' => '<h2>',
'after_title' => '</h2>',
Soweit, so gut – aber was ist, wenn die HTML-Strukur in der Sidebar sich mit den vorhandenen Möglichkeiten nicht abbilden lässt, wie etwa diese hier:
<div id="archives" class="dbx-box">
<h2 class="dbx-handle">Blog-Archiv</h2>
<div class="dbx-content">
<ul><?php wp_get_archives('type=monthly&limit=12'); ?></ul>
</div>
</div>
Die unglücklichste Lösung ist, die Struktur in der widgets.php anzupassen, es ist nicht zu empfehlen, die Core-Dateien von WordPress zu modifizieren, spätestens beim nächsten Update ist nämlich alles wieder beim Alten und die widgets.php muß erneut editiert werden. Und für Themes als Download-Angebot geht das logischweise schon gar nicht.
Dann bleibt noch die Möglichkeit, eigene Widgets zu erstellen. Das geschieht ebenfalls in der functions.php. Diese Widgets tauchen dann im Widget-Bereich zwischen all den anderen auf und man erkennt am Namen, welche zum Theme gehören. Für das oben genannte Beispiel sieht das so aus:
<?php function widget_meintheme_archives() {
?>
<div id="archives" class="dbx-box">
<h2 class="dbx-handle">Blog-Archiv</h2>
<div class="dbx-content">
<ul><?php wp_get_archives('type=monthly&limit=12'); ?></ul>
</div>
</div>
<?php
}
if ( function_exists('register_sidebar_widget') )
register_sidebar_widget('MeinTheme Archiv', 'widget_meintheme_archives');
?>
Erklärung der Einzelschritte:
Zuerst rufe ich das Widget ins Leben mit dem Aufruf:
function widget_meintheme_archives()
Dann folgt meine HTML-Struktur, die genauso aufgebaut ist wie in der normalen Sidebar:
<div id="archives" class="dbx-box">
<h2 class="dbx-handle">Blog-Archiv</h2>
<div class="dbx-content">
<ul><?php wp_get_archives('type=monthly&limit=12'); ?></ul>
</div>
</div>
…und zum Schluß frage ich ab, ob die Funktion vorhanden ist und wenn ja, rufe ich sie auf:
if ( function_exists('register_sidebar_widget') )
register_sidebar_widget('MeinTheme Archiv', 'widget_meintheme_archives');
Nun ist beim Einsatz des Themes im Widget-Bereich ein Archiv-Widget mit dem Namen MeinTheme Archiv zu finden. Dieses Widget bildet bei Verwendung die Struktur genauso ab wie in der ursprünglichen Sidebar – auch die Anzeige der Monate ist, wie im Original, auf 12 begrenzt.
Ferner hat man noch die Möglichkeit, die WordPress-Widgets mit individuellen css-Klassen zu versehen. Hierfür verwendet man in der functions.php als class und id eine Variable, das Ganze sieht dann so aus:
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
Die auf diese Art erzeugten Bezeichnungen für ID’s und Klassen erfährt man, wenn man einfach mal sämtliche Widgets ins Theme zieht, speichert und sich dann den Quellcode der Seite anzeigen läßt. Nun kann man diese ID’s und Klassen in die style.css übernehmen und ihnen dort Formateigenschaften zuweisen.
