Wie du Widgets in WordPress hinzufügst und kreativ nutzt

Über Widgets werden gern mal wahre Wunderdinge erzählt und wie diese ein Theme erweitern können. Zumindest lassen sich damit schnell die Sidebars füllen. Weitere Funktionalitäten ganz ohne Programmierkenntnisse rücken in den Bereich des Möglichen.

Simples Drag & Drop reicht hier völlig aus. Ich zeige dir das System, gebe Tipps für zusätzliche Widgets und erkläre, wie du ein Theme, um eigene Widget-Bereiche ergänzen kannst.

Was sind Widgets und warum sollte ich sie nutzen?

Es handelt sich wohl um die einfachste Technik, eine WordPress-Seite mit Galerien, Zitaten, populären Beiträgen, Linklisten, Social Media-Buttons oder sonstige dynamische Elemente zu erweitern. Widgets sind kleine Funktionsabschnitte, die ein Theme ergänzen. Das Widgets-System ist fest in WordPress integriert und steht nach der Installation sofort bereit: und zwar unter Design > Widgets im Admin-Bereich.

Meine Empfehlung:

Allerdings muss das Theme so genannte „Widget-ready-Areas“, also festgelegte Widget-Bereiche, vorweisen können. Traditionell befinden sich diese in den Sidebars. Aber auch im Footer und vielen anderen Positionen werden diese mittlerweile eingesetzt. Der Aufbau dieser Bereiche ist meist streng vorgegeben. Es lassen sich nur die vom Programmierer vorgegeben Daten ändern. Dazu gehören zumeist die Überschrift sowie die Anzahl der Elemente.

So setzt du Widgets in vorhandene Bereiche ein

Im Backend deines WordPress gehst du auf Design und wählst aus den Optionen Widgets aus. Selbst eine frische Installation zeigt da schon einige verfügbare Widgets. Viele Themes bringen zusätzliche Exemplare mit. Jetzt kommt es darauf an, ob dein Theme Widget-Bereiche ausweist. Diese werden auf der rechten Seite angeboten und heißen sowas wie Rechte Sidebar, Linke Sidebar oder Footer.

Durch Drag & Drop kann ein Widget in einem der Bereiche abgelegt werden. Das Widget öffnet sich und bietet dir seine Features an. Du vergibst einen Titel und stellst die Optionen ein. Nach einem Klick auf Speichern ist das Widget auf deiner Seite aktiv. Um ein Widget zu entfernen, klickst du es an und gehst auf Wort „Löschen“ in der unteren, linken Ecke. Auch das Herausziehen sorgt für ein rückstandsloses Entfernen.

Beispiele: WordPress um Widgets erweitern

Es gibt zahlreiche Plugins, die Wordpress um Widgets erweitern. Das Gabfire Widget Pack sorgt gleich für ein gutes Dutzend neuer Funktionalitäten. Video-Slider, Banner, die letzten Tweets, Social Media-Icons oder Tabs – alles dabei.

Und falls du nur zu bestimmten Zeiten erreichbar bist oder gar ein Ladengeschäft führst, kannst du Widget Opening Hours nutzen. Auf diese praktische Weise können die Öffnungszeiten in der Sidebar präsentiert werden. Schick ist auch das Google Maps Widget.

Die Vielfalt an Widgets ist fast ebenso groß, wie bei den Plugins. Doch oft wünscht man sich mehr Einstellungsmöglichkeiten. Nur den Titel zu ändern reicht nicht immer aus. Mehr Flexibilität bekommst du mit Erweiterungen, die selbst keine Widgets sind, sondern diese um Fähigkeiten ergänzen. Für mehr Kontrolle über die Präsenz einzelner Widgets sorgt Widget Options.

Damit kannst du Widgets von Kategorien, einzelnen Seiten oder über Tags ausschließen, Widgets für mobile Endgeräte deaktivieren, es besser ausrichten (links- oder rechtsbündig, zentriert) oder dank zugewiesenen IDs und Klassen das Erscheinungsbild mittels CSS verschönern. Selbst die Bindung an die Widget-Areas lässt sich aufheben: Widget Shortcode verpackt deine Widgets in ein Stückchen Code, das sich überall integrieren lässt.

Widgets-Bereiche anlegen

Falls dein Theme noch keine Widget-Bereiche anbietet, so kannst du diese in nur zwei einfachen Schritten ergänzen. Zunächst braucht dein Theme eine Erweiterung der functions.php, in der folgender Code eingefügt wird:

function themename_widgets_init() {
 register_sidebar(array(
 'name' => 'Right Sidebar',
 'id' => 'right_sidebar',
 'description' => 'Mein Widgetbereich',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ) );
 }
 add_action( 'widgets_init', 'themename_widgets_init' );

War die functions.php-Datei leer, so eröffnest du mit <?php und schließt am Ende mit ?> ab. Der Name wird als Bezeichnung des Bereiches im WordPress-Backend verwendet. Die ID dient dem Identifizieren/Ansprechen, die Description der Beschreibung.

Interessanter ist da schon before_widget und after_widget. Hier kann HTML mit CSS eingefügt werden, um Widgets generell zu erfassen und zu gestalten. Einzig der Titel wird noch einzeln angesprochen, über before_title und after_title. So könnte dieser gleich als Überschrift festgelegt werden.

Theme mit Widget-Bereich

Das war es auch schon für den Anfang. Schon jetzt kannst du Widgets in den soeben definierten Bereich einfügen, doch wird auf der Homepage nichts angezeigt. Dazu muss das Theme erweitert werden:

<?php if ( is_active_sidebar('right_sidebar') ) : ?>
 <?php dynamic_sidebar('right_sidebar'); ?>
 <?php endif; ?>

Fertig! Jetzt können die WordPress-eigenen sowie externe Widgets genutzt werden. So hältst du die Sidebar und andere Bereiche der Homepage pflegeleicht, da an einer einzigen Stelle die Verwaltung erfolgt, die auf zahlreiche Seiten und Beiträge Wirkung zeigt.

Mehrere Widget-Bereiche

Du hast in einer Sidebar die Widget-Area definiert. Jetzt kann es aber sein, dass du auch im Footer und in der linken Sidebar ein Widget unterbringen möchtest. Kein Problem, dazu muss nur die functions.php etwas wachsen:

if (function_exists('register_sidebar')) {

register_sidebar(array(
 'name' => 'Right Sidebar ',
 'id' => 'right_sidebar ',
 'description' => 'Beschreibung',
 'before_widget' => '<div">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
 register_sidebar(array(
 'name' => 'Left Sidebar',
 'id' => 'left_sidebar ',
 'description' => 'Beschreibung ',
 'before_widget' => '<div">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 ));
 register_sidebar(array(
 'name' => 'Footer',
 'id' => 'footer',
 'description' => 'Beschreibung',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'before_title' => '<h4>',
 'after_title' => '</h4>'
 ));
 }

Im Theme müssen die Bereiche nur noch mit den entsprechenden IDs angesprochen werden.

Werkstattbericht 🔧

Im Beitragsbild verwende ich den Google Font Khand. Das Foto mit der Axt und dem Campingmesser fand ich bei Pixabay.