WordPress-Blog

Tutorial: WordPress-Widgets in Templates einbauen

Widgets gehören seit WP 2.0 zum festen Bestandteil von WordPress. Mit ihnen lassen sich vorab definierte bereiche in Themes dynamisch und ohne Code-Arbeiten befüllen. In den meisten Fällen werden Widgets in Sidebars eingesetzt, um dort zum Beispiel eine Liste der letzten Artikel / Kommentare anzuzeigen. Auch die Darstellung von Kalendern, Kategorien, Seiten, Texten oder Tag-Wolken wird gerne mit Widgets schnell und einfach übernommen.

Widgets werden heute zunehmend auch genutzt, z.B. um den Footer mit verschiedenen Inhalten zu füllen. Selbst direkt im Content-Bereich, z.B. als Featured Element, kommen Widgets zum Tragen. Dennoch kann es im WordPress-Alltag vorkommen, dass man Widget-Inhalte nicht nur in den dafür vorgesehenen Bereichen, sondern ganz flexibel an irgendeiner Stelle im Template einfügen möchte. In diesem Fall hilft das Template Tag the_widget() weiter.

Die folgenden, hauseigenen WordPress-Widgtes lassen sich mit the_widget() in WP-Templates einfügen:

  • WP_Widget_Archives
  • WP_Widget_Calendar
  • WP_Widget_Categories
  • WP_Widget_Links
  • WP_Widget_Meta
  • WP_Widget_Pages
  • WP_Widget_Recent_Comments
  • WP_Widget_Recent_Posts
  • WP_Widget_RSS
  • WP_Widget_Search
  • WP_Widget_Tag_Cloud
  • WP_Widget_Text

Statt also gleich zu einem Plugin zu greifen, wenn man verschiedene WordPress-Inhalte ausgeben möchte, ist es besser mit the_widget() bereits bestehende WP-Funktion ohne Wenn-und-aber zu nutzen. Eine Liste der zehn neuesten Artikel lässt sich z.B. wie folgt ausgeben:

<?php the_widget('WP_Widget_Recent_Posts'); ?>

Selbstverständlich lässt sich die Standardausgabe von zehn Artikeln ändern (z.B. auf 15 oder fünf). Durch Angabe von before_title und after_title wird definiert, was vor und nach der Ausgabe des Widget-Titels geschehen soll. Im folgenden Beispiel werden 15 Artikel angezeigt und aus dem Titel wird eine h3-Überschrift:

<?php the_widget('WP_Widget_Recent_Posts', 'number=15', 'before_title=<h3>&after_title=</h3>'); ?>

Ebenfalls zur Verfügung stehen before_widget und after_widget, die zum Stylen des Widgets genutzt werden können.

Nach diesem einfachen Prinzip lassen sich alle bestehenden Widgets an beliebige Orte in Templates einbauen. Hier das Beispiel für eine Kategorien-Liste, die sowohl Unterkategorien als auch einen Artikel-Zähler anzeigt und den Titel “Blog-Kategorien” trägt, der als h3-Überschrift dargestellt werden soll:

<?php the_widget('WP_Widget_Categories', 'hierarchical=1&count=1&title=Blog-Kategorien', 'before_title=<h3>&after_title=</h3>'); ?>

Zum Abschluss noch ein Link-Widget, welches Links aus den Kategorien 1, 2, 3 zusammen mit der Link-Bewertung (show_rating) anzeigt:

<?php the_widget('WP_Widget_Links', 'category=1,2,3&rating=1'); ?>

Zusammenfassung: WordPress-Widgets in Templates einbauen

  • Widgets lassen sich auch manuell recht einfach in Templates nutzen
  • Für die Ausgabe von einfachen Inhalten wird kein zusätzliches Plugin benötigt
  • the_widget lässt sich einfach stylen (before_widget, after_widget, before_title, after_title)
  • Die Ausgabe lässt sich durch Parameter leicht individualisieren (hierarchical=1 usw.)
SimonTutorial: WordPress-Widgets in Templates einbauen

3 comments

Join the conversation
  • Gerscher - 25. April 2012 reply

    Hallo Simon
    Hilfreiche Beiträge bisher. Eine Sache habe ich allerdings biher nirgendwo gefunden.
    Wenn man so an die 30 Widgets auf verschiedene Seiten platziert hat, verliert man schon mal den Überblick, wenn man ein bestimmtes Widget auf einer neuen Seite platzieren will.
    Gerade bei langweiligen Verbindungen kann es sehr lange dauern bis man das Widget gefunden hat, was man sucht.
    Gibts da irgendwo ein Plugin, dass die Widgets und ihre Platzierung auflistet, damit man nicht immer ewig suchen muss?
    LG Gerscher

    Simon - 26. April 2012 reply

    Hallo Gerscher, mir ist leider kein Plugin dieser Art bekannt. :/

  • SycB - 5. August 2012 reply

    Ich habe für den Kalender bisher Plugins benutzt, aber gut das es auch ohne geht – Danke! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *