Was ist ein Widget in WordPress?

() translation by (you can also view the original English article)

WordPress-Widgets sind eine großartige Möglichkeit, Ihrer Website zusätzlichen Inhalt, Snippets und Interaktivität hinzuzufügen.

Sie machen Ihre Website zu mehr, als nur einem Blog und bieten Ihnen die Flexibilität, Inhalte zu identifizieren, die Sie auf jeder Seite Ihrer Website anzeigen möchten, und sicherzustellen, dass die Nutzer sie nicht verpassen.

In diesem Artikel erfahren Sie alles über WordPress-Widgets. Wie Sie sie zu Ihrer Website hinzufügen können, wohin sie gehen und wie Sie sie optimal nutzen können. Ich werde auch einige der technischeren Aspekte von Widgets untersuchen und Ihnen helfen, Ihre eigenen Widget-Bereiche für die Anzeige von Widgets zu erstellen und sogar mit dem Erstellen Ihres eigenen Widget-Plugins zu beginnen.

Die besten WordPress-Plugins auf CodeCanyon

Sie können Tausende der besten WordPress-Plugins erkunden, die jemals auf CodeCanyon erstellt wurden. Mit einer kostengünstigen einmaligen Zahlung können Sie diese hochwertigen WordPress-Plugins erwerben und Ihr Website-Erlebnis für Sie und Ihre Besucher verbessern.

Was ist ein WordPress-Widget?

Beginnen wir damit, genau zu identifizieren, was Widgets sind.

In WordPress sind Widgets Ausschnitte von Inhalten, die sich außerhalb des Seitenflusses befinden oder Inhalte veröffentlichen.

WordPress-Widgets haben Navigation, Informationen oder Medien, die vom eigentlichen Beitrag oder der Seite getrennt sind. In den meisten Fällen wird jedes Widget auf jeder Seite der Site angezeigt. Sie können jedoch auch Widgetbereiche für bestimmte Seiten, wie z.B. die Startseite registrieren.

Um Ihrer Site ein Widget hinzuzufügen, fügen Sie es einem Widget-Bereich hinzu. Widget-Bereiche werden von Ihrem Thema erstellt, da sie Teil des Designs und Layouts Ihrer Website sind.

Die meisten Themen 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. Oder sie haben mehrere Widget-Bereiche in der Seitenleiste und/oder Fußzeile, wodurch Sie noch mehr Flexibilität erhalten.

Der Screenshot unten von einer meiner eigenen Websites zeigt Widgets in der Seitenleiste und in der Fußzeile.

Verwendung von Widgets

Es gibt viele Dinge, für die Sie Widgets verwenden können. Tatsächlich sind die Optionen nur durch Ihre Vorstellungskraft begrenzt.

Im Folgenden finden Sie einige häufige Verwendungszwecke für Widgets, die Sie für Ihre gewonnene Website in Betracht ziehen sollten:

Fügen Sie mit dem vorinstallierten Navigationsmenü-Widget ein zusätzliches Navigationsmenü hinzu - nützlich in der Fußzeile, damit die Benutzer am Ende eines Beitrags einen Ort haben, an den sie gehen können.
Fügen Sie eine Aktionsschaltfläche mit einem Text-Widget oder einem benutzerdefinierten HTML-Widget hinzu, um Benutzer zu ermutigen, etwas Bestimmtes zu tun.
Fügen Sie einen Social Media-Feed hinzu, indem Sie ein Plugin installieren, das mit Ihren Social Media-Konten verknüpft ist. Es ist üblich, diese in die Fußzeile zu setzen.
Hinzufügen eines Warenkorbs - Die meisten E-Commerce-Plugins werden mit einem Warenkorb-Widget geliefert.
Fügen Sie Ihr Lieblingsbild mit dem Bild-Widget hinzu.
Fügen Sie mit dem Widget "Letzte Beiträge" eine Liste Ihrer neueren Beiträge hinzu - eines der beliebtesten Widgets für Websites mit einem Blog.

Es gibt viel mehr Möglichkeiten. Wenn Sie in das WordPress-Plugin-Verzeichnis gehen, indem Sie auf Ihrer Website unter Plugins > Neu hinzufügen nach Widget suchen und dann nach Widgets suchen, finden Sie Hunderte von Plugins, mit denen Sie zusätzliche Widgets erhalten, die Sie Ihrer Seitenleiste, Fußzeile oder anderen Widget-Bereichen hinzufügen können.

Wie man Ihrer Site Widgets hinzu hinzufügt

In WordPress sind eine Reihe von Widgets vorinstalliert, sodass Sie sie verwenden können, ohne Plugins installieren oder Code schreiben zu müssen. Sie können aber auch viel mehr Widgets hinzufügen, indem Sie Plugins installieren oder Ihre eigenen codieren. Diese können eine Vielzahl von Inhaltstypen abdecken, z. B. Medien, Social Media-Feeds, Navigation, Suche, Karten und vieles mehr. Möglicherweise möchten Sie auf Ihrer Website nur sehr wenig, für das Sie kein Widget finden können. Tatsächlich besteht die größte Herausforderung oft darin, zwischen allen Optionen zu wählen und nicht über Bord zu gehen.

Beginnen wir mit vorinstallierten Widgets zu Ihrer Site hinzufügen.

Hinzufügen vorinstallierter Widgets zu Ihrer Site

WordPress enthält einige großartige Widgets, die schon installiert sind:

Archive: Link zu Archiven nach Monat, für Blogs konzipiert, aber jetzt eher veraltet.
Audio: Betten Sie einen Podcast, ein Lied oder ein anderes Audio ein.
Kalender: Ein Kalender Ihrer Beiträge, der wiederum für Blogs geeignet ist, insbesondere wenn Ihre zeitkritisch sind (aber heutzutage nicht mehr so häufig sind).
Kategorien: Eine Liste der Kategorien in Ihrem Blog mit Links zu den Archivseiten.
Benutzerdefiniertes HTML: Die ultimative Flexibilität. Fügen Sie den gewünschten Inhalt hinzu, indem Sie ihn in den HTML-Code eingeben (oder einfügen). Vermeiden Sie diesen, wenn Sie mit dem Codieren nicht vertraut sind!
Galerie: Weiter als das Bild-Widget. Zeigen Sie eine Bildergalerie an.
Bild: Zeigen Sie ein Bild aus Ihrer Medienbibliothek an.
Meta: Metadaten wie Login-Links und RSS-Feeds. Ein Kater aus den Anfängen von WordPress und jetzt nicht sehr nützlich.
Navigationsmenü: Zeigen Sie das Hauptnavigationsmenü oder ein separates Menü an, das Sie speziell erstellen.
Seiten: Zeigen Sie eine Liste der Seiten Ihrer Website mit Links an.
Letzte Kommentare: Eine Liste der letzten Kommentare mit Links zu diesen.
Letzte Beiträge: Zeigen Sie eine Liste Ihrer letzten Beiträge an, um die Benutzer zum Lesen zu ermutigen.
Suche: ein einfaches Suchfeld.
Tag Cloud: Eine Liste von Tags in einem Cloud-Format mit Links zu den relevanten Archiven.
Text: Jeder Text, den Sie hinzufügen möchten, z. B. Informationen zur Site.
Video: Betten Sie ein Video von einem Streaming-Dienst wie YouTube oder Vimeo ein.

Sie können Ihrer Site Widgets von einer von zwei Stellen aus hinzufügen: dem Customizer und dem Widgets-Bildschirm.

Mit dem Customizer können Sie eine Vorschau Ihrer Änderungen anzeigen, bevor Sie sie speichern. So können Sie Dinge ausprobieren und sehen, wie sie aussehen.
Der Widgets-Bildschirm bietet zusätzliche Funktionen, z. B. die Möglichkeit, nicht verwendete Widgets zu speichern, die Sie möglicherweise konfiguriert haben und für später speichern möchten. Es erleichtert auch das Verschieben von Widgets zwischen Widget-Bereichen und verfügt über einen Eingabehilfenmodus, den Sie ohne Maus verwenden können.

Um im Customizer auf Widgets zuzugreifen, gehen Sie zu Darstellung > Anpassen > Widgets. Wählen Sie den Widget-Bereich aus, mit dem Sie arbeiten möchten.

Klicken Sie dann auf die Schaltfläche Widget hinzufügen und wählen Sie das Widget aus, das Sie hinzufügen möchten. Es wird rechts als Vorschau angezeigt. Sie können Änderungen an den Einstellungen vornehmen oder verschiedene Widgets ausprobieren, bis Sie damit zufrieden sind. Klicken Sie anschließend oben auf die Schaltfläche Veröffentlichen, um Ihre Änderungen zu speichern.

Hinweis: Wenn Sie den Customizer verlassen, ohne auf Veröffentlichen zu klicken, werden keine Ihrer Änderungen gespeichert. Vergiss nicht!

Um auf den Widgets-Bildschirm zuzugreifen, gehen Sie zu Darstellung > Widgets. Hier sehen Sie links eine Liste der verfügbaren Widgets und rechts die Widget-Bereiche. Denken Sie daran, dass Widget-Bereiche von Ihrem Thema erstellt werden. Wenn Sie also mehr benötigen, müssen Sie möglicherweise das Thema wechseln.

Dann müssen Sie nur noch das gewünschte Widget in den gewünschten Widget-Bereich ziehen. Sie können dann die Einstellungen (sofern das Widget Einstellungen enthält) im Widget-Bereich anpassen und Widgets mit der Maus verschieben.

Der Widgets-Bildschirm verfügt auch über einen Eingabehilfenmodus. Um darauf zuzugreifen, klicken Sie oben rechts auf dem Bildschirm auf den Link Zugänglichkeitsmodus aktivieren.

Um den Eingabehilfenmodus zu verlassen, klicken Sie erneut auf diesen Link. Dadurch können Sie den Eingabehilfenmodus verlassen.

Installieren und Aktivieren eines Widget-Plugins

Wenn Sie Ihrer Site Widgets hinzufügen möchten, die über das hinausgehen, was WordPress standardmäßig bietet, können Sie ein WordPress-Plugin verwenden.

WordPress

Was ist ein WordPress-Plugin?

Rachel McCollin

Um Ihrer Site ein kostenloses Widget-Plugin hinzuzufügen, gehen Sie zu Plugins > Neu hinzufügen und suchen Sie nach einem Widget. Wenn Sie alternativ ein Widget für eine bestimmte Aufgabe benötigen, suchen Sie nach dieser Aufgabe. Es gibt viele Plugins, die Widgets enthalten, aber nicht nur Widget-Plugins, wie z. B. E-Commerce-Plugins mit ihren Warenkorb-Widgets.

Wenn Sie das gewünschte Plugin gefunden haben, klicken Sie auf die Schaltfläche Installieren. Nach einigen Augenblicken ändert sich dies zu einer Schaltfläche Aktivieren. Klicken Sie darauf, um das Plugin zu aktivieren.

WordPress

Wie man Plugins zu WordPress hinzufügt

Jessica Thornsby

Wenn Sie jetzt zum Customizer- oder Widgets-Bildschirm wechseln, können Sie das vom Plugin bereitgestellte Widget zu einem Widget-Bereich in Ihrem Thema hinzufügen.

Wenn Sie ein Widget-Plugin von einem externen Anbieter wie CodeCanyon gekauft haben, müssen Sie das Plugin auf Ihre Website hochladen. Sie können dies direkt von Ihren Admin-Bildschirmen aus tun.

Gehen Sie zu Plugins > Neu hinzufügen. Klicken Sie auf Plugin hochladen.

Laden Sie die Zip-Datei für das Plugin hoch (laden Sie keine unkomprimierten Dateien hoch, nur Zip-Dateien funktionieren).

Klicken Sie auf die Schaltfläche Jetzt installieren und aktivieren Sie das Plugin.

Das Widget ist dann verfügbar, wenn Sie zum Customizer- oder Widgets-Bildschirm wechseln.

Wie man Ihrem Thema zusätzliche Widget-Bereiche hinzufügen kann

Wenn Ihr Thema nicht über die gewünschten Widget-Bereiche verfügt, besteht die einfachste Lösung darin, ein Thema zu finden, das dies tut. Was aber, wenn Sie mit dem Design Ihres Themas zufrieden sind und nur einen oder mehrere zusätzliche Widget-Bereiche hinzufügen möchten?

Mit WordPress können Sie mit der Funktion register_sidebar() Ihre eigenen Widget-Bereiche erstellen. Dies besteht aus zwei Schritten:

Registrieren des Widget-Bereichs mit einer Funktion in Ihrer Datei functions.php.
Hinzufügen des Widget-Bereichs an der entsprechenden Stelle in Ihrem Thema.

Wenn Sie mit einem Thema eines Drittanbieters arbeiten (d. H. Eines, das Sie aus dem Themenverzeichnis heruntergeladen oder irgendwo wie dem CodeCanyon gekauft haben), dürfen Sie Ihr Thema nicht direkt bearbeiten. Erstellen Sie stattdessen ein untergeordnetes Thema und fügen Sie Ihren neuen Code hinzu.

WordPress

Wie man ein untergeordnetes WordPress-Thema erstellt

Rachel McCollin

Registrieren des Widget-Bereichs

Um den Widget-Bereich zu registrieren, schreiben Sie eine solche Funktion in Ihre Datei functions.php.

function tutsplus_register_widgets() {
register_sidebar( array(
            'name' => __( 'After Content Widget Area', 'tutsplus' ),
                'id' => 'after-content-widget-area',
                'description' => __( 'Widget area after the content', 'tutsplus' ),
                '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', 'tutsplus_register_widgets' );

Speichern Sie die Datei und Sie werden feststellen, dass der Widget-Bereich auf Ihrem Widgets-Bildschirm und im Customizer angezeigt wird. Es wird jedoch noch nichts auf der Website ausgegeben.

Anzeigen des Widget-Bereichs auf Ihrer Site

Damit der Widget-Bereich auf Ihrer Site angezeigt wird, müssen Sie der entsprechenden Vorlagendatei in Ihrem Design Code hinzufügen. Für die Seitenleiste ist dies sidebar.php und für die Fußzeile footer.php. Wenn Sie jedoch einen zusätzlichen Widget-Bereich an einer anderen Stelle hinzufügen möchten, müssen Sie die richtige Vorlagendatei identifizieren.

Um einen Widget-Bereich über oder unter dem Inhalt hinzuzufügen, fügen Sie ihn Ihrer single.php-Datei, page.php-Datei oder einer anderen Datei hinzu, die einzelne Beiträge oder Seiten ausgibt.
Um einer bestimmten Datei wie der Startseite einen Widget-Bereich hinzuzufügen, erstellen Sie eine Datei mit dem Namen front-page.php, kopieren Sie den Inhalt Ihrer index.php- oder page.php-Datei und fügen Sie dann den Code für den Widget-Bereich hinzu.
Um Posts eines bestimmten Post-Typs einen Widget-Bereich hinzuzufügen, fügen Sie den Code zu single-posttype.php hinzu, wobei posttype der Name des Post-Typs ist.

Es gibt mehr Optionen - die beste Ressource, um herauszufinden, welche Datei verwendet werden soll, ist die WordPress-Vorlagenhierarchie.

Für den Widget-Bereich nach dem Inhalt, den ich oben registriert habe, würde ich diesen Code nach dem Inhalt in meinen Vorlagendateien hinzufügen:

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 }

Sobald Sie dies hinzugefügt haben, werden alle Widgets, die Sie diesem Widget-Bereich hinzufügen, an der richtigen Stelle auf der Website angezeigt.

Codieren Ihrer eigenen Widgets

Es gibt Hunderte von Widgets, die Sie auf Ihrer Website verwenden können. Was ist jedoch, wenn Sie Ihre eigenen codieren möchten?

Das Codieren eines Widget-Plugins ist weiter fortgeschritten als das Registrieren eines Widget-Bereichs. Sie können dies jedoch tun, indem Sie unserer Serie zum Schreiben eines Widget-Plugins folgen. Die Besonderheiten Ihres eigenen Plugins hängen davon ab, was das Widget tun soll.

WordPress-Widgets

Erstellen eigener Widgets mit verschiedenen WordPress-APIs: Einführung

Bonang Salemane

Bevor Sie jedoch mit dem Codieren Ihres eigenen Widgets beginnen, überprüfen Sie, ob es noch nicht verfügbar ist. Sie könnten sich viel Arbeit sparen.

Die besten WordPress-Themes und Plugins auf dem Envato Market

Entdecken Sie Tausende der besten WordPress-Themes, die jemals auf ThemeForest erstellt wurden, und die führenden WordPress-Plugins auf CodeCanyon. Kaufen Sie diese hochwertigen WordPress-Themes und -Plugins und verbessern Sie Ihr Website-Erlebnis für Sie und Ihre Besucher.

Hier sind einige der meistverkauften und aufstrebenden WordPress-Themes und Plugins für 2020.