WordPress-Widgets mit individuellen CSS-Klassen und IDs auszeichnen
In diesem Beitrag erfahrt ihr wie sich WordPress-Widgets um individuelle CSS-Klassen erweitern lassen.
Mit den Widgets von WordPress lässt sich eine Website sehr einfach individualisieren und erweitern. Selbst das simple Text-Widget ermöglicht durch die Eingabe von HTML-Markup recht umfangreiche Anpassungen. Ärgerlich in diesem Zusammenhang ist lediglich, dass Widgets keine individuelle ID besitzen und daher auch nicht gezielt angesprochen werden können. Mit folgendem Mini-Snippet erweitert Ihr Widgets um die fehlenden Angaben.
Unterschiedliche Klassen & IDs für WordPress-Widgets
Damit ein Theme Widgets nutzen kann, muss in der functions.php
eine widgetized Sidebar definiert werden. Hierbei wird nicht nur der Name der Sidebar und eine optionale Beschreibung festgelegt, es kann auch angegeben werden ob eine bestimmte Code-Struktur um das Widget herum erstellt wird. Genau hier setzt das Snippet an. Sucht in der functions.php
nach dem entsprechenden Abschnitt und passt euren Code um die fehlenden Komponenten an.
// widgetized sidebar
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar', // Name der Sidebar
'description' => __('Hier steht die Beschreibung der Sidebar'), // Beschreibung der Sidebar
'before_widget' => '<div id="%1$s" class="widget %2$s">', // Code der vor Widgets ausgegeben wird. Hier wird die individuelle ID und eine CSS-Klasse eingefügt.
'after_widget' => '</div>', // Code der nach Widgets ausgegeben wird
'before_title' => '<h2>', // Code der vor dem Titel ausgegeben wird
'after_title' => '</h2>', // Code der nach dem Titel ausgegeben wird
));
Am Beispiel eines Text-Widgets sieht das Markup nach der Anpassung in etwa so aus:
<div id="text-1" class="widget widget_text">
<h2>Titel des Widgets</h2>
</div>
Mit einer ID und zwei CSS-Klassen, sollte man ausreichend Möglichkeiten haben das Element individuell und objektorientiert zu stylen.
Links / Quellen
- via Text Widget with different Class – WordPress-Forum
- Widgetizing WordPress – WordPress Codex
Sorry hatte vorher ein wenig Code geschrieben …ich glaube deswegen ist mein Text nicht zu sehen …bin kein Spammer oder sowas!! :S …ich habe zu spät mitbekommen das ich nicht Code schreiben sollte …kam von ein Forum wo die option hatten…