• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen

Conterest Blog

Alles für Blogger

  • Bloggen
  • Blogstart
  • Grafik
  • Geldverdienen
  • Kostensparen
  • SEO
  • WordPress

Wie du Widgets in WordPress hinzufügst und kreativ nutzt

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.

Inhaltsverzeichnis
Was ist ein WordPress Widget?
So setzt du Widgets in vorhandene Bereiche ein
Beispiele: WordPress um Widgets erweitern
Widgets-Bereiche anlegen
Theme mit Widget-Bereich
Mehrere Widget-Bereiche
Werkstattbericht 🔧

Was ist ein WordPress Widget?

Ein Widget ist ein vordefinierter Block, der hilfreiche bloginterne Inhalte anzeigt.Typischerweise sind das Schlagworte, Kategorien, Linklisten, Zitate, Kalender. Widgets lassen sich einfach aktivieren und platzieren.

Es handelt sich wohl um die einfachste Technik, eine WordPress-Seite mit Galerien, Zitaten, populären Beiträgen, Listen, 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.

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.

widgets1

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 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.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Autor Dirk Metzmacher Erschienen am 6.07.2016 Stand vom 5.06.2022

Hier geht es weiter

  • Überschriften mit dem WordPress Editor spielerisch gestalten
  • WordPress Themes 🍪 Worauf es wirklich ankommt
  • Managed WordPress Hosting – bequem und performant
  • WordPress schneller machen – 6 Dinge, die du wissen solltest
  • Was du über WordPress Plugins wissen musst
  • Deinen ersten WordPress Beitrag erstellen
  • Entspannter Texten und Schreiben mit WordPress Plugins

Leser-Interaktionen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Haupt-Sidebar

Favoriten

  • WordPress Shortcuts
  • Online Schreibprogramme
  • Die schönsten Google Fonts
  • Worüber schreiben? 43 Vorschläge
  • Der perfekte Blog Post

Suche

Inhalt ** Archiv

Inhaltsverzeichnis

Aus dem Archiv

  • Warum du eine Über-mich-Seite im Blog brauchst – und wie du sie anlegst
  • Achte auf die kleinen Dinge im Blog – Hier sind 15 Ideen
  • Bloggen lohnt sich, sogar ohne Besucher
  • 40 deutschsprachige Artikel, die dein Blog unwiderstehlich erfolgreicher machen
  • Bloggen für Anfänger – 27 wichtige Begriffe erklärt
  • Werbeplattformen für Bücher — So machst du deine Werke online bekannt

Explore more

Conterest Logo

Footer

Conterest – ein Blog für Blogger

  • Bloggen 63
  • Blogstart 35
  • Geldverdienen 14
  • Kostensparen 12
  • Schreiben 11
  • Schrift & Grafik 22
  • SEO 18
  • Social Media 11
  • Wordpress 24

conterest.de · ESTD 2015 · Kostenrunter · Bildungssprache · Datenschutz · Impressum

Mehr zum Bloggen

  • Die Dr. Web Magazin Story
  • Tote Inhalte nutzen, um Evergreens mit Trafficgarantie zu erschaffen
  • Wie du Cover für Sachbücher attraktiv gestaltest 👌
  • So profitierst du von Blogparaden
  • 20 Methoden, mit denen du im Handumdrehen Ideen für Blogbeiträge findest 💡