Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 1 Kommentar

  1. Marcos
    schrieb am 02.02.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…

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: