Widget-Bereich zu Theme hinzufügen

Widgets in WordPress sind eine coole Sache, aber es kommt vor, dass man diese an Stellen verwenden möchte, die das verwendete Theme nicht vorsieht.

Die Lösung besteht darin, das Theme anzupassen, damit es weitere Widget-Bereiche unterstützt. Ich habe so schon einen Link zu einer anderen Sprache rechts oben auf die Seite oder ein Werbebanner oberhalb des Contents gepackt.

In diesem Artikel zeige ich wie man einen Widget-Bereich unten auf die Seite bekommt, um dort den Code für Google Analytics unterzubringen. So kann man den Code auf der livegeschalteten Website einfügen, in seiner lokalen Entwicklungsumgebung aber darauf verzichten. Es muss natürlich nicht Google Analytics sein, es geht darum, ein beliebiges Script unten auf der Seite - und damit möglichst spät - zu laden, um den Seitenaufbau nicht zu behindern.

Ich verwende das Theme twentythirteen, die hier gezeigten Schritte sollten sich auch auf andere Themes anwenden lassen.

Widget-Behandlung im Code suchen

Dazu gehe ich zunächst im Admin-Bereich auf Design -> Widgets und schaue mir an, wie die bestehenden Widget-Bereiche heißen. In twentythirteen heißen diese Haupt-Widgetbereich und Zweiter Widgetbereich.

Eine dieser Zeichenfolge suche ich nun im WordPress-Code im Ordner wp-content. Fündig werde ich in der Datei twentythirteen-de_DE.po.

#: functions.php:227
msgid "Main Widget Area"
msgstr "Haupt-Widgetbereich"

Den Hinweis auf functions.php nehme ich dankend an und schaue mir die entsprechende Stelle an. Hier finde ich den Code, der den Widget-Bereich registriert:

    register_sidebar( array(
        'name'          => __( 'Main Widget Area', 'twentythirteen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
        'before_widget' => '<aside id="%1$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h3>',
        'after_title'   => '</h3>',
    ) );

Neuen Widget-Bereich registrieren

Ich kopiere diesen und füge ihn unterhalb der Registrierung des zweiten Bereichs (Secondary Widget Area) ein. Den Namen ändere ich zu Script Widget Area, setze eine eindeutige Id (sidebar-3) und entferne das HTML in den before/after-Eigenschaften:

    register_sidebar( array(
        'name'          => __( 'Script Widget Area', 'twentythirteen' ),
        'id'            => 'sidebar-3',
        'description'   => __( 'Appears on the very bottom of the page to insert scripts.', 'twentythirteen' ),
        'before_widget' => '',
        'after_widget'  => '',
        'before_title'  => '',
        'after_title'   => '',
    ) );

Ich verzichte darauf, die Bezeichnung Script Widget Area lokalisiert bereitzustellen, da ich das geänderte Theme zunächst nur selbst einsetzen werde und mir den Aufwand sparen will.

Auf der Widget-Administrationsseite erscheint nun mein neuer Widget-Bereich.

Script als Widget einfügen

Mein Script füge ich mithilfe des Widget Text ein. Per Drag'n'Drop ziehe ich das Text-Widget in die Script Widget Area und schreibe ein Script, das Hello Widget! auf der Konsole ausgibt, in das Textfeld. Den Titel lasse ich leer.

widget_hello_script

Widget auf der Seite ausgeben

Als letzten Schritt gebe ich das Widget auf der Seite aus. Dazu öffne ich die Datei footer.php des Themes. Oberhalb des schließenden body-Tags füge ich die Funktion dynamic_sidebar() ein, die den Widgetbereich ausgibt:

    <?php dynamic_sidebar('sidebar-3'); ?>
</body>
</html>

Nach dem Neuladen der Seite grüßt meine Konsole erfreut: Hello Widget! In Produktion füge in stattdessen den Google Analytics Code ein. That's it!

 

bjoerne_com_bjoern_weinbrenner_softwareentwickler_icon_leistungen_02

Lust auf mehr? Als Experte für WordPress und individuelle WordPress-Entwicklung kann ich Sie in Ihren Projekten unterstützen. Melden Sie sich gerne bei mir.

2017-01-28T13:52:54+00:00 28.08.2013|Tags: , , , , |1 Kommentar

Ein Kommentar

  1. Schobesberger Franz 24. Dezember 2013 um 8:05 Uhr- Antworten

    Hi 😉

    Ich benötige folgendes:
    Ich ahbe den neuen Widgetbereich erfolgreich erstellt und im Header untergebracht, jedoch ich brauche den Bereich rechts oben in meiner Site!
    Dort möchte ich dann 5-6 Symbole die ich selbst gestalte ich Photoshop mit Links hinterlegen und zu den Socialmediasites verweisen.
    Bitte um Hilfe wie ich das mit der Position und im Grunde genommen gesamt lösen könnte!
    Betrifft im genauer zurzeit diese Seite: http://www.fotoskript.com/
    Bitte um Kontaktierung!

    LG Franz

Hinterlassen Sie einen Kommentar