kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

WordPress-Widgets mit individuellen CSS-Klassen und IDs auszeichnen

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

1 Kommentar

  1. Marcos

    Verfasst am 2. Februar 2013 um 21:48 Uhr.

    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…

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.