aktuelle webdesign-artikel

08 Okt 2021
Eigener Widget-Bereich

So erstellst du neue Widget-Bereiche in deinem WordPress-Theme

In jedem WordPress-Theme werden einige Widget-Bereiche mitgeliefert.
In diesen Bereichen können alle möglichen Elemente angezeigt werden, ob Bilder, Texte oder Shop-Artikel. Hier erkläre ich dir, wie du ganz leicht eigene Widget-Bereiche anlegen kannst.

 

Was sind WordPress Widget-Bereiche und wofür kann ich sie einsetzen?

Nun, einfach erklärt: das sind Bereiche, in welchen die Widgets von WordPress angezeigt werden können.
Widgets können Textbereiche, HTML-Code, Bilder oder vieles mehr sein. Es gibt Plugins, die fügen weitere Widgets hinzu, WooCommerce zum Beispiel, wenn man einen Shop betreiben möchte.
Sie dienen also dem einfachen Updaten und Einfügen von Elementen innerhalb der Webseite aber außerhalb vom Editor der Seiten und Beiträge.

Mehr Infos zum Thema Widgets erhältst du auf der offiziellen Erklärungs-Seite von WordPress.

 

Wann kann ich WordPress-Widgets in eigene Widget-Areas einfügen?

Generell kannst du das immer, sobald du Zugriff auf den Code des verwendeten Themes hast.
Ich empfehle jedoch vorher ein WordPress Child-Theme anzulegen, damit bei einem Theme-Update die Bereiche nicht wieder gelöscht werden.

 

Was sollte ich vorbereiten?

Suche dir am besten schon mal die .php-Datei heraus, welche letztendlich das Widget integrieren soll.
Normalerweise sind das die Dateien die in /wp-content/themes/<dein-theme>/ liegen – jedoch nicht die functions.php.
Diese Datei kannst du dennoch auch öffnen, in ihr muss die Widget-Area registriert werden.
Wenn du dir nicht sicher bist welche Datei das ist, kommentiere hier gerne.

Wenn du kein Programm zur Bearbeitung von Code installiert hast empfehle ich dir Notepad++.
Für unseren Anwendungszweck ist es nahezu perfekt – klein, schnell und flexibel.
Alternativ kannst du die Dateien aber auch einfach mit dem Windows-Editor öffnen.

 

Wie erstelle ich einen eigenen Widget-Bereich?

Die Erstellung ist eigentlich gar nicht so schwer.

Öffne in einem Texteditor deiner Wahl die functions.php deines Themes. Diese findest du im WordPress-Installationsverzeichnis unter /wp-content/themes/<dein-theme>/

Füge nun folgenden Code-Schnipsel ganz unten ein (aber bitte, falls vorhanden, noch vor ?>).

add_action( 'widgets_init', 'fhw_register_custom_widget_area' );
function fhw_register_custom_widget_area() {
    register_sidebar(
        array(
            'id' => 'neue-widget-area',
            'name' => esc_html__( 'Meine Widget-Area' ),
            'description' => esc_html__( 'Ein eigener Bereich' ),
            'before_widget' => '',
            'after_widget' => '',
            'before_title' => '',
            'after_title' => ''
        )
    );
}

Ersetze nun die kursiv markierten Texte mit Texten deiner Wahl.
neue-widget-area bezeichnet hierbei die eindeutige ID der Area. Diese darf nur einmal vergeben werden.
Meine Widget-Area ist der Name der Area, so wie sie auch  im Adminbereich unter „Widgets“ angezeigt wird.
Ein eigener Bereich ist lediglich die Beschreibung, wie sie im Customizer angezeigt wird.

Der Website-Besucher wird von den drei oben stehenden Texten nichts sehen können. Sie dienen nur der Ansicht und Übersichtlichkeit für dich im Admin-Bereich.

Nun bearbeite eine Webseiten-Datei deiner Wahl, dort wo das Widget angezeigt werden soll und füge folgenden Code dort ein:

<?php dynamic_sidebar( 'neue-widget-area' ); ?>

Beachte, dass hier neue-widget-area mit der oben vergebenen id übereinstimmen muss, sonst fehlt die Verknüpfung und dein Bereich funktioniert nicht.

Speichere nun die Dateien und lade Sie auf deinen Server. Wenn du WordPress lokal installiert hast, entfällt dieser Schritt.

Nun rufe im Adminbereich „Design“ -> „Widgets“ auf. Dort sollte dein neu erstellter eigener Widget-Bereich nun vorzufinden sein.

Eigener Widget-BereichDu kannst nun also hier Navigationsmenüs, Bilder, Texte, HTML oder viele andere Widgets einbinden – und sie werden genau an der Stelle angezeigt wo du den Code hinterlegt hast.

Gar nicht so schwer, oder?

 

Fazit

Das Erstellen einer eigenen Widget-Area benötigt kaum Arbeitszeit und bietet sich vor allem dann an, wenn sich Inhalte häufig ändern.
So machen sie in Seitenleisten Sinn, in Fuß- und Kopfbereichen oder auf festen Positionen im Inhalt.
Um also weitere Widgets in deiner Webseite einzubinden ist nicht wirklich viel Arbeit erforderlich und es ist auch nicht unbedingt ein Programmierer dafür notwendig.
Trotzdem ist natürlich ein bisschen Vorsicht geboten – Fehler im Code können Errors auf der Website hervorrufen und dann ist sie nicht mehr aufrufbar.

Hat dir dieser Beitrag geholfen? Dann freue ich mich sehr über dein Feedback in den Kommentaren!

Fabian Heinz

Fabian Heinz

Fabian Heinz beschäftigt sich seit mehreren Jahren mit Webdesign. Zuerst war es nur ein Hobby – jetzt ist es sein Beruf. Als staatlich geprüfter Wirtschaftsinformatiker kennt er sämtliche Zusammenhänge der Technik und überzeugt durch sowohl Theorie- als auch Praxiswissen. Mit viel Leidenschaft ist er bei der Arbeit und zeigt, dass der Beruf auch seine Berufung ist.

Schreibe einen Kommentar