Widgets sind ein fester Bestandteil von WordPress, durch sie können unterschiedliche Inhalte wie Bilder, Texte und auch HTML in festgelegten Bereichen der Website hinterlegt werden. Dadurch können auch Website-Betreiber die nicht viel mit Webentwicklung, HTML und CSS zu tun haben, Webinhalte selbstständig tauschen, ohne Gefahr zu laufen, große Fehler in die Website einzubauen.

In diesem Artikel möchte ich Dir erklären, wie Du selbstständig Bereiche für Widgets auf Deiner Website festlegst und wie Du im Anschluss WordPress mitteilst, dass es einen neuen Widget-Bereich gibt, damit dieser im Backend von WordPress auch befüllt werden kann.

Widget breich erstellen – Für wen ist das Tutorial gedacht?

Dieses kleine Tutorial richtet sich an halbwegs erfahrene und natürlich erfahrene WordPress Entwickler, die noch keine Widgets in WordPress integriert haben. Im Zuge dieses Tutorials wirst Du im funktionalen Herzen Deines Themes oder Child-Themes, der Datei „functions.php“ Änderungen vornehmen.

Solltest Du Dir das nicht zutrauen, so frage am besten einen Bekannten mit Kenntnissen in PHP, oder kontaktiere eine Web-Agentur, beide werden Dir sicherlich weiterhelfen können, da die eigentlichen Änderungen nicht allzu komplex sind, aber trotzdem Deine Website lahmlegen können. Änderungen in dieser Datei lassen sich auch nicht einfach zurücksetzen oder wiederherstellen, die einzige Möglichkeit ist der Cache des Editors den Du verwendest, oder ein Server-Backup.

Weiterhin solltest Du keine Code-Änderungen direkt in Deinem WordPress Theme machen. Lege für alle Änderungen am besten ein Child-Theme an. Wie das funktioniert, zeige ich Dir in meinem Artikel „Wie Du in 4 Schritten Dein eigenes WordPress Child Theme erstellst“.

Schritt 1 – Registrierung des Widget Bereiches in der „functions.php“

Kommen wir nun zur Registrierung Deines neuen Widget-Bereiches. Dies geschieht in der sogenannten „functions.php“ Datei. Diese Datei befindet sich im Basis-Verzeichnis Deines Child-Themes. Sollte diese Datei noch nicht existieren, musst Du sie anlegen. Wichtig ist der Name, dieser darf keine Abweichungen haben, sonst wird diese Datei von WordPress nicht berücksichtigt.

Solltest Du die Datei anlegen müssen, achte darauf, dass der erste Text in der Datei „<?php“ ist. Damit erkennt der Webserver, dass nun PHP Code folgt. Das ist wichtig, damit der Code-Schnippsel zur Registrierung Deines neuen Widget-Bereiches ausgeführt wird.

Nun fügst Du folgenden Code-Schnippsel in die Datei ein:

function themename_widgets_init() {
    register_sidebar(array(
        'name' => 'Mein Widget-Bereich',
	    // Wichtig: Die "id" kleingeschrieben, keine Leerzeichen
        'id' => 'einzigartiger-widget-name',
        'description' => 'Das ist meine eigener Widget-Bereich',
        'class' => 'widget--einzigartiger-widget-name',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
}
add_action( 'widgets_init', 'themename_widgets_init' );

Den Code-Schnippsel fügst Du am besten am Ende der Datei ein, scheue nicht davor, zwei Leerzeilen einzufügen, bevor Du den Widget-Bereich Code einfügst, das sorgt für eine bessere Lesbarkeit und Übersicht. Nachfolgend habe ich für Dich noch ein paar Beispiele dafür, wo Du den Code einfügen solltest.

Hier siehst du, wie die Datei aussehen sollte, wenn die „function.php“ zuvor leer war, oder Du sie anlegen musstest:

 

Und hier findest Du noch ein Beispiel dafür, wo Du den Code-Schnippsel einfügen solltest, wenn die Datei bereits existiert und auch schon Inhalt hat:

Schritt 2 – Ersetzung von Platzhaltern im Widget-Code-Schnippsel

Nachdem Du den Code-Schnippsel eingefügt hast, solltest Du einzelne Texte und Inhalte anpassen, er dient nämlich nur als Vorlage.

Beginnen solltest Du mit dem Namen des Code-Schnippsels, auch „Funktion“ genannt. Deine Funktion startet mit der Zeile „function themename_widgets_init() {“. Nun kannst Du „themename“ gegen einen beliebigen Text tauschen. Am besten ist es, wenn dieser Text eindeutig ist, da es in Deinem PHP Progamm-Code der Website keine Duplikate bei den Namen der Funktionen geben darf. Sollte es mehrfach die Funktion mit dem Namen „themename_widgets_init“ geben, so weiß Dein Webserver nicht mehr, welche der Funktionen er verwenden soll, wenn die Funktion verwendet werden soll. Das führt dazu, dass Deine Seite nicht mehr erreichbar ist.

Weiterhin solltest Du beachten, dass Namen für Funktionen keine Leerzeichen, Sonderzeichen und Zahlen enthalten dürfen. Beschränke dich auf alle Buchstaben des englischen Alphabets und auf Unterstriche anstelle von Leerzeichen.

Den neuen Name der Funktion musst Du ebenfalls in der letzten Zeile des Code-Schnippsels einfügen. In der letzten Zeile verwendest Du eine Funktion von WordPress, mit der Du WordPress „mitteilst“, dass es Dein Widget registrieren soll. Tausche nun also den Name nach folgendem Schema aus und setzt statt „neuer_theme_name“ den Namen Deines Themes ein:

function neuer_theme_name_widgets_init() {
    register_sidebar(array(
        'name' => 'Mein Widget-Bereich',
	    // Wichtig: Die "id" kleingeschrieben, keine Leerzeichen
        'id' => 'einzigartiger-widget-name',
        'description' => 'Das ist meine eigener Widget-Bereich',
        'class' => 'widget--einzigartiger-widget-name',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
}
add_action( 'widgets_init', 'neuer_theme_name_widgets_init' );

Im nächsten Schritt geht es an die Anpassung der Widget-Konfiguration. Diese befindet sich ein einem sogenannten „Array“. Array steht übersetzt ins deutsche für „Reihenfolge“, „Anordnung“, oder auch „Matrix“. Ein Array ist nichts anderes als eine Auflistung. Du kannst Dir diese vorstellen wie eine zweispaltige Excel Tabelle. Der Aufbau der Liste ist „Key-Value“ basiert, also eine einfache Auflistung mit „Name => Wert“. Der Name steht auf der linken Seite und ist wichtig für WordPress, an ihm darfst Du keine Änderungen vornehmen.

In Deiner Funktion hast Du die folgenden „Key‘s“:

• name
• id
• description
• class
• before_widget
• after_widget
• before_title
• after_title

Wichtig für Dich sind aber nur die Array-Einträge zu den Key‘s:

• name
• id
• description
• class

Über die Key‘s „name“ und „description“ kannst Du die Darstellung des Widget-Bereiches im WordPress Backend anpassen. „id“ und „class“ werden für die Darstellung des Widgets im Frontend der Website benötigt.

Die „id“ sollte einen eindeutigen Namen erhalten, ähnlich wie bei Deiner Funktion. Ein möglicher Name könnte sich aus dem Name Deines Themes und der Funktion des Widgets ergeben „themename-greeting-widget“.

Die „class“ kannst Du verwenden, um über den CSS-Customizer ein eigenes Aussehen für Dein Widget festzulegen. Eine mögliche Klasse („class“) für Dein Widget könnte sich ähnlich wie bei der „id“ zusammensetzen „widget—themename-greeting“. Im CSS-Customizer könntest Du Dein Widget nun wie folgt ansprechen und anpassen:

.widget--themename-greeting {
    background-color: #eeeeee;
    border: 1px solid #000000;
}

Schritt 3 – Platzierung des Widgets im Theme

Nun hast Du Dein Widget bereits registriert und die Grundlage geschaffen, eine gestalterische Anpassung im CSS Customizer durchzuführen. Im letzten Schritt musst Du nun noch an der Stelle in Deinem Theme einen Code einbauen, an der Dein Widget später dargestellt werden soll. Dies ist der leichteste Schritt, insofern Du diese Stelle leicht identifizieren kannst.

Der Code zur Integration lautet wie folgt:

<?php if ( is_active_sidebar( 'einzigartiger-widget-name' ) ) {
    dynamic_sidebar( 'einzigartiger-widget-name' ); 
} ?>

Was hier genau passiert und wie es passiert, ist für Beginner im Bereich PHP-Programmierung nicht allzu wichtig. Das einzige was Du verstehen musst ist, dass Du „einzigartiger-widget-name“ gegen die „id“ tauschen musst, die Du bei der Registrierung Deines Widgets angegeben hast.

Im ersten Teil dieses Codes wird mit einer sogenannten „if – Anweisung“ überprüft, ob Dein Widget im WordPress Backend mit Inhalt gefüllt wurde. Diese „Abfrage“ wird mit Hilfe der WordPress Funktion „is_active_sidebar“ durchgeführt. Sollte WordPress nun als Ergebnis der Anfrage Antworten, dass der Widget-Bereich mit Inhalten wie Bildern gefüllt wurde, dann wird der zweite Teil des Codes aufgerufen.

Durch die zweite WordPress Funktion „dynamic_sidebar“ wird automatisch Dein Widget im Quellcode eingefügt und der Inhalt den Du im WordPress Backend hinterlegt hast eingefügt.

Wie findest Du aber nun die Stelle an der Du diesen Code einfügen musst?

Dazu gibt es mehrere Herangehensweisen. Die erste grobe Variante ist, dass Du in Deinem Child-Theme die gewünschte Datei des Parent-Themes überschreibst und den Code dort einbaust. Diese Methode setzt aber voraus, dass Du die gesamte Datei selber nachbaust.

Die schönere Variante ist es, wenn Du Deinen Code über Aktionen oder Filter integrierst. Dazu Informierst Du dich am besten darüber, ob Dein Parent-Theme passende Aktionen oder Filter anbietet, an denen Du eigene Inhalte einbauen kannst. Werfe dazu am besten einen Blick in die Dokumentation des Themes, oder kontaktiere den Hersteller des Themes. Dieser sollte Dir ein Feedback geben können, ob es passende Aktionen oder Filter an den Orten gibt, an denen Du Dein Widget integrieren möchtest. Solltest Du dort nicht fündig werden, dann kannst Du noch einen Blick auf die Aktionen und Filter werfen, die Dir WordPress von Haus aus liefert.

Leider bietet die WordPress Funktion „dynamic_sidebar“ nicht die Möglichkeit einfach den Inhalt des Widget Bereiches zu generieren und zu ermitteln. Der Inhalt wird dort ausgegeben, wo die Funktion aufgerufen wird. Um nun aber an den Inhalt des Widgets innerhalb eines Filters zu gelangen, musst Du zwei weitere kurze Code Schnippsel in Deiner „functions.php“ hinterlegen. Diese baust Du einfach unterhalb des Codes zur Registrierung des Widget-Bereiches ein.

Im ersten Code Schnippsel baust Du das Widget selber im sogenannten Ausgabe-Buffer zusammen und ermittelst so den Inhalt.

function themename_get_sidebar_string( $name_or_id )
{
    ob_start();
    $sidebar_return_value = '';

    try {
        $build_successful = dynamic_sidebar( $name_or_id);

        if ( $build_successful ) {
            $sidebar_return_value = ob_get_contents();
        } 
    } catch (Exception $e) {
        $sidebar_return_value = 'Es ist ein Fehler aufgetreten: '.$e->getMessage();
    } finally {
        ob_end_clean();
    }

    return $sidebar_return_value;
}

Der zweite Code Schnippsel zeigt Dir, wie Du anhand des WordPress Filters „the_content“ ein Widget am Ende des Inhaltsbereiches einfügen kannst. Dies ist lediglich ein vereinfachtes Beispiel zu Integration. Du solltest Dir genau überlegen auf welchen Seiten Du das Widget an den Content anhängen möchtest, solltest Du diesen Code Schnippsel verwenden.

In diesem Beispiel würde das Widget bei jedem Aufruf der Funktion „the_content“ integriert werden.

function themename_add_widget_after_content($content) {
    $after_content = themename_get_sidebar_string('einzigartiger-widget-name');
    $full_content_with_widget = $content . $after_content;
    
    return $full_content_with_widget;
}
add_filter('the_content', 'themename_add_widget_after_content');

Du solltest auch in diesen Beispielen wieder „themename“ gegen den Name Deines Themes austauschen.

Fazit zum WordPress Widget Bereich

In diesem Artikel hast Du gelernt, wie Du Deinen eigenen Widget-Bereich in Deinem Child-Theme integrierst und registrierst. Danach habe ich Dir gezeigt, wie Du innerhalb der Code-Vorlage Anpassungen vornehmen kannst, so dass das Widget zu Deinen Anforderungen passt. Im letzten Teil des Artikels hast Du gelernt, mit welchem Code Du das registrierte Widget im Child-Theme anzeigen kannst. Du kannst nun entscheiden, ob Du komplette Komponenten des Parent-Themes neu entwickelst, oder ob Du Dir eine Aktion oder einen Filter suchst, um Deine Widget zu integrieren.

Wie immer gilt, solltest Du Fragen, Anregungen oder Kritik zum Artikel haben, lass es mich über Deinen Kommentar wissen.

Beste Grüße,
Lukas