Was sind WordPress-Widgets und wie verwendet man sie?

WordPress-Widgets sind eigenständige, modulare Elemente – Suchleisten, Listen der neuesten Beiträge, Social-Media-Feeds – die Sie in Bereiche wie Sidebars, Footer und Header einfügen können, ohne Code zu schreiben. Ihr Hauptzweck besteht darin, die Funktionalität und das Layout von Websites zu erweitern und zu verbessern.

Wie Widgets funktionieren, hängt von Ihrem Theme ab. Klassische Themes verwenden eine eigene Widget-Oberfläche, während Block-Themes Widgets vollständig durch den Website-Editor ersetzen. WordPress enthält mehrere integrierte Widgets, aber Sie können auch Plugins verwenden, um weitere hinzuzufügen.

Um Widgets strategisch einzusetzen, halten Sie die Widget-Bereiche fokussiert, vermeiden Sie visuelles Durcheinander, prüfen Sie die Kompatibilität mit Ihrem Theme und überwachen Sie ihre Auswirkungen auf die Leistung Ihrer WordPress-Website.

Was sind WordPress-Widgets?

Ein WordPress-Widget ist ein kleines, in sich geschlossenes Inhaltselement, das in widgetfähigen Bereichen Ihrer Website platziert werden kann. Diese Bereiche sind Layoutabschnitte, die durch das von Ihnen gewählte WordPress-Theme definiert werden – typischerweise in Seitenleisten und Fußzeilen, manchmal aber auch in Kopfzeilen, ober- oder unterhalb des Inhalts oder an Positionen innerhalb von Seitenvorlagen.

Widgets sind von Haus aus modular aufgebaut, das heißt, jedes lässt sich beim Bearbeiten einer WordPress-Website unabhängig hinzufügen, entfernen oder wiederverwenden, ohne das übrige Layout zu beeinträchtigen.

WordPress-Widgets gibt es seit Version 2.2 aus dem Jahr 2007. Anfangs definierten Themes eigene Widget-Bereiche, die es Ihnen ermöglichten, vorgefertigte Widgets aus dem Dashboard per Drag-and-Drop zu platzieren.

Mit der Veröffentlichung von WordPress 5.8 im Jahr 2021 wurden blockbasierte Widgets in klassischen Themes eingeführt. Statt auf herkömmliche Widgets beschränkt zu sein, können Sie nun Blöcke wie Bilder, Galerien, Buttons oder benutzerdefiniertes HTML in Widget-Bereichen hinzufügen. Dies brachte die Flexibilität des Block-Editors in Bereiche des Website-Layouts, die zuvor sehr starr waren.

Bei Block-Themes wie Twenty Twenty-Five ersetzt der Website-Editor das klassische Widget-System. Header, Footer, Sidebars und andere Layout-Elemente werden im Website-Editor vollständig als WordPress-Blöcke verwaltet, sodass Sie kein separates Menü mehr sehen.

Jedes Widget verfügt über eigene Einstellungen, die pro Instanz gespeichert werden. Dadurch kann sich dasselbe Widget in verschiedenen Bereichen unterschiedlich verhalten.

Ein Widget für „Neueste Beiträge“ lässt Sie beispielsweise steuern, wie viele Beiträge erscheinen und ob das Datum angezeigt werden soll. Ein Text- oder individuelles HTML-Widget akzeptiert eigenes Markup, was besonders nützlich für Formulare, Werbeanzeigen oder eingebettete Tools ist.

Arten und Beispiele von WordPress-Widgets

WordPress-Widgets lassen sich in drei Hauptkategorien einteilen: Standard-Widgets, die direkt mitgeliefert werden, Widgets von Drittanbietern, die über Plugins hinzugefügt werden, und benutzerdefinierte WordPress-Widgets, die speziell für eine Website entwickelt werden.

Jede Kategorie erfüllt einen anderen Zweck, doch alle sind darauf ausgelegt, die Funktionalität der Website zu verbessern und das Besuchererlebnis zu optimieren.

Standard-Kern-Widgets

Kern-Widgets decken die häufigsten Anforderungen einer Website ab und sind in jeder WordPress-Installation verfügbar. Zu den Kern-Widgets gehören:

• Suche. Fügt eine Suchleiste hinzu, damit Besucher Inhalte schnell finden können.
• Neueste Beiträge. Zeigt automatisch Ihre neuesten Artikel an und hilft dabei, die Seitenleisten auf dem neuesten Stand zu halten.
• Kategorienliste und Archiv. Ermöglicht es Besucherinnen und Besuchern, Inhalte nach Thema oder Veröffentlichungsdatum zu durchsuchen.
• Kalender. Zeigt eine Monatsansicht mit Links zu Beiträgen nach Datum.
• Benutzerdefiniertes HTML. Wird häufig verwendet, um Newsletter-Anmeldeformulare, Anzeigenskripte oder Tools von Drittanbietern einzubetten.

Widgets von Drittanbietern

Widgets von Drittanbietern sind Widgets, die Sie durch die Installation eines Plugins hinzufügen, und sie sind dafür ausgelegt, in widgetfähigen Bereichen bestimmte Funktionen bereitzustellen. Diese Art von Widget verbessert die Benutzererfahrung, indem es wichtige Aktionen auf der gesamten Website leichter zugänglich macht.

Beispielsweise fügen E‑Commerce‑Plugins Widgets für Produktkategorien oder Warenkorb‑Vorschauen hinzu, während Social‑Media‑Plugins Social‑Media‑Symbole oder Feed‑Widgets bereitstellen, die Besucher zum Folgen oder zum Teilen von Inhalten animieren. Zugleich fügen Formular-Plugins Widgets hinzu, die Kontakt- oder Anmeldeformulare direkt in Seitenleisten oder Fußzeilen einbetten.

Benutzerdefinierte WordPress-Widgets

Individuelle WordPress-Widgets werden von Entwicklern mit Code erstellt und auf sehr spezifische Anforderungen einer Website zugeschnitten. Sie werden häufig eingesetzt, wenn Standard-Widgets oder -Plugins die erforderliche Funktionalität nicht bieten.

Dazu zählen Widgets, die Öffnungszeiten, standortspezifische Kontaktdaten, Mitarbeiterverzeichnisse oder dynamische Werbeinhalte anzeigen.

Auch wenn benutzerdefinierte Widgets Entwicklungsaufwand erfordern, bieten sie vollständige Kontrolle über Layout, Verhalten und Leistung und sind damit ideal für Unternehmen mit einzigartigen Anforderungen.

Unterschiede zwischen WordPress-Widgets und -Plugins

Ein WordPress‑Plugin fügt auf Website-Ebene Funktionalität hinzu oder verändert sie. Ein Widget ist hingegen eine modulare Komponente der Benutzeroberfläche, die ein bestimmtes Inhaltselement oder eine Funktionalität in einem fest definierten Bereich Ihres Layouts, etwa in der Seitenleiste, der Fußzeile oder dem Kopfbereich, anzeigt.

Plugins können völlig neue Systeme einführen, etwa SEO-Tools, E-Commerce-Plattformen, Sicherheitsfunktionen oder benutzerdefinierte Inhaltstypen, und ihre Auswirkungen erstrecken sich auf Ihre gesamte Website.

Um beispielsweise mit dem Verkauf von Produkten auf Ihrer Seite zu beginnen, würden Sie ein E-Commerce-Plugin installieren.

Widgets hingegen greifen auf bereits vorhandene WordPress-Funktionen oder durch Plugins bereitgestellte Features zurück. Nutzen Sie ein Widget also dann, wenn die gewünschte Funktion bereits existiert und Sie diese lediglich an einer bestimmten Stelle anzeigen möchten. Um beispielsweise Ihre aktuellsten Beiträge in einer Sidebar zu präsentieren, verwenden Sie das Widget für „Neueste Beiträge“.

In den meisten Fällen benötigt eine WordPress-Website sowohl Plugins als auch Widgets.

So fügen Sie WordPress-Widgets hinzu

WordPress-Widgets können nur in Widget-Bereichen platziert werden, also den von Ihrem Theme definierten Layoutbereichen wie Seitenleisten, Fußzeilen oder anderen dafür vorgesehenen Containern. Diese Bereiche dienen als Ablageflächen, auf denen Widgets hinzugefügt, angeordnet und individuell konfiguriert werden können.

Wie Sie WordPress-Widgets hinzufügen, hängt von Ihrem gewählten WordPress-Theme ab. Klassische Themes verwenden im WordPress-Dashboard einen eigenen Widgets -Bereich, während Block-Themes Layout-Elemente über den Website-Editor verwalten.

Da die Systeme unterschiedlich arbeiten, variieren die Schritte zum Hinzufügen von Widgets entsprechend.

So fügen Sie Widgets in Block-Themes hinzu

Wenn Sie ein Block-Theme verwenden, folgen Sie diesen Schritten, um eines der vorinstallierten Widgets zu Ihrer WordPress-Website hinzuzufügen:

1. Gehen Sie im WordPress-Dashboard zu Design → Editor.
2. Wählen Sie im Menü Seiten die Seite aus, die Sie bearbeiten möchten.
3. Bewegen Sie den Mauszeiger über die Stelle, an der Sie ein Widget hinzufügen möchten, bis das Plus-Symbol (+) erscheint.

4. Klicken Sie auf die Schaltfläche „+“, um die Blockliste zu öffnen. Sie können Alle durchsuchen auswählen, um das vollständige Block-Panel zu öffnen.

5. Wählen Sie Ihr Widget aus, und Sie sehen, wie es im Seitenvorschau-Bereich aussieht.
6. Passen Sie das Widget über den Einstellungsbereich an, der erscheint, wenn Sie auf das Widget klicken.

7. Wenn Sie mit der Anpassung fertig sind, klicken Sie auf Speichern.

So fügen Sie Widgets in klassischen Themes hinzu

Klassische Themes verwenden weiterhin ein eigenes Widget-System. Widgets werden über das WordPress-Dashboard hinzugefügt und verwaltet, und Sie können sie nur in widgetfähigen Bereichen hinzufügen, die von Ihrem Theme definiert sind.

So fügen Sie in einem klassischen WordPress-Theme ein Widget hinzu:

1. Navigieren Sie auf Ihrem WordPress-Dashboard zu Design → Widgets.
2. Im Vorschaufenster sehen Sie den verfügbaren Widget-Bereich Ihres Themes. Klicken Sie auf die Schaltfläche +, um ein Widget hinzuzufügen.

3. Wählen Sie das gewünschte Widget aus und passen Sie es bei Bedarf an.

4. Klicken Sie zum Abschluss auf Aktualisieren.

So fügen Sie Widgets mithilfe eines Plugins hinzu

Einige WordPress-Plugins erweitern das Standard-Widget-System, indem sie neue Widgets hinzufügen oder mehr Kontrolle über bestehende Widgets bieten, etwa durch Sichtbarkeitsregeln oder Anzeigeeinstellungen.

Wenn Sie ein klassisches Theme verwenden, können Theme-Companion-Plugins wie Widget Options, RaraTheme Companion oder Custom Sidebars den Funktionsumfang von WordPress-Widgets auf Ihrer Website erweitern.

In Block-Themes, in denen Layouts vollständig mit Blöcken im Site Editor erstellt werden, können widgetbasierte Funktionen eingeschränkt oder nicht verfügbar sein. In diesen Fällen ist es besser, Block-Plugins wie Spectra, Kadence Blocks oder Stackable zu verwenden, um die Funktionalität zu erweitern.

Sobald Sie Ihre bevorzugte Option gefunden haben, installieren Sie das Plugin. Anschließend können Sie die zusätzlichen Widgets mit denselben Schritten hinzufügen und konfigurieren, die in den vorherigen Abschnitten behandelt wurden.

Bewährte Methoden für die Nutzung von WordPress-Widgets

Widgets können Ihre Website verbessern, wenn sie gezielt eingesetzt werden. Wenn sie übermäßig eingesetzt oder schlecht konfiguriert werden, können sie Ihr Layout überladen und die Leistung Ihrer WordPress-Website negativ beeinflussen.

Die folgenden Tipps helfen Ihnen, Widgets strategisch einzusetzen und häufige Fallstricke zu vermeiden.

Priorisieren Sie Relevanz und Minimalismus

Jedes Widget sollte für den Besucher einen klaren Zweck erfüllen. Wenn es die Navigation nicht verbessert, wichtige Inhalte nicht hervorhebt oder Conversions nicht unterstützt, gehört es dort wahrscheinlich nicht hin.

Beispielsweise bietet eine Seitenleiste mit einer Suchleiste, einem kurzen Über-uns-Text und einer Kategorienliste eine hilfreiche Navigation. Ein bloßes Aneinanderreihen dieser Elemente wirkt jedoch schnell überladen und die meisten Besucher werden nicht alles durchscrollen.

Am besten wählen Sie einen minimalistischen Ansatz:

• Konzentrieren Sie sich auf den Nutzen, nicht auf die Dekoration.
• Begrenzen Sie Widgets auf drei bis fünf pro Bereich.
• Halten Sie die visuelle Konsistenz bei Abständen, Ausrichtung und Typografie ein, damit Widgets nicht wie losgelöste Add-ons wirken.

Gut platzierte Widgets sollten Ihre Inhalte unterstützen und nicht mit ihnen konkurrieren.

Berücksichtigen Sie die Leistungsauswirkungen

Jedes Widget fügt Markup, Skripte oder externe Anfragen hinzu. Widgets, die Social-Media-Feeds, eingebettete Karten oder Anzeigenskripte von Drittanbietern laden, verursachen bei jedem Laden einer Seite zusätzliche Serveranfragen. Dies wirkt sich direkt auf die Leistung von WordPress-Websites aus, insbesondere auf Mobilgeräten.

Um zu erkennen, welche Elemente die Ladezeit erhöhen, testen Sie die Geschwindigkeit Ihrer Website mit Tools wie Google PageSpeed Insights oder GTmetrix vor und nach dem Hinzufügen von Widgets.

Widgets, die externe Ressourcen laden, gehören zu den ersten Bereichen, die bei schlechter Website-Performance geprüft werden sollten, da sie zu den häufigsten Gründen zählen, warum Ihre WordPress-Website langsam ist.

Bedenken Sie, dass einige Widgets, wie etwa Ähnliche Produkte, dynamische Inhalte anzeigen, die eventuell Cache-Ausschlüsse erfordern, um korrekt zu funktionieren. Eine fehlerhafte Caching-Konfiguration kann entweder die Funktionalität beeinträchtigen oder Ihre Website verlangsamen.

Prüfen Sie die Kompatibilität vor der Veröffentlichung

Nicht jedes Widget funktioniert nahtlos mit jedem Theme oder in jedem Widget-Bereich.

Zum Beispiel können Widgets, die für breite Fußzeilenbereiche entwickelt wurden, in schmalen Seitenleisten unpassend wirken, und Widgets von Drittanbietern können mit dem CSS oder JavaScript Ihres Themes in Konflikt geraten.

Nutzen Sie für eine Vorschau Ihrer Widgets stets den Customizer, den Website-Editor oder eine Staging-Umgebung, bevor Sie Änderungen veröffentlichen. So können Sie Layout-Probleme, Design-Konflikte oder unerwartetes Verhalten erkennen, bevor diese Ihre Live-Website beeinträchtigen.

Denken Sie „Mobile First”

Viele Themes verschieben Sidebar‑Widgets auf kleineren Bildschirmen unterhalb des Hauptinhalts. Das bedeutet, dass Nutzer von Smartphones oder Tablets möglicherweise den gesamten Artikel scrollen müssen, bevor sie Inhalte der Seitenleiste sehen.

Fragen Sie sich:

• Soll dieses Widget auf Mobilgeräten angezeigt werden?
• Ist es immer noch nützlich, wenn es unterhalb des Inhalts platziert wird?

Verwenden Sie bei Bedarf die Sichtbarkeitseinstellungen, um bestimmte Widgets auf bestimmten Geräten auszublenden.

Häufige Fehler bei der Verwendung von WordPress-Widgets, die es zu vermeiden gilt

Achten Sie auf diese häufigen Fehler, damit Ihre Widgets Ihre Website verbessern und ihr nicht schaden:

• Überladene Widget-Bereiche. Zu viele Widgets verursachen optische Unruhe und verlangsamen die Ladezeiten.
• Schlechte Sortierung. Platzieren Sie die wichtigsten Widgets ganz oben. Nutzer scrollen selten bis zum Ende einer Sidebar.
• Vernachlässigung der mobilen Darstellung. Testen Sie Widgets immer auf Smartphones und Tablets, nicht nur auf Desktop-Bildschirmen.
• Nutzung veralteter Plugins. Prüfen Sie das Datum der letzten Aktualisierung und die Anzahl der aktiven Installationen, bevor Sie ein Widget-Plugin installieren.
• Fehlende Performance-Checks. Analysieren Sie stets, wie sich neue Widgets auf die Leistung Ihrer WordPress-Website auswirken.
• Falsch konfiguriertes Caching. Stellen Sie sicher, dass dynamische Widgets bei Bedarf ordnungsgemäß vom Cache ausgeschlossen werden

Nächster Schritt: Ein benutzerdefiniertes WordPress-Widget erstellen

Standard-Widgets und Plugin-gestützte Widgets decken die meisten gängigen Anforderungen ab. Doch wenn Sie etwas benötigen, das genauer auf Ihre Website zugeschnitten ist, ermöglicht Ihnen das Erstellen eines benutzerdefinierten Widgets, genau die Funktionalität hinzuzufügen, die Sie benötigen.

Sie möchten beispielsweise Öffnungszeiten, eine dynamische Liste auf Grundlage benutzerdefinierter Beitragstypen oder eine wiederverwendbare, auf Ihre Marke zugeschnittene Call-to-Action anzeigen. Mit einem benutzerdefinierten Widget haben Sie die volle Kontrolle über Ausgabe, Layout und Verhalten.

Das Erstellen eines benutzerdefinierten Widgets erfordert praktische Kenntnisse in PHP, da WordPress darauf basiert. Sie müssen außerdem verstehen, wie die WP_Widget -Klasse funktioniert, sowie grundlegendes HTML und CSS, um die Ausgabe des Widgets zu strukturieren und zu gestalten.

Wenn Sie wissen, wie Themes und Plugins in WordPress zusammenwirken, verläuft der Prozess reibungsloser, aber Sie müssen kein fortgeschrittener Entwickler sein, um loszulegen.

Wenn Sie daran interessiert sind, selbst eines zu erstellen, folgen Sie unserer Schritt-für-Schritt-Anleitung zum Erstellen eines benutzerdefinierten Widgets in WordPress.

Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Normen.

Erstellt von

Vera P.

Vera ist eine erfahrene Lokalisierungs-Spezialistin bei Hostinger und optimiert erfolgreich Inhalte für globale Zielgruppen. Dank ihres umfassenden SEO-Wissens sorgt sie dafür, dass Hostingers Webhosting-Dienste für ein breites Publikum sichtbar, zugänglich und attraktiv sind. Mit Kreativität mit Präzision überwindet sie Sprachbarrieren in ihren Projekten und trägt so dazu bei, Hostingers Reichweite zu vergrößern und Kunden weltweit ein nahtloses Erlebnis zu bieten.

Mehr von Vera P.