WordPress-Widgets sind mächtig und flexibel zugleich. Aber wie mächtig und wie flexibel? Über die Jahre meiner Arbeit mit WordPress-Websites habe ich Widgets auf verschiedene Arten schätzen gelernt. Hier gebe ich eine möglichst kurze und zugleich möglichst ausführliche Einführung in das Thema WordPress-Widgets:

Kurz gesagt: WordPress-Widgets sind Elemente, die auf einer WordPress-Website an vorgegebenen Stellen (z.B. im Sidebar oder Footer) eingesetzt und angezeigt werden können. Typische Arten reichen vom einfachen Textbaustein bis hin zur dreidimensionalen, sich bewegenden Tag-Cloud.

Weil zum Beispiel das Sidebar in WordPress als Widgets-Bereich konfiguriert ist, muss man sich früher oder später mit dem Thema Widgets beschäftigen. Ist auch nicht schwer oder kompliziert, ganz im Gegenteil. Widget helfen einem Website-Betreiber dabei, das Potential von WordPress so richtig auszuschöpfen.

Habe ich Ihr Interesse geweckt? Dann lesen Sie einfach weiter. Ich wünsche viel Vergnügen!

Design-Element oder funktionaler Baustein?

In dieser Reihe von Beiträgen, die sich alle um verschiedene Aspekte einer WordPress-Website drehen, gibt es verschiedene Seiten: Die eher technische Seite, die gestalterische Seite, die inhaltliche Seite, und dann gibt es noch Aspekte, die das alles irgendwie mischen. WordPress-Widgets gehören eindeutig zu diesen Mischwesen.

Im vorangegangenen vierzehnten Teil dieser Beitragsreihe habe ich Ihnen gezeigt, welche Kriterien Sie zur Wahl des besten WordPress-Themes für Ihre Website heranziehen sollten, und welche nicht.

Nun begrüße ich Sie herzlich zum fünfzehnten Teil meiner Beitrags-Reihe, in der ich eine komplette Website-Erstellung von Anfang bis Ende beschreibe. Hier geht es wieder ein Bisschen mehr um die Struktur und Funktionalität der Website. Konkret werden wir uns ansehen, was sogenannte WordPress-Widgets alles für eine und auf einer WordPress-Website leisten können.

Was ist ein WordPress-Widget?

Ein WordPress-Widget ist ein modular einsetzbares Element einer Website, das in verschiedenen vorgegebenen Bereichen, z.B. dem Sidebar oder dem Footer, durch einfaches Klicken und Ziehen platziert werden kann. Die Arten von Widgets sind vielfältig, vom simplen Textbaustein über Kalender, Tag-Clouds, diverse Listen von Inhalten und Kategorien bis hin zu Formularen.

Wordpress-Widgets, einfach erklärt

Kurz gesagt: Ein Widget könnte ziemlich viel sein, vorausgesetzt, jemand hat sich die Mühe gemacht, es vorzubereiten. Einige Widgets kommen bereits mit dem WordPress-Core mit, d.h. sie sind in jeder WordPress-Installation von Anfang an verfügbar. Zusätzliche Widgets können über Themes oder Plugins bereitgestellt werden.

Das gleiche gilt übrigens für die Widget-Bereiche, in denen Widgets platziert werden können. Sie hängen grob gesagt vom Theme ab. Ein Standardbereich ist das Sidebar, wie bereits angeklungen ist. Auf einem typischen Blog findet man dort eine Liste der Beitrags-Kategorien, die 5 aktuellsten Beiträge und vielleicht auch noch Informationen über den Autor des Blogs.

Die dafür nötigen Widgets gehören zum WordPress-Standard. Wer aber wirklich eine 3D-drehbare Tag-Cloud möchte, der braucht dafür jedenfalls ein Plugin. Auch ausgefallene Dinge sind möglich, aber danach muss man vermutlich eben etwas länger suchen.

Was bedeutet das Wort Widget eigentlich?

Das Word Widget ist ein Kunstwort, das sich aus den beiden englischen Wörtern window und gadget zusammensetzt. Es ist also etwas Nützliches, meist Kleines, in einem Fenster, bzw. so wie ein Fenster verschiebbar und beweglich.

Welche WordPress-Widgets habe ich auf meiner Website zur Verfügung?

Der Unterpunkt Widgets des Menüpunkts Design im Seitenmenü des WordPress-Dashboards

Um zu sehen, welche WordPress-Widgets verfügbar sind, um in den Widget-Bereiche zum Einsatz zu kommen, sucht man im linken Seitenmenü des WordPress-Dashboards nach dem Menüpunkt Design und dort nach dem Unterpunkt Widgets und klickt darauf. Danach wird die Übersicht über alle verfügbaren Widgets und Widget-Bereiche angezeigt.

Auf der linken Seite der aufgerufenen Übersicht gibt es eine Liste der verfügbaren Widgets. Die Überschrift ist gleich mit einer Erklärung verbunden:

Wordpress-Widgets im WordPress-Dashboard: Der Überblick mit Erklärung

Darauf folgen die Widgets in alphabetischer Anordnung. Das kann ein Bisschen verwirrend sein, wenn man die englischen Bezeichnungen gewöhnt ist und sie in einer deutschen Liste sucht oder umgekehrt, aber es sind im Allgemeinen nicht allzu viele. Hier ist ein Ausschnitt dieser Liste als Beispiel:

Vier konkrete Beispiele für WordPress-Widgets

Auf der rechten Seite der gleichen Übersicht sind die vorbereiteten Widget-Bereiche aufgelistet.

Die Standard-Widget-Bereiche in WordPress, dargestellt im WordPress-Dashboard

Diese Gegenüberstellung hat den Sinn, dass es wirklich sehr leicht ist, die einzelnen Widgets per drag-and-drop von links nach rechts in die einzelnen Bereiche hinüberzuziehen. Mehr zur Platzierung der Widgets gleich, etwas weiter unten, aber das war’s eigentlich schon.

Woher kommen verfügbare WordPress-Widgets?

Wie schon gesagt kommen einige davon direkt mit dem WordPress-Core mit und sind sozusagen immer da. Jedes gute Theme bringt im Allgemeinen einiges an Funktionalität mit, manches davon in Form von Widgets. Auch Plugin-Funktionalität kann über Widgets zur Verfügung stehen.

Die entsprechenden Widgets haben dann in der Liste der Verfügbaren Widgets in ihrem Namen auch einen Hinweis auf die Herkunft. Das kann ein vorangestelltes Jetpack: für den Jetpack von wordpress.com oder eine Klammer mit (ET) für die Funktionalität der Themes und Plugins von Elegant Themes.

Zwei vom Jetpack-Wordpress-Plugin zur Verfügung gestellte WordPress-Widgets

Das scheint auf den ersten Blick trivial, doch diese Kennzeichnung hilft dabei, unliebsame Überraschungen zu vermeiden. Wenn man z.B. dabei ist, wieder einmal die Plugins durchzusehen und solche auszumisten, die man (vermeintlich) nicht mehr braucht, dann ist es eine gute Idee, sich auch die Liste der verfügbaren Widgets durchzusehen.

Sollte eines, das man verwendet oder sogar dringend braucht, weil man es nicht leicht aus anderer Quelle ersetzen kann, zu einem bestimmten Plugin gehören, dann löst sich dieses Widget beim deaktivieren und löschen des Ursprungs-Plugins buchstäblich in virtuelle Luft auf. Hier ist also Vorsicht geboten!

Falls man tatsächlich einmal ein Widget auf diese Art indirekterweise vernichtet hat, ist der Schaden zwar nicht unendlich groß, aber man hat ja im Allgemeinen etwas Arbeit in die Einstellungen für das Widget investiert, die man dann schlimmstenfalls noch einmal machen muss.

Wo kann ich WordPress-Widgets einsetzen?

WordPress-Widgets können in jedem der vorhandenen Widget-Bereiche eingesetzt werden und zwar auch mehrfach, viele über- oder untereinander, je nach Lust und Laune. Die Widget-Bereiche sind vorgegeben und im Wesentlichen durch das Theme bestimmt, werden aber manchmal auch durch Plugins hinzugefügt.

Im Extremfall kann man hier ganz schön Bereiche ansammeln, wie dieses Beispiel zeigt:

Viele Widget-Bereiche können in WordPress durch das Theme und Plugins bereitgestellt werden

PBE steht hier übrigens für Page-Builder Everywhere, ein kostenpflichtiges WordPress-Plugin, das die Flexibilität des Divi-Themes noch erweitert.

Wie platziere ich ein WordPress-Widget?

Die Platzierung eines WordPress-Widgets in einem der vorgegebenen Widget-Bereiche funktioniert per drag-and-drop. Einfach das zu platzierende Widget in der Liste der verfügbaren Widgets (auf der linken Seite der Widget-Übersicht) anklicken, die Maustaste gedrückt halten und das Widget über den gewünschten Widget-Bereich ziehen und dort die Maustaste wieder loslassen.

Dabei öffnet sich der Widget-Bereich und man kann das neue Widget durch geeignetes Ziehen innerhalb des nun offenen Bereichs auch in Bezug auf andere dort bereits vorhandene Widgets platzieren.

Ein Speichern der neuen Position ist nicht nötig, diese wird automatisch gespeichert. Das klingt ja ganz schön einfach, werden Sie sich jetzt vielleicht denken. Ja, das ist auch wirklich einfach. Manchmal muss man mit den Widget-Bereichen etwas Geduld haben, bis sie sich öffnen.

In so einem Fall einfach kurz das Widget mit gehaltener Maustaste über dem gewünschten Bereich in Position halten oder, wenn sich gar nichts tut, ganz wenig hin- und her-bewegen. Irgendwann reagiert der Bereich und man kann das Widget an seinen Platz “fallen lassen”.

Wie kann ich ein WordPress-Widget von einem Bereich in einen anderen verschieben?

Auch Widgets, die bereits in einem der Bereiche platziert sind, können mit drag-and-drop problemlos an einer anderen Stelle innerhalb desselben Bereichs oder in einem anderen Bereich platziert werden. Einfach den derzeitigen Bereich des Widgets öffnen, wenn er das noch nicht ist, und das Widget an den neuen Platz ziehen.

Kann man ein WordPress-Widget einfach duplizieren?

Man kann ein WordPress-Widget grundsätzlich mehrfach verwenden (einfach mehrere Instanzen an die gewünschten Stellen in den Widget-Bereichen ziehen). Ein Duplizieren ist in WordPress ohne Plugins zwar nicht möglich, meist lassen sich die Einstellungen aber recht rasch von einer Instanz des Widgets zur anderen kopieren, wenn man das wirklich möchte und braucht, sodass ein Plugin-Einsatz nicht nötig ist.

Kann ich ein WordPress-Widget deaktivieren ohne es zu löschen?

Ja, man kann derzeit nicht benötigte Widgets ohne Verlust der Einstellungen “parken”, indem man sie aus dem jeweiligen aktiven Widget-Bereich in der Widget-Übersicht nach links unten unter die Überschrift Inaktive Widgets zieht. Von diesem inaktiven Widget-Bereich kann man sie dann jederzeit bei Bedarf wieder in einen aktiven Bereich ziehen.

Der Widget-Bereich inaktive Widgets im WordPress-Dashboard

In meinem Beispiel befindet sich gerade ein inaktives Widget in diesem Bereich, nämlich ein einfacher Textbaustein. Beachten Sie, dass das Widget auch hier durch Klicken auf den kleinen Pfeil rechts auf dem Widget-Balken geöffnet und verändert werden kann, auch wenn es gerade nicht aktiv ist.

Möchte man alle hier befindlichen Widgets löschen, gibt es dafür den entsprechend beschrifteten Button. Apropos Löschen:

Wie kann ich ein WordPress-Widget direkt löschen?

Um ein WordPress-Widget direkt zu löschen, zieht man es einfach aus seinem Widget-Bereich per drag-and-drop heraus und lässt die linke Maustaste über der Liste der verfügbaren Widgets auf der linken Seite der Übersicht wieder los.

Wie finde ich heraus, was ein bestimmtes Widget macht?

Jedes WordPress-Widget wird mit dem Titel auf dem ziehbaren Balken und einer sehr kurzen Beschreibung direkt darunter in der Liste der verfügbaren Widgets angezeigt. Normalerweise sind bereits die Namen und die Kurzbeschreibung selbsterklärend, jedoch kann es bei komplizierteren Widgets nötig sein, die Dokumentation des Ursprungs-Themes oder -Plugins zu Rate zu ziehen.

Letzen Endes kann man sich aber auch ganz einfach ansehen, was das Widget macht, wenn man es aktiviert, d.h. in einen der Widget-Bereiche zieht. Dann sieht man auf der Website, was dort angezeigt wird, und man kann je nach Funktionalität auch Einstellungen für das Widget vornehmen. Apropos:

Wie kann ich Einstellungen für ein WordPress-Widget vornehmen?

Ein Widget, das sich in einem Widget-Bereich befindet, lässt sich meist öffnen. Dazu klickt man auf den kleinen Pfeil rechts auf dem Widget-Balken. Dann werden Einstellungsmöglichkeiten und Eingabefelder, z.B. für Text. sichtbar. Wenn alle nötigen Einstellungen und Änderungen vorgenommen sind, bestätigt man durch einen Klick auf den Button Speichern.

Der oberste Teil in meinem Sidebar hier auf Websiteberater.com wird z.B. von einem Bild-Widget erzeugt, und dessen Einstellungen sehen so aus:

Das WordPress-Bild-Widget im Einsatz: Einstellungen und Inhalte, wie sie im geöffneten Widget im Sidebar zu sehen sind

Der Speichern-Button wird nur bei vorgenommenen Änderungen aktiviert, ansonsten sieht er aus wie hier (gespeichert) und bestätigt, dass es keine zu speichernden Änderungen gibt.

Die in WordPress standardmäßig enthaltenen Widgets

In WordPress gibt es standardmäßig bereits einige verfügbare Widgets. Die meisten kommen aus der ursprünglichen Tradition von WordPress als Blogging-Plattform, aber es gibt auch einige für generelle Websites typische modulare Bausteine.

Ich möchte hier einfach kurz auflisten, was es zu den wichtigsten dieser Standard-Widgets zu sagen gibt. Die meisten dieser Widgets haben einen optionalen Titel. Wenn man diesen Einträgt, wird er abgesetzt angezeigt. Wenn man keinen Titel einträgt, erscheint der Inhalt ohne Titel.

  • Text: Einfacher Textbaustein. Hat den optionalen Titel und ein Textfeld, das über einen simplen Editor mit einfachen Formatierungen und Links aufgebessert werden kann.
  • HTML: Kann beliebigen HTML-Code enthalten und sollte auch mit HTML-Tags geschrieben werden. Hilft einem dabei, Tags ordentlich zu schließen und markiert Fehler im Code. Optionaler Titel.
  • Bild: Zeigt ein Bild an. Titel darüber und Link auf dem Bild sind optional.
  • Galerie: Zeigt eine Bildergalerie an. Optionaler Titel.
  • Kalender: Zeigt eine Kalenderansicht (mit Links) der auf der Website veröffentlichten Beiträge an. Einträge nach Datum der Veröffentlichung der Beiträge. Titel optional.
  • Kategorien: Zeigt eine Liste der Beitragskategorien an (mit Links zu den Kategorie-Seiten). Hierarchie kann, muss aber nicht angezeigt werden. Die Darstellung ist hier auch als Dropdown-Menü statt als Liste möglich (das braucht bei vielen Kategorien weniger Platz). Titel optional.
  • Meta: Links zu RSS-Feed, Anmelde-Seite für Benutzer, WordPress.org. Sollte aus Sicherheitsgründen nicht eingesetzt werden.
  • Navigationsmenü: Zeigt eins der angelegten Menüs an. Ist in Kombination mit der Verwaltung von WordPress-Menüs sehr vielseitig einsetzbar. Titel optional.
  • Neue Beiträge: Zeigt eine Liste (mit Links) der aktuellsten Beiträge der Website an. Die Anzahl der angezeigten Beiträge kann eingestellt werden. Titel optional.
  • Neue Kommentare: Zeigt eine Liste (mit Links) der aktuellsten Kommentare von Besuchern der Website an, die zu Beiträgen auf der Website verfasst wurden. Titel optional.
  • RSS: Zeigt den RSS-Feed der Website über eine eingegebene URL an. Titel optional. Ebenso optional sind die Anzeige von Autoren, Datum und Inhalten der Beiträge.
  • Schlagwörter-Wolke (Tag-Cloud): Zeigt eine einfache Darstellung der verwendeten Schlagwörter an, Titel und Anzahl-Anzeige der Tags sind optional.
  • Seiten: Zeigt eine Liste der Seiten an, die auf der Website vorhanden sind. Titel optional.
  • Suche: Zeigt ein einfaches Suchfeld zur Suche auf der Website an. Titel optional.
  • Video: Zeigt ein Video an. Die Quelldatei kann extern, aber auch lokal gehostet sein. Titel optional.
  • Werbung: Ermöglicht das Anzeigen einer Reihe von Banner mit Titel, Link und alternativem Text.
  • Über mich: Einfaches Widget mit Titel, Bild und Textbereich.

Typische Einsatzgebiete für WordPress-Widgets

Zentral sind als Einsatzgebiete für WordPress-Widgets natürlich das Sidebar (die Seitenleiste) und der Footer (der Fußzeilenbereich) einer Website. Diese sind als Standards in beinahe jedem typischen Website-Layout irgendwo anzufinden.

Thematisch kann man sich bezüglich der Einsatzgebiete von WordPress-Widgets eigentlich recht viel ausdenken. Bereits die Möglickeiten, Bilder, Text und beliebigen HTML-Code über Widgets zu platzieren, eröffnet fast unerschöpfliche Möglichkeiten.

Praktisch sind jedoch vor allem jene Widgets, die automatisch die Inhalte der Website in organisierter Form anzeigen. Dazu gehören für Blogs natürlich die neuesten Beiträge und die Beitragskategorien. Allgemein ist hier aber das Konzept der WordPress-Menüs sehr mächtig.

Über zusätzlich erstellte WordPress-Menüs kann man sehr einfach praktisch beliebige Ansammlungen und Anordnungen von Links zu Inhalten innerhalb und außerhalb der eigenen Website organisieren und dann über das Menü-Widget anzeigen lassen. Dazu gleich noch mehr, wenn es um den Footer geht.

Ansonsten hat man auch von mächtigen WordPress-Themes und speziellen Plugins her so manche Funktionalität oder so manches Element, das man dann geeignet platzieren und damit den gewünschten Effekt erzeugen kann. Themes und Plugins können dabei, wie schon erwähnt, durch zur Verfügung-Stellen von zusätzlichen Widget-Bereichen, die Flexibilität in der Gestaltung der Website gewaltig erhöhen.

WordPress-Widgets im Sidebar

Das Sidebar auf Websites gibt es schon sehr lange. Ob man eins verwendet und auf welcher Seite, ist vielleicht umstritten, aber das Konzept kann einem Website-Betreiber viel Arbeit und Sorgen ersparen.

Wenn man z.B. Informationen parat hat, die wirklich jeder Besucher der Website sehen soll, dann kann man diese ganz einfach und zentral bequem verwaltbar in einem Sidebar unterbringen, das immer angezeigt wird. Immer bedeutet in diesem Zusammenhang konkret auf jeder Seite und jedem Beitrag.

Informationen sind ja nett, werden Sie sagen, aber was mir dazu eigentlich einfällt, ist ein Call-to-Action. Genau! Dafür ist ein Sidebar ebenfalls perfekt geeignet. Fazit: Alles, was ein Besucher der Website sehen soll oder muss, gehört entweder ganz oben hin oder in ein Sidebar.

Jetzt möchte ich noch ein paar Worte zu einem typischen Widget-Bereich verlieren, er etwas unauffälliger ist, dem Footer.

WordPress-Widgets im Footer

Der Footer einer WordPress-Website ist ein sehr wichtiger Bereich. Hier hat man die Möglichkeit, Informationen und Links übersichtlich und reichlich so unterzubringen, dass sie den Informationen oben auf der Website nicht im Weg sind, sie aber sinnvoll ergänzen.

Bei Firmen-Websites finden sich hier oft Kontaktinformationen, Links zu Partnern, Werbung, Bilder, eine Sitemap der Website, Anfahrtskarten, Werbevideos, Listen der Abteilungen, Übersetzungen, Suchfunktionen und vieles mehr. Hier sind der Fantasie auch tatsächlich keine Grenzen gesetzt.

Sehr viel davon lässt sich auch ganz einfach als WordPress-Menü organisieren, vorbereiten und super-einfach aktuell halten. Ob das eine Liste von Abteilungs-Seiten auf der Website ist oder eine Liste von bestimmten Pressemeldungen, spielt dabei keine Rolle.

Auch der Unternehmens-Blog und dessen Kategorien sind schneller eingebaut, als viele Menschen sich eine Tasse Kaffee holen können. Hier darf man also spielerisch und kreativ sein, und zwar aus inhaltlicher und strategischer Sicht.

Interessantes Beispiel: QR-Code im Footer über das Bild-Widget

Als für Unternehmens-Websites vielleicht interessanten Fall möchte ich hier ein konkretes Beispiel für die Nutzung des Bild-Widgets erwähnen, das ich persönlich gerne einsetze. Wer vor QR-Codes keine Angst bzw. bei deren Benutzung keine Bedenken hat, der kann sich und seinen Kunden damit einige Arbeit ersparen.

Wer kennt das nicht: Interessante Website gefunden. Man möchte die Firma kontaktieren, wird das vermutlich öfter tun müssen, vielleicht auch per Email, oder anrufen, oder auf jeden Fall zurück zur Website. Oje, dann müsste man jetzt diese Kontaktinformationen alle finden, am Smartphone einen neuen Kontakt anlegen, die Informationen alle dort eintragen, benennen, speichern, …

Während Sie diese wenigen Zeilen gelesen haben, hätten Sie all das mit Hilfe eines QR-Codes der vCard bereits erledigt. Und das ist im Sinne sowohl des Website-Betreibers als auch des Interessenten. Also, holen Sie sich einen (kostenlosen) QR-Code Ihrer vCard mit Daten, die Sie selbst eingeben, z.B. bei goQR.me. Dann einfach als Bild speichern und mit dem Bild-Widget im Footer Ihrer Website platzieren, fertig.

Nächste Schritte

So viel erstmal zum Thema WordPress-Widgets. Wie so oft ist diese Diskussion nicht erschöpfend gewesen, aber das kann sie anhand der schier unerschöpflichen Möglichkeiten, auch bei den Widgets in WordPress, auch gar nicht sein. Wichtig ist, dass Sie wissen, was ein Widget tut und diese kleinen Helferlein jetzt nach Herzenslust einsetzen können.

Was kommt jetzt noch?

In dieser nun doch schon recht langen und ausführlichen Reihe von Artikeln rund um das Thema WordPress-Website habe ich eine Art von Inhalten bisher noch ziemlich, ja fast sträflich, vernachlässigt: Die Bilder. Die einzige Ausnahme war die Diskussion der Bild-Optimierung, als es um must-have-Wordpress-Plugins gegangen ist.

Nach diesem zugegeben anachronistischen Fall soll es im nächsten Teil dieser Reihe endlich eine ordentliche Diskussion zum Thema Bilder auf einer WordPress-Website geben.

Jetzt Teil 16 lesen!

Pin It on Pinterest