Der vollständige Leitfaden zu WordPress Widgets: Wie man sie verwendet, hinzufügt und implementiert, um deine Webseite anzupassen

WordPress-Widgets sind unglaublich nützlich. Sie ermöglichen es dir, alle Arten von zusätzlichen Inhalten zu deiner Webseite außerhalb des Beitrags oder der Seite selbst hinzuzufügen und die Benutzer dazu anzuregen, Informationen zu erhalten, Links zu folgen oder Maßnahmen zu ergreifen.

In diesem Beitrag werde ich dir alles zeigen, was du über WordPress-Widgets wissen musst. Wie man sie auf der Webseite einfügt, wie man Widget-Bereiche zum Einfügen der Widgets erstellt, wie man Plugins installiert, mit denen man mehr davon erhält, wie man eigene Widgets programmiert und vieles mehr.

Beginnen wir zunächst mit der Frage was WordPress-Widget sind.

Was sind WordPress-Widgets?

In WordPress sind Widgets Inhaltsausschnitte, die außerhalb des Flusses der Seite leben oder Inhalte veröffentlichen.

Widgets enthalten Informationen, Navigation oder Medien, die von einem einzelnen Beitrag oder einer Seite getrennt sind. In den meisten Fällen wird jedes Widget auf jeder Seite der Webseite angezeigt, aber man kann auch Widget-Bereiche für bestimmte Seiten, wie z.B. die Startseite, einrichten.

Um ein Widget zu deiner Webseite hinzuzufügen, musst du es zu einem Widget-Bereich hinzufügen. Widget-Bereiche werden von deinem Theme erstellt, da sie sich auf das Design und Layout deiner Webseite bezieht und nicht auf die Funktionalität.

Die meisten WordPress-Themes haben Widget-Bereiche in der Seitenleiste und in der Fußzeile, obwohl einige an vielen Stellen mehrere Widget-Bereiche haben, z.B. unter oder über dem Inhalt oder in der Kopfzeile.

Der folgende Screenshot einer meiner eigenen Seiten zeigt Widgets in der Seitenleiste und in der Fußzeile.

WordPress wird mit einer Reihe vorinstallierter Widgets geliefert, so dass man sie verwenden kann, ohne Plugins installieren oder Code schreiben zu müssen. Man kann aber auch viele weitere Widgets hinzufügen, indem man Plugins installiert oder eigenen Code schreibt.

Diese können eine große Bandbreite von Inhaltstypen abdecken, wie z.B. Medien, Social Media Feeds, Navigation, Suche, Karten und vieles mehr. Es gibt nur sehr wenig, was du auf deiner Webseite haben möchtest, für das du kein Widget finden kannst. Tatsächlich besteht die größte Herausforderung oft darin, sich zwischen allen Optionen zu entscheiden und nicht zu übertreiben.

Wann sind WordPress Widgets zu verwenden?

Ein Widget eignet sich immer dann, wenn man einer oder mehreren Seiten seiner Webseite zusätzlichen Inhalt hinzufügen möchte (und wenn ich Seite sage, schließe ich Beiträge, Archive usw. ein), aber das gehört nicht zum Inhalt dieser Seite. Sie sind besonders nützlich für Inhalte, die man auf jeder Seite der Webseite anzeigen möchte, wie z.B. eine Liste der neuesten Beiträge, einen Einkaufswagen oder eine Schaltfläche zum Aufruf von Aktionen.

Überlege dir, wie viele Benutzer auf jedes Widget zugreifen müssen und wie wichtig es ist, wenn du entscheidest, wo es platziert werden soll. Die Widgets in der Seitenleiste werden stärker hervortreten als die in der Fußzeile, die manche Benutzer vielleicht nicht einmal sehen.

Ein Widget für die neuesten Beiträge oder einen Call to Action könnte also besser in der Seitenleiste platziert werden, wo die Leute mehr Möglichkeiten haben, mit ihnen zu interagieren, während ein Social Media-Feed in die Fußzeile gelangen könnte.

Wenn das Theme auch spezielle Widget-Bereiche für die Startseite hat, könnte es sinnvoll sein, diese für die Navigation durch die Abteilungen deiner Webseite, für Listen mit relevanten Inhalten oder für Medien wie ein Video zur Begrüßung der Besucher der Webseite zu verwenden.

11 Beispiele für Widgets in WordPress

Die Möglichkeiten, die die WordPress Widgets bieten, lassen sich am besten anhand einiger Beispiele verstehen. Schauen wir uns elf Arten von Widgets an, die man häufig auf WordPress-Seiten sieht.

1. Widget für neue Beiträge

Das neue Beiträge Widget ist möglicherweise das am häufigsten verwendete Widget in Blogs.

Mit ihm kann man eine Liste der neuesten Beiträge in der Seitenleiste oder in der Fußzeile jeder Seite der Webseite anzeigen, wodurch die Möglichkeit erhöht wird, dass die Leute die Webseite durchsuchen und eine Reihe von Beiträgen lesen.

Das Widget Letzte Beiträge ist in WordPress vorinstalliert. Du kannst damit einstellen, wie viele Beiträge du anzeigen und welche Überschrift du dem Widget geben willst.

Wenn man zusätzliche Funktionalität hinzufügen möchte, kann man ein Plugin für ein alternatives Widget wie WordPress Beliebte Beiträge installieren, das die beliebtesten Inhalte anzeigt. Alternativ dazu wird das Advanced Random Posts Widget jedes Mal aktualisiert, wenn der Benutzer einen neuen Screen besucht.

2. Widget für Neueste Kommentare

Willst du den Besuchern zeigen, wie lebendig deine Webseite ist und wie sehr sich dein Publikum mit deinen Inhalten beschäftigt?

Das Widget „Aktuelle Kommentare“ zeigt die neuesten Kommentare auf der Webseite an und gibt den Besuchern die Möglichkeit, direkt zu diesen Kommentaren zu navigieren und sich an der Diskussion zu beteiligen.

Das Widget „Aktuelle Kommentare“ wird mit WordPress geliefert. Auch hier lässt sich ein Plugin für Kommentare von Drittanbietern wie das WP Social Comments Widget installieren, das es den Nutzern ermöglicht, Kommentare über ihr Facebook-Konto zu verfassen: gut für das Engagement in sozialen Medien.

3. Call to Action Widgets

Ein großer Nutzen eines Widgets besteht darin, die Menschen zum Handeln zu ermutigen, und das kann man mit einem Call to Action-Widget tun.

Das Widget kann eine einfache Schaltfläche sein, oder man könnte mit einem Text- oder HTML-Widget oder sogar einem Bildwidget, die alle in WordPress vorinstalliert sind, etwas Maßgeschneidertes erstellen.

Auf einer meiner eigenen Seiten habe ich ein Call to Action-Widget erstellt, das die Leute dazu anregt, sich in meine Mailingliste einzutragen. Dabei wird das integrierte HTML-Widget verwendet, in das ich ein Bild, etwas Text und eine Schaltfläche, die ich in HTML programmiert habe, eingefügt habe.

4. Navigations-Widgets

Du kannst auch Widgets verwenden, um die Leute dazu anzuregen, auf deiner Webseite zu navigieren.

Dafür gibt es einige Optionen: die Kategorien oder Tag Cloud Widgets und das Navigationsmenü-Widget.

Mit dem Navigationsmenü-Widget kann man ein benutzerdefiniertes Navigationsmenü sowie das Hauptnavigationsmenü auf der Webseite erstellen und dieses dann einem Widgetbereich hinzufügen.

Du könntest sogar dein Hauptnavigationsmenü zu einem Widget-Bereich hinzufügen, obwohl dies nur funktioniert, wenn du ein kleines Navigationsmenü hast.

Das Hinzufügen eines Navigationsmenüs in der Fußzeile deiner Webseite wird Menschen, die das Ende eines Beitrags erreichen, dazu ermutigen, auf deiner Webseite zu navigieren. Es ist besonders hilfreich für mobile Benutzer, die möglicherweise viel scrollen müssen, um nach dem Erreichen des Endes eines Beitrags wieder zum Hauptnavigationsmenü zu gelangen.

Alternativ dazu kannst du das integrierte Kategorien-Widget verwenden, um eine Liste der Kategorien auf deiner Seite anzuzeigen, oder das Tag Cloud Widget, um den Zugriff auf Tag-Archive zu erleichtern.

5. Medien-Widgets

Durch das Hinzufügen von Medien zu der Seiten- oder Fußzeile wird die Seite zum Leben erweckt und bietet den Benutzern etwas zum Anschauen oder Interagieren.

Mit dem integrierten Bildwidget kannst du jedes beliebige Bild in der Seiten- oder Fußleiste anzeigen und es ermöglicht dir, dieses Bild auch in einen Link zu verwandeln.

Alternativ dazu lässt das Video-Widget dich Videos von YouTube oder Vimeo direkt in den Widget-Bereich deiner Webseite streamen. Dies ist besonders nützlich, wenn deine Webseite spezielle Widget-Bereiche für die Startseite hat, kann aber auch gut in der Fußzeile sein, um die Aufmerksamkeit der Leute zu erregen, wenn sie das Ende eines Posts erreichen.

6. Social Media Widgets

Wenn du dich mit Menschen, die deine Webseite über soziale Medien besuchen, in Verbindung setzen möchtest, zeigt dein Social-Media-Feed in der Seitenleiste oder in der Fußzeile deiner Webseite den Menschen, dass du in sozialen Medien aktiv bist, und ermutigt sie, dich zu liken oder dir zu folgen.

Eine Möglichkeit, Zugang zu Social-Media-Widgets für die größten Plattformen (Facebook, Twitter, Instagram) zu erhalten, ist die Installation des Jetpack-Plugins, das all diese und viele weitere enthält.

Alternativ dazu haben alle Social-Media-Plattformen ihre eigenen Plugins, die kostenlos über das Plugin-Verzeichnis verfügbar sind. Oder man findet Plugins von Drittanbietern, mit denen man die Art und Weise, wie man seinen Social-Media-Feed anzeigt, anpassen kann.

7. Warenkorb-Widget

Wenn du einen E-Commerce-Shop auf deiner Webseite mit einem Plugin wie WooCommerce betreibst, ist es eine gute Idee, ein Warenkorb-Widget einzubauen, damit die Benutzer einfach zu ihrem Warenkorb navigieren können, egal wo sie sich im Shop befinden.

Du könntest dies in die Seitenleiste einfügen, wo es für die Leute leicht zu sehen ist, oder in die Kopfzeile, um die Sichtbarkeit zu erhöhen, wenn dein Theme dort einen Widget-Bereich enthält.

E-Commerce-Plugins wie WooCommerce enthalten Einkaufswagen-Widgets und andere E-Commerce-Widgets als Teil des Plugins. Wenn du also einmal E-Commerce zu deiner Webseite hinzugefügt hast, findest du sie auf deinem Widgets-Bildschirm.

8. Formular-Widget

Wenn du möchtest, dass Leute dich kontaktieren, Fragen stellen oder sich in eine Mailingliste eintragen, kannst du ein Formular in deine Seitenleiste einfügen.

Es gibt kein Formular-Widget in WordPress, aber man könnte Plugins hinzufügen, um diese zur Verfügung zu stellen, wie z.B. das kostenlose Contact Form 7 oder die hochwertigen, aber sehr leistungsfähigen Gravity Forms.

9. Karten-Widget

Wenn dein Unternehmen an einem physischen Standort angesiedelt ist und du möchtest, dass dich die Leute leicht finden können, hilft es, ein Karten-Widget zu deiner Webseite hinzuzufügen.

Es gibt eine Reihe kostenloser Google-Maps-Widget-Plugins, die man verwenden kann, z. B. das WP-Google-Maps-Plugin.

Wenn man kein Plugin installieren möchte, kann man alternativ den Einbettungscode von Google Maps holen und diesen einem HTML-Widget hinzufügen.

10. Anmelde-Widget

Wenn du eine Mitgliedschafts-Webseite betreibst, erleichtert ein Login-Widget den Leuten das Einloggen in deine Webseite, ohne dass sie zu einer separaten Login-Seite gehen müssen.

Das Meta-Widget, das mit WordPress geliefert wird, enthält einen Login-Link, aber es enthält auch andere Dinge, die man vielleicht nicht möchte, daher würde ich empfehlen, dafür ein separates Plugin aus dem Plugin-Verzeichnis zu verwenden.

Das Login with Ajax-Widget gibt dir ein Login-Formular in deinem Widget, was bedeutet, dass sich die Leute von jeder Seite aus in deine Seite einloggen können.

11. Such-Widget

Ein wirklich einfaches, aber unglaublich nützliches Widget ist das Such-Widget, das mit WordPress vorinstalliert ist.

Füge dies in deine Seitenleiste oder Kopfzeile ein, und du machst es für die Leute einfacher, Dinge auf deiner Webseite zu finden.

Wenn du die Leistung deines Such-Widgets erhöhen möchtest, kannst du das kostenlose WP-Widget Google Search installieren, das die Google-Suche verwendet.

Wie man Widgets zu seiner WordPress-Seite hinzufügt

Sobald man sich für die Art von Widgets entschieden hat, die man für seine WordPress-Seite benötigt, ist es an der Zeit, diese zu installieren.

Lasst euch nicht dazu verleiten, zu viele hinzuzufügen. Je mehr Widgets es gibt, desto weniger werden sie von den Benutzern bemerkt. Konzentriere dich stattdessen auf zwei oder drei Schlüsselwidgets für die Seitenleiste. Du kannst mehr in die Fußzeile einfügen, wo sie ohnehin weniger wichtig sind.

Und wenn du zusätzliche Widget-Bereiche in deinem Theme hast, entscheide, welche Widgets du in diese einfügen möchtest. Stelle sicher, dass sie zum Layout und Design deiner Webseite passen.

Es gibt drei Möglichkeiten, Widgets hinzuzufügen:

• Verwende die Widgets, die bereits mit WordPress geliefert werden.
• Füge ein Widget eines Drittanbieters aus dem Plugins-Verzeichnis
• Kaufe ein Premium-Plugin, das ein Widget enthält.

Widgets für deine WordPress-Seite finden

Es gibt eine große Auswahl an verfügbaren Widgets, so dass es schwierig sein kann, sich für eines zu entscheiden. Lasst uns einen Blick auf die Optionen werfen und dann prüfen, wie du das beste für dich auswählen kannst.

Widgets, die mit WordPress geliefert werden

Wenn eines der vorinstallierten Widgets das tut, was du brauchst, dann benutze es. Das spart Zeit, und es bedeutet, dass weniger Code auf deiner Webseite läuft.

Die vorinstallierten Widgets sind:

• Archive: Link zu den Archiven nach Monat, für Blogs konzipiert, aber inzwischen eher veraltet.
• Kalender: ein Kalender deiner Beiträge, wiederum geeignet für Blogs, besonders wenn deiner zeitkritisch ist (aber heutzutage nicht so häufig).
• Benutzerdefiniertes HTML: die ultimative Flexibilität, füge beliebige Inhalte durch Eintippen oder Einfügen in das HTML ein (wie Google-Formulare). Vermeide es, wenn du dich mit der Programmierung nicht wohl fühlst.
• Bild: Zeige ein Bild aus deiner Medienbibliothek an.
• Navigationsmenü: Zeige das Hauptnavigationsmenü oder ein separates, von dir erstelltes Menü an.
• Letzte Kommentare: eine Liste der letzten Kommentare mit Links zu diesen.
• Tag Cloud: eine Liste von Tags in einem Cloudformat, mit Links zu den entsprechenden Archiven.
• Video: ein Video von YouTube oder einem anderen Streaming-Dienst einbetten.
• Audio: einen Podcast, einen Player, ein Lied oder andere Audioclips einbetten (Vorschlag: Wie starte ich einen Podcast mit WordPress).
• Kategorien: eine Liste der Kategorien in deinem Blog, mit Links zu den Archivseiten.
• Galerie: fortgeschrittener als das Bildwidget, zeige eine Bildergalerie
• Meta: Metadaten wie Login-Links und RSS-Feeds. Ein Überbleibsel aus den frühen Tagen von WordPress und heute nicht mehr sehr nützlich.
• Seiten: Zeige eine Liste der Seiten deiner Webseite mit Links an.
• Neueste Beiträge: Zeige eine Liste deiner neuesten Beiträge an, um die Leute zum Lesen zu ermutigen.
• Suche: ein einfaches Suchfeld.
• Text: jeder Text, den du hinzufügen möchtest, z.B. Informationen über die Webseite.

Hinzufügen von Widgets mit einem Plugin

Das WordPress-Plugin-Verzeichnis enthält tausende von kostenlosen Widgets-Plugins, die dir mehr Widgets zur Auswahl bieten.

Darüber hinaus enthalten viele andere Plugins auch Widgets, wie z.B. ein E-Commerce-Plugin, das dir ein Warenkorb-Widget und mehr bietet.

Wenn das Plugin-Verzeichnis nicht das von dir benötigte Plugin enthält, kannst du dich entscheiden, ein Premium-Plugin hinzuzufügen. Manchmal bieten diese mehr Funktionen oder eine intuitivere Schnittstelle. Aber manchmal findet man die gleichen Funktionen auch in einem kostenlosen Plugin, also suche das Plugin-Verzeichnis gut durch, bevor du für Plugins bezahlst.

Wie man das richtige Widget für seine Webseite findet

Um das richtige WordPress Widget für sich zu finden, folge diesen Tipps:

1. Identifiziere genau, was du von dem Widget benötigst. Welche Funktionalität muss es haben und wie soll es aussehen? Muss es mit APIs von Drittanbietern verknüpft werden?
2. Überprüfe die integrierten Widgets, um zu sehen, ob eines deinen Bedürfnissen entspricht. Teste alle relevanten Widgets, wenn du ein geeignetes findest, ist das großartig. Wenn nicht…
3. Prüfe das Plugin-Verzeichnis, auf das du über Plugins > Add New zugreifen kannst. Versuche, nach mehr als einem Begriff zu suchen, um das richtige Plugin für dich zu finden, und suche mit und ohne das Wort ‚Widget‘. Manchmal enthält ein Plugin, das nicht auf Widgets ausgerichtet ist, ein Widget als Teil eines größeren Funktionsumfangs.
4. Wenn du unter den kostenlosen Plugins nichts Passendes finden kannst, suche nach einem Premium-Plugin. Bitte andere WordPress-Benutzer um Empfehlungen und sehe dir die Bewertungen an, bevor du dich für ein Plugin entscheidest.

Welches Widget man auch immer wählt, man muss es testen, um zu überprüfen, ob es so funktioniert, wie man es sich wünscht. Wenn du ein Premium-Plugin kaufst, empfehle ich dir, ein Plugin mit Geld-zurück-Garantie oder eine kostenlose Testphase zu kaufen, falls es nicht das Richtige für dich ist.

Wie man Widgets zur Seitenleiste und Fußzeile in WordPress hinzufügt

Jetzt, wo du dein Widget ausgewählt hast, ist es an der Zeit, es zu deiner Webseite hinzuzufügen.

Du kannst Widgets zu allen aktiven Widget-Bereichen hinzufügen, die von deinem Theme bereitgestellt werden. Wenn dein Theme an der gewünschten Stelle keinen Widget-Bereich hat, versuche, nach einem alternativen Theme zu suchen.

Später in diesem Beitrag werde ich dir zeigen, wie du deinen eigenen Widget-Bereich programmieren kannst.

Es gibt zwei Möglichkeiten, Widgets zu deiner Webseite hinzuzufügen:

• Mit Hilfe des Customizers. Gehe im Admin-Menü auf Darstellung > Anpassen > Widgets oder Anpassen > Widgets aus der Admin-Leiste am oberen Bildschirmrand.
• Über den Widgets-Administrationsbildschirm. Gehe zu Darstellung > Widgets im Admin-Menü oder klicke in der Admin-Leiste auf Anpassen > Widgets.

Ich werde euch in Kürze zeigen, wie man diese beiden Methoden anwendet, aber lasst uns zuerst einen Blick auf die Widget-Bereiche werfen und wie ihr die mit eurem Theme nutzen könnt.

Widgets sind nicht nur für die Sidebar

Je nach deinem WordPress-Theme kannst du Widget-Bereiche an mehreren Stellen finden.

Die meisten Themes haben Widget-Bereiche in der Seitenleiste und in der Fußzeile. Einige haben sie aber auch an anderen Stellen, wie unter oder über dem Inhalt oder in der Kopfzeile.

Wenn du in der WordPress-Administration den Bildschirm mit den Widget-Einstellungen aufrufst, kannst du alle Widget-Bereiche in deinem Theme sehen.

Ich verwende ein Theme mit mehreren Widget-Bereichen an vielen Stellen. Im untenstehenden Screenshot sieht man, dass es Widget-Bereiche über und unter dem Inhalt, in der Kopfzeile, unter der Hauptfußzeile gibt.

Wenn man Widgets an anderen Stellen auf der Webseite hinzufügen möchte, ist es sinnvoll, ein Theme zu finden, das mehrere Widget-Bereiche hat. Die beste Möglichkeit dazu ist die Verwendung eines Framework-Themes.

Ein gutes Beispiel für ein Widget an einer Stelle in dem Theme, die nicht die Seitenleiste oder die Fußzeile ist, ist das Hinzufügen einer Suchleiste in der Kopfzeile, wie ich sie auf einer meiner Webseite habe.

Widget Bereiche und Themes

Widget-Bereiche sind in den Themevorlagendateien sowie in der Themefunktionsdatei programmiert.

Hier sieht man den Code, den ich in meiner Themefunktionsdatei verwendet habe, um einen Widget-Bereich hinzuzufügen, der in den Header geht.
Here you can see the code I’ve used in my theme functions file to add a widget area that will go in the header.

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

Und hier ist der Code in meiner Datei header.php, der diesen Widget-Bereich an der richtigen Stelle im Theme hinzufügt.

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

Wenn man zusätzliche Widget-Bereiche in seinem Theme hinzufügen möchte, muss man dieselbe Art von Code hinzufügen. Ich werde dir später in diesem Beitrag zeigen, wie man das macht.

Vergiss nicht, dass, wenn dein Theme nicht so viele Widget-Bereiche hat, wie du gerne hättest, du immer eine von zwei Sachen machen kannst:

• Finde ein Theme, das Widget-Bereiche hat, wo du sie haben willst.
• Programmiere den neuen Widget-Bereich in dein Theme oder in das Child-Theme

Sobald du an allen gewünschten Stellen in deinem Theme Widget-Bereiche hast, kannst du damit beginnen, ihnen Widgets hinzuzufügen.

Wie man den Widgets Screen zum Hinzufügen von Widgets verwendet

Es gibt zwei Möglichkeiten, Widgets zu deiner WordPress-Seite hinzuzufügen. Die erste Möglichkeit ist die Verwendung des Widgets-Bildschirms im WordPress-Admin.

Klicke auf Darstellung > Widgets. Dadurch wird der Widget Screen angezeigt.

Um ein Widget hinzuzufügen, kannst du eines von zwei Dingen tun:

• Ziehe es aus der Liste der Widgets auf der linken Seite in den entsprechenden Widgetbereich.
• Klicke auf das Widget, das du hinzufügen möchtest, und du siehst eine Liste, wo du es hinzufügen kannst. Wähle den gewünschten Widgetbereich aus und klicke auf die Schaltfläche Add Widget.

Eventuell muss dann bearbeitet werden, wo das Widget innerhalb des Widgetbereichs positioniert ist.

Du kannst so viele Widgets zu jedem Widgetbereich hinzufügen, wie du willst, aber übertreibe es nicht. Du kannst sie innerhalb des Widget-Bereichs herumziehen, um sie in die richtige Reihenfolge zu bringen. Du kannst sie auch von einem Widgetbereich in einen anderen ziehen, wenn dir ihr Aussehen nicht gefällt.

Du kannst auch deine Tastatur benutzen, um Widgets über den Widgets-Bildschirm hinzuzufügen. Wenn du also keinen Zugang zu einer Maus hast, kannst du trotzdem Widgets hinzufügen.

Hinzufügen und Bearbeiten von Widgets im Zugänglichkeitsmodus

Wenn man keine Maus verwenden kann, kann man den Widgets-Bildschirm mit einer Tastatur verwenden.

Bringe zunächst den Bildschirm in den Zugänglichkeitsmodus, indem du auf den Link Zugänglichkeitsmodus aktivieren oben rechts auf dem Bildschirm klickst (oder mit der Tabulatortaste ansprichst und auswählst).

Der Bildschirm wird dann so geändert, dass er die Tatsache widerspiegelt, dass man sich im Zugänglichkeitsmodus befindet.

Du kannst dann mit der Tabulatortaste auf deiner Tastatur zwischen den Elementen des Bildschirms navigieren und mit der Eingabetaste ein Element auswählen und darauf reagieren. Du kannst entweder mit der Tabulatortaste zu einem Widget gehen, Return auf dem Link Hinzufügen drücken und dann auswählen, wo du es hinzufügen möchtest, oder mit der Tabulatortaste zum Widget-Bereich gehen und Return auf dem Link Bearbeiten drücken.

Wie man den WordPress Customizer zum Hinzufügen von Widgets verwendet

Wenn man den Customizer zum Hinzufügen von Widgets anstelle des Widgets-Bildschirms verwendet, bedeutet dies, dass man die Widgets beim Hinzufügen sehen kann. Dies erleichtert es dir, zu sehen, wie deine Widgets aussehen werden, und sie zwischen den Widget-Bereichen zu verschieben, wenn du das möchtest.

Klicke im Admin-Menü auf Darstellung > Anpassen. Alternativ dazu reicht ein Klick in der Verwaltungsleiste am oberen Bildschirmrand der Live-Site (vorausgesetzt, man ist angemeldet) auf Anpassen. Dadurch wird der Customizer geöffnet.

Jetzt klicke auf die Option Widgets und du wirst eine Liste aller Widget-Bereiche in deinem Theme sehen. Klicke auf den Widget-Bereich, zu dem du ein Widget hinzufügen möchtest, und klicke auf die Schaltfläche Add a widget.

Dadurch erhält man eine Liste aller für deine Webseite verfügbaren Widgets. Dazu gehören alle integrierten Widgets, die mit WordPress geliefert wurden, sowie alle Widgets, die du über Plugins hinzugefügt hast.

Wähle das Widget aus, das du diesem Widgetbereich hinzufügen möchtest, und du siehst es im Vorschaubildschirm auf der rechten Seite.

Du kannst die Widgets neu ordnen, indem du sie auf der linken Seite nach oben und unten ziehst oder indem du auf den Link Neu ordnen unter der Liste der Widgets klickst und dann auf die Pfeile klickst, um sie nach oben und unten zu verschieben.

Wenn du mit dem Hinzufügen von Widgets über den Customizer fertig bist, vergiss nicht, auf die Schaltfläche Veröffentlichen oben links zu klicken, damit deine Änderungen gespeichert werden. Wenn du den Customizer verlässt, ohne dies zu tun, wird keine deiner Änderungen auf der Live-Site reflektiert.

Sobald du deine Widgets hinzugefügt hast, schau sie dir bitte an und überprüfe, wie sie in das Design deiner Seite passen. Wenn du zu viele Widget-Bereiche hinzugefügt hast, könnte es etwas unordentlich aussehen. Du musst entweder einige von ihnen entfernen oder du kannst sie von einem Widget-Bereich in einen anderen verschieben.

Das geht ganz einfach auf dem Bildschirm Widgets, wo man Widgets zwischen den Widget-Bereichen ziehen kann.

Wie man Widgets zu einer Seite in WordPress hinzufügt

Einige Themes umfassen Widget-Bereiche, die nur für bestimmte Seiten bestimmt sind, wie die Homepage. Aber was ist, wenn man ein Widget nur für eine Seite auf der eigenen Webseite hinzufügen möchte?

Du kannst dies im Gutenberg-Post- und Seiteneditor tun.

Füge einen neuen Block auf die übliche Weise hinzu und wähle dann den Blocktyp Widgets.

Du kannst dann aus vielen der Widgets, die du für deine Webseite aktiviert hast, auswählen und sie zum Inhalt deines Beitrags oder deiner Seite hinzufügen. Es ist wirklich nützlich, wenn du ein Formular-Widget, ein Aktionsaufruf-Widget oder eine Liste deiner letzten Beiträge hinzufügen möchtest.

Wie man Widgets bearbeitet

Sobald man Widgets zu seiner Webseite hinzugefügt hat, kann man Änderungen an ihnen vornehmen. Für einzelne Widgets gibt es Einstellungen, auf die du entweder über den Widgets-Bildschirm oder den Customizer zugreifen kannst (es spielt keine Rolle, welche dieser Einstellungen du zum Hinzufügen des Widgets verwendet hast).

Einige Widgets enthalten keine Einstellungen, aber andere haben Einstellungen für den Widgettitel oder die Anzahl der angezeigten Beiträge. Einige sind komplizierter und erfordern, dass man das Widget auf einer separaten Einstellungsseite einrichtet. Prüfe die Dokumentation des Entwicklers deines Plugins.

Die Optionen, die du für die Bearbeitung von Widgets hast, umfassen

• Bearbeiten der Einstellungen für das Plugin.
• Verschieben des Widgets von einem Widgetbereich in einen anderen.
• Entfernen des Widgets. Dazu hast du zwei Optionen, die wir uns in Kürze ansehen werden.

Um die Einstellungen für das Widget zu bearbeiten, suche das Widget im Widget-Bildschirm oder im Customizer und bearbeite einfach alle angebotenen Optionen.

Um das Widget von einem Bereich in einen anderen zu verschieben, öffne den Widget-Bildschirm und ziehe es von einem Widget-Bereich in einen anderen. Navigiere im Zugänglichkeitsmodus zum Pfeil rechts neben dem Widget und wähle aus den Optionen aus.

Löschen von Widgets

Um ein Widget auf dem Bildschirm Widgets zu löschen, suche dieses Widget und klicke auf den Lösch-Link unten links im Feld Widget-Einstellungen.

Um ein Widget im Customizer zu löschen, suche das Widget in seinem Widget-Bereich. Klicke auf den Pfeil rechts neben dem Namen des Widgets und dann auf den Link Entfernen links unten in den Widget-Einstellungen.

Du kannst auch ein Widget aus einem Widgetbereich entfernen, es aber trotzdem für eine spätere Verwendung über den Widgetbildschirm verfügbar machen.

Scrolle zum Bereich Inaktive Widgets am unteren Bildschirmrand. Ziehe die Widgets in diesen Bereich, um sie aus dem Widget-Bereich zu entfernen, aber mit ihren aktuellen Einstellungen als Entwürfe zu behalten. Du kannst sie dann jederzeit wieder in einen Widget-Bereich ziehen, wenn du das in Zukunft möchtest.

Wenn du das Theme wechselst und dein neues Theme andere Widget-Bereiche hat, werden alle Widgets, die nicht in die Widget-Bereiche des neuen Themes passen, von WordPress automatisch in die Liste der inaktiven Widgets verschoben.

Wie man einen neuen Widget Bereich zu seinem Theme hinzufügt

Wenn dein Theme keine Widget-Bereiche hat, wo du sie haben willst, kannst du jederzeit deine eigenen hinzufügen. Dazu muss man zwei Teile des Codes hinzufügen.

Fügen wir einen Widget-Bereich unterhalb des Inhalts hinzu.

Erstellen des Widget-Bereichs in deiner Themefunktionsdatei

Der erste Schritt ist das Einrichten des Widget-Bereichs mit der Funktion register_widget().

Wenn du ein WordPress-Theme eines Drittanbieters verwendest (hier ist eine Auswahl der besten), musst du dafür ein Child-Theme erstellen. Der Grund dafür ist, dass alle deine Änderungen verloren gehen, wenn du das Theme in der Zukunft aktualisierst.

Wenn du mit deinem eigenen Theme arbeitest, kannst du das Theme einfach bearbeiten.

Beginne damit, die Datei functions.php deines Themes zu öffnen. Füge am Ende der Datei diesen Code hinzu.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Speichere jetzt deine functions.php-Datei. Wenn du zu deinem Widgets-Bildschirm oder dem Customizer gehst, findest du den neuen Widget-Bereich, der dir zum Hinzufügen von Widgets zur Verfügung steht.

Aber wenn man das tut, werden sie nicht wirklich auf der Seite angezeigt. Das liegt daran, dass du etwas Code zu deiner Themevorlagendatei hinzufügen musst.

Das Widget zu einer Themevorlagendatei hinzufügen

Als erstes muss herausgefunden werden, welche Themevorlagendatei du verwenden musst.

• Wenn du eine zusätzliche Seitenleiste hinzufügst, dann musst du diesen Code zu deiner Datei php hinzufügen.
• Wenn du deinen Widget-Bereich vor oder nach dem Inhalt hinzufügst, musst du ihn zu den Themevorlagendateien hinzufügen, die den Inhalt ausgeben.
• Wenn du einen Widget-Bereich zu deinem Header hinzufügst, musst du den Code zu deiner header.php-Datei hinzufügen.
• Wenn dein neuer Widget-Bereich nur für eine Seite deiner Webseite oder für eine Art von Inhalt bestimmt ist, musst du die WordPress-Template-Hierarchie verwenden, um genau herauszufinden, welche Template-Datei du entweder verwenden/erstellen und dann bearbeiten musst. Wenn du zum Beispiel Widget-Bereiche zu deiner Homepage hinzufügen möchtest, musst du eine Datei namens front-page.php erstellen und dort deinen Widget-Bereich hinzufügen.

Wenn du herausgefunden hast, welche Vorlagendatei du bearbeiten musst und wo genau du den Code für den Widgetbereich haben musst, füge den folgenden Code hinzu. Im Falle eines Widget-Bereichs nach dem Inhalt fügen wir ihn der Datei post.php und page.php in unserem Theme hinzu:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

Speicher nun deine Vorlagendatei(en).

Beachte, dass sich dein Code von meinem unterscheidet, je nachdem, wie du deinen Widgetbereich genannt hast und welche Elemente du darin platzieren möchtest. Ich benutze im Allgemeinen ein Nebenelement, weil sie meiner Meinung nach für Seitenleisten und Widget-Bereiche konzipiert sind.

Ninja-Tipp: Wenn man das Ende des Containerelements für den Inhalt an den Anfang der Seitenleiste und/oder der Fußzeile verschiebt, dann kann man es dort einfügen und muss es nur einmal hinzufügen.

Wenn du dir jetzt deine Webseite anschaust, wirst du feststellen, dass alle Widgets, die du zu deinen Widget-Bereichen hinzugefügt hast, an der richtigen Stelle erscheinen. Wenn sie nicht ganz an der richtigen Stelle sind, gehe zurück und bearbeite deine Vorlagendateien und stelle sicher, dass sich der Code an der Stelle befindet, wo du ihn haben willst. Möglicherweise musst du auch dein CSS bearbeiten, damit es so aussieht, wie du es haben willst.

Wie man Widgets mit der Widgets-API programmiert.

Jetzt weißt du also, wie du Widgets für deine Webseite auswählst, wie du sie zu deiner Webseite hinzufügst und wie du neue Seitenleisten oder Widget-Bereiche erstellst. Im nächsten Schritt zeige ich dir wie man eine WordPress Widget erstellt.

Manchmal stellt man vielleicht fest, dass es kein Plugin gibt, mit dem man genau das Widget erstellen kann, das man auf seiner Webseite haben möchte. Das bedeutet, dass du es selbst programmieren musst.

In diesem Beispiel werde ich dir zeigen, wie man ein wirklich einfaches Call-To-Action-Widget programmiert.

Überblick über die Widgets-API

Die Widgets-API in WordPress enthält den gesamten Code, den man für die Registrierung, Erstellung und Programmierung von Widgets benötigt. Die Widgets-API enthält:

• Klassen zum Erstellen neuer Widgets.
• Funktionen zum Registrieren von Widgets und zum Vereinfachen der Widgets auf der Webseite.
• Funktionen zum Aufheben der Registrierung von Widgets, z.B. von einem Parent Theme.

Hier werden wir eine Klasse verwenden, um ein Widget zu erstellen. Der erste Schritt besteht darin, ein Plugin zu erstellen, das das Widget aufnimmt.

Erstelle ein Plugin für dein WordPress Widget

Um dein eigenes Widget zu erstellen, musst du ein Plugin programmieren. Füge den Code für ein neues Widget nicht zu deinem Theme hinzu, denn bei Widgets geht es um Funktionalität und nicht um die Anzeige. Wenn du in Zukunft dein Theme änderst, möchtest du immer noch auf dieses Widget zugreifen können.

Beginne damit, ein leeres Plugin zu erstellen. Erstelle einen Plugin-Ordner in deinem wp-content/plugins Verzeichnis und füge eine leere Datei hinzu. Gib ihr einen geeigneten Namen. Öffne diese Datei und füge diesen Code hinzu.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

Du musst die Autoren-URL und die Plugin-URL auf deine eigene bearbeiten. Dadurch wird ein Plugin für dich erstellt, das du über den Plugin-Bildschirm aktivieren kannst.

Aber wenn du sie aktivierst, wird nichts passieren. Du wirst etwas Code zu deinem Plugin hinzufügen müssen.

Erstelle eine Klasse für das Widget

Der Code für das Widget wird innerhalb einer Klasse abgelegt. Also füge das als nächstes hinzu.

class kinsta_Cta_Widget extends WP_Widget {

}

Erstellen der Konstruktor-Funktion

Das erste, was innerhalb der Klasse gemacht werden muss, ist die Konstruktorfunktion zum Erstellen des Widgets. Füge diese innerhalb der Klammern der Klasse hinzu.

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Dies beginnt mit dem Aufbau des Widgets.

Erstelle das Formular zur Ausgabe des Widgets

Als nächstes benötigen wir ein Formular, das vom Widgets-Bildschirm und dem Customizer zur Erstellung des Widgets verwendet wird. Füge dies noch innerhalb der Klammern hinzu.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

Dadurch erhalten die Benutzer ein Formular, mit dem sie Text und einen Link zum Call to Action hinzufügen können.

Erstelle die Funktion um das Widget zu speichern

Jetzt musst du alles speichern, was in diesem Formular eingegeben wird. Füge dies hinzu.

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

Dadurch werden die von den Benutzern eingegebenen Daten in den Widget-Einstellungen gespeichert.

Erstelle die Funktion zur Ausgabe des Widgets

Jetzt muss der Code hinzugefügt werden, der das Widget auf der Webseite anzeigt. Füge diesen wiederum innerhalb der Klammern hinzu:

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
   echo $args['before_title'] . $title . $args['after_title'];
  };
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

Registriere das Widget

Jetzt, wo du deine Klasse geschrieben hast, ist es an der Zeit, das WordPress Widget zu registrieren, damit es funktioniert. Füge diesen Code außerhalb der Klasse hinzu.

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

Speicher nun deine Plugin-Datei. Gehe auf den Widgets-Bildschirm und du siehst das Widget zur Verwendung.

Wenn du es in einen Widget-Bereich einfügst und Text und einen Link dazu hinzufügst, wird es auf der Live-Seite ausgegeben.

Es sieht im Moment vielleicht nicht so gut aus. Du musst etwas CSS hinzufügen, um es zu stylen.

CSS zum Widget hinzufügen

Um CSS zu deinem Plugin hinzuzufügen, musst du ein Stylesheet erstellen und es in deinem Plugin einreihen. Füge dieses vor der Klasse zu deiner Plugin-Datei hinzu.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

Jetzt musst du eine style.css-Datei im Ordner des Plugins hinzufügen und ein beliebiges Styling hinzufügen. Das überlasse ich dir!

Jetzt hast du einen einfachen Call to Action-Button, den du jedem Widget-Bereich auf deiner Webseite hinzufügen kannst. Wenn du ihn z.B. in deine Seitenleiste einfügst, können die Leute ihn benutzen, um von überall auf der Webseite zu deiner Anmeldeseite zu gelangen.

Du kannst komplexere Widgets mit zusätzlichen Einstellungen und Optionen erstellen, aber das gibt dir eine Vorstellung davon, wie du mit der Erstellung deines eigenen Widgets beginnen kannst.

Wenn du meinen Code für dieses Plugin sehen willst, einschließlich des Stylings, kannst du ihn auf Github finden. Wenn du mit Code beginnst, gibt es hier eine ausführliche Anleitung zu Git vs. GitHub und wie man mit beiden anfängt.

Zusammenfassung

Widgets sind eine meiner Lieblingsfunktionen von WordPress. Sie können deine Webseite zum Leben erwecken und dir helfen, mehr Anmeldungen zu erhalten oder mehr Besucher in Kunden zu verwandeln. Du kannst WordPress-Widgets zu jedem bestehenden Widget-Bereich in Deinem Theme hinzufügen, oder Du kannst zusätzliche Widget-Bereiche hinzufügen, so dass Du mehr Widgets an mehr Stellen hinzufügen kannst.

Es gibt auch viele Orte, an denen man Widgets finden kann. WordPress wird mit einer Reihe von Widgets vorinstalliert geliefert, und man kann über Plugins auch weitere Widgets installieren. Aber das ist noch nicht alles, wenn du dich wohl fühlst, kannst du auch deine eigenen Widgets über die Widgets-API programmieren.

Jetzt bist du an der Reihe: Wie nutzt du die WordPress Widgets auf deiner Webseite? Wie viele verwendest du?