Hier zeige ich dir, wie du ein Theme um einen eigenen Widget Bereich erweitern und im aktuellen Theme ausgeben kannst.

Erstellen eines neuen Widget Bereichs

Die Widgets meines (Test)Themes sehen aktuell so aus:

Standard Widget Bereiche des Themes

Standard Widget Bereiche des Themes

Um einen neuen Widget Bereich zu erstellen, kommt die Funktion register_sidebar zum Einsatz. Der Code kommt in die functions.php Datei deines aktuellen Themes!

Hier die Erklärungen für die Argumente ($args). Alle Argumente sind optional.

  • name – Der Name des Widget Bereichs (Standard ist ‘Sidebar’ und einer fortlaufenden ID)
  • id – Sidebar id – Muss klein geschrieben sein und ohne Leerzeichen (Standard ist eine fortlaufende ID). Vorsicht! Damit kann man bestehende Widgets überschreiben. Besteht z.B. schon ein Widgetbereich mit der id 1 und es wird ”id’ => ‘sidebar-1’” als Argument angegeben, wird der bestehende Widget Bereich überschrieben.
  • description – Beschreibung was/wo ausgegeben wird.
  • class – CSS Klassenname der dem Widget-HTML im Backend zugewiesen wird (Standard: leer).
  • before_widget – HTML Code der vor jedem Widget ausgegeben wird (Standard: <li id=”%1$s” class=”widget %2$s”>)
  • after_widget – HTML Code der nach jedem Widget ausgegeben wird (Standard: </li>\n).
  • before_title – HTML Code der vor jedem Titel ausgegeben wird (Standard: <h2 class=”widgettitle”>).
  • after_title – HTML Code der nach jedem Titel ausgegeben wird (Standard: </h2>\n).

Nachdem der Code hinzugefügt wurde, ist ein neuer Widget Bereich hinzugekommen:

Eigener Widget Bereiche wurde zum Theme hinzugefügt

Eigener Widget Bereiche wurde zum Theme hinzugefügt

Widgets im Theme ausgeben

Nachdem du mittels register_sidebar einen neuen Widget Bereich erstellt hast, zeige ich nun, wie du es im Theme ausgeben kannst.

Im oberen Beispiel erstellten wir ein “Footer Widget”. Dem Gesetz der Logik folgend, wollen wir dieses Widget natürlich im Footer unserer Website ausgeben.

Dazu öffnest du die footer.php Datei deines Themes. Dort fügst du den folgenden Code hinzu, wo immer du möchtest.

Widget Bereich befüllen und Ausgabe testen

Um die Ausgabe des Widget Bereiches zu testen, befüllst du diesen Bereich erstmal mit einem Widget. Zu Testzwecken nahm ich ein Textwidget.

Widget in eigenen Widget Bereich hinzugefügt

Widget in eigenen Widget Bereich hinzugefügt

Danach kannst du testen, ob die Ausgabe richtig ist:

Test, ob das Widget ausgegeben wird.

Test, ob das Widget ausgegeben wird.

Das ist es schon! 🙂

 

Wie immer: Feedback, Erfahrungen, Verbesserungen und Co. erlaubt und erwünscht!