WordPress Widgets – ein Theme widgetfähig machen und Widgets erstellen

Widgets gibt es in WordPress schon länger. Ich muss jedoch gestehen, dass sie mir nicht auf Anhieb sympathisch waren. Der Mensch ist halt doch ein Gewohnheitstier und ich bin keine Ausnahme. Der Grund, dass ich Widgets nicht mochte war der, dass ich immer nur die Einfachst-Varianten mit einer Sidebar gesehen habe, maximal zwei. Die Sidebar von diesem Weblog hier hat jedoch mehrere Bereiche. Es gibt Abschnitte die über die ganze Breite gehen und wieder andere, die zweigeteilt sind. Außerdem sind die Überschriften bestimmter Funktionalitäten mit Absicht auf gleicher Höhe angeordnet – als Ordnungs- und Strukturmensch kann ich Durcheinander nun mal nicht leiden. Auf Anhieb habe ich also mit dem Einsatz von Widgets keine Lösung gesehen, wie ich ohne den manuellen Einsatz von meinen geliebten Template-Tags das gleiche Erscheinungsbild erzeugen kann. Doch manchmal braucht es einfach einen zweiten und dritten Anlauf – dann klappt auch das.

Über Widgets hat Gabi vom Bloghäuschen einen ausführlichen Beitrag mit Erläuterungen geschrieben . Als weitere Quelle ist die Original-Seite von Automattic zu nennen. Die ist allerdings für Durchschnittstalente in Englisch nicht ganz so einfach zu verstehen. So z.B. wird dort immer von „Args“ gesprochen – jo, das sind die Argumente in den PHP-Klammern. Aber das nur nebenbei.

Ein bisschen was zum Einlesen was Widgets sind und was sie tun gibt es hier zu lesen:

Bloganbieter : WordPress Widgets richtig nutzen

Und hier eine Anleitung auf Deutsch:

Gabis WordPress Templates – Widgets keine bösen Überraschungen mehr

Hier die Doku in Englisch:

Automattic : Widgetizing themes
Automattic : Widgetizing Plugins

Widgets zum Runterladen und Installieren:

http://widgets.wordpress.com/

Wenn dein WordPress widgetfähig ist, findest man im Admin unter Themes (Design) einen Unterpunkt mit der Aufschrift „Widgets“. Widgets zeigen z.B. die Archive, die statischen Seiten, die Blogroll oder den WordPress Kalender in der Sidebar an. In einem nicht widgetfähigen Template muss man diese Funktionen mit Code-Schnipseln händisch einfügen. Das ist an sich auch nicht schwierig, ein paar PHP und (x)html Kenntnisse sind dabei jedoch Voraussetzung.

Ist ein Theme (Design) jedoch widgetfähig, dann sind diese Code-Schnipsel in handliche Einheiten verpackt, die man mit einfach per Klick an die gewünschte Stelle in der Sidebar positionieren kann. Das hat für Laien den Vorteil, dass sie selber bestimmen können, an welcher Stelle in der Sidebar bestimmte, anklickbare Optionspunkte dargestellt werden sollen. Im Installationspaket von WordPress sind schon eine ganze Reihe von Widgets vorhanden, sollte das nicht reichen, kann man sich erstens selber weitere Widgets selber kreeieren oder im Netz danach Ausschau halten.

Wie oben schon erwähnt gibt es schon sehr gute Beschreibungen wie man ein Design widgetfähig macht. Für ein Design mit einer oder zwei Sidebars möchte ich das deshalb nicht wiederholen und statt dessen ergänzend einen Weg aufzeigen, wie man z.B. eine Sidebar wie z.B. hier bei den frischen-zitronen mit 4 Bereichen widgetfähig machen kann.

Im Grunde ist die Seitenspalte in diesem Design nicht nur eine (1) Spalte – es sind 4.

widgets.jpg

Für jeden dieser Bereiche legt man nun eine eigene Datei an und speichert sie im jeweilgen themes Ordner:

sidebar-oben.php
sidebar-links.php
sidebar-rechts.php
sidebar-unten.php

Nun die Datei sidebar.php öffnen und hier die Pfade zu den 4 Dateien setzen:


Nun noch in den einzelnen Dateien der sidebars folgende Einträge machen:

sidebar-oben (1)


sidebar-links (2)


sidebar-rechts (3)


sidebar-unten (4)


In diesem Fall habe ich die einzelnen sidebar-Abschnitte in div-container gepackt, semantischer wäre es jedoch, wenn man hier eine verschachtelte Liste verwenden würde. Auch habe ich an dieser Stelle darauf verzichtet anzugeben, was passiert, wenn die Funktion nicht vorhanden ist. Es heißt ja: If functions exists, dann nimm die dynamische sidebar, wenn nicht dann sollte in den einzelnen sidbar Dateien noch eingetragen werden, welcher code dann genommen werden soll. Hier kann man dann in die if-Abfage den code einhängen, den man verwenden würde, wenn das Design nicht widgetfähig wäre. Wie man das macht kann man in den eingans referenzierten Links nachlesen.

functions.php

Für jedes widgetfähige Design muss im Theme-Ordner eine Datei mit dem Namen functions.php angelegt werden. Je nachdem ob es sich um eine einspaltige, zwei- oder mehrspaltige, widgetfähige sidebar handelt, ist der Inhalt dieser Datei unterschiedlich. Für die 4 spaltige sidebar kann folgender Eintrag gemacht werden:

 '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', )); ?>

Bei dieser Lösung wird die Überschrift eines Anzeigeblocks mit h3 ausgezeichnet. Darunter ist jeder anklickbare Optionspunkt in eine Liste eingebettet. Diese Art der Sidebar ist in vielen Designs zu finden. Daneben gibt es aber auch Themes, bei der die Sidebar als eine durchgängig verschachtelte Liste angelegt ist, das ist die etwas „feinere“ Variante.

Sidebar einrichten

Unsere Sidebar ist nun aber noch leer, weil die vorhandenen widgets noch keinem Bereich zugeordnet wurden. In WordPress 2.5. klickt man sich nun unter Design -> Widgets ein und öffnet die Select-Blox rechts. Hier sind nun alle 4 sidebars zu sehen. Möchte ich nun in der sidebar-oben beispielsweise die letzten postings (recent posts) anzeigen lassen, klicke ich auf sidebar1 und anschließend auf „Anzeigen“. Mir Klick auf das Pluszeichen lässt sich nun das Widget „recent posts“ aus der Spalte links in die sidebar1 transportieren. Abspeichern nicht vergessen, sonst tut sich da nichts ;-) . Analog hierzu lassen sich alle anderen Sidebars mit Inhalten füllen. Wie diese in der sidebar dargestellt werden, ist dann Sache des .css.

9 Gedanken zu „WordPress Widgets – ein Theme widgetfähig machen und Widgets erstellen“

  1. Hm, an sich ein sehr interessanter Artikel.

    Dummerweise scheinen sich hier Fehler eingeschlichen zu haben, denn, egal was ich versuche, – selbst wenn ich quasi eine 1 zu 1 Kopie deiner Anleitung erstelle – es resultiert in der Ausgabe von PHP Fehlern.

    Ich kann leider nicht sagen, woran das liegt, da ich mich nur wenig darin auskenne. Mir ist jedoch aufgefallen, dass einige Code-Vorgaben in den Originaldateien zum Teil geringfügig von den Deinigen abweichen. So zum Beispiel wird in der functions.php der Begriff register_sidebar verwendet, der bei dir registersidebars lautet. Es fehlt der Unterstricht und „sidebar“ wurde zur Mehrzahl „sidebars“. Auch in den einzelnen Sidebars fehlen Unterstriche: ( functionexists(’dynamicsidebar’) Hier fehlen sogar voranstehende Ausrufezeichen. Ist das gewollt?

  2. Absicht war das bestimmt nicht, wahrscheinlich hin und her kopiert und dann ist was auf der Strecke geblieben oder hat sich reingemischelt. Tut mir Leid. Ich schau in den nächsten Tagen danach und werde das korrigieren und den Code nochmal in einer phps Datei zur verfügung stellen – dann kann kann man das auch besser kopieren. Es ist auf jeden Fall so, dass ich auf diese Weise in einem meiner Kundenblogs eine Sidebar mit mehreren Bereichen eingerichtet habe und es dort auch funktioniert.

  3. Ich habe mich nochmal eine Weile dahinter geklemmt und einiges ausprobiert. Mittlerweile funktioniert es auch. :)

    Ich bin mal so frei, meine (geringfügig veränderte) lauffähigen Schnipsel hier anzugeben:

    functions.php
    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name' => 'Name/Nummer der ersten Sidebar',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title' => '',
    ));

    if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'name' => 'Name/Nummer der zweiten Sidebar',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title' => '',
    ));

    erste-sidebar.php (eine der Sidebars eben)


    An der sidebar.php von dir sind keine Änderungen vorzunehmen.

    Ich hoffe, der Code wird hier in den Kommentaren richtig dargestellt und es erspart dir ein wenig Arbeit.

    Ich danke dir für deinen Artikel, du hast mir damit sehr geholfen. :)

  4. Sorry, nochmal ich.

    Anscheinend formatiert WordPress die Schnipsel hier falsch. Auch in meinem Beispiel fehlen die Unterstriche und einige ‚ wurden in `umgewandelt.

    Ich kann es dir auch gerne per E-Mail oder so zukommen lassen. Entschuldige bitte, dass ich dir solche Umstände bereite. ;)

  5. I wo – keine Umstände;-) ein Blog ist zum Diskutieren und Übernehmen da und … nobody is perfect ;-) — Das mit den Anführungszeichen hatte ich schon im Verdacht, das ist leider immer so, denn ich benutze kein Plugin mehr um Code darzustellen und werde statt dessen hier noch, wie schon angekündigt, eine phps zum besseren Kopieren dranhängen. Freut mich, wenn du trotzdem eine Anregung mitnehmen konntest – ich finde es nämlich schon schön und praktisch, wenn man mehrere Bereiche in der sidebar gestalten kann und mit ein bisschen css kann man sich leicht auch noch weitere sidebars dazu zaubern.

  6. hallo,

    danke fuer die Anleitung!
    ich habe mir das ganze aber etwas vereinfacht und den ganzen Code aus den einzelnen Dateien (sidebar-oben.php ,..) in die functions.php kopiert.
    functions.php:

    register_sidebars(1, ...
    register_sidebars(2, ...

    Anstatt dem Include der Dateien, an jeder Stelle den entsprechenden Code:

    mfg
    markus

  7. Hallo zusammen,

    so, da habe ich heute doch wieder ein Plugin zur Darstellung von code installiert. Hoffe, dass nun keine Fehler mehr drin sind und ihr das so gut kopieren könnt. Vielen Dank auch für die guten Tipps – weiter so und viel Spaß mit der Anleitung.

    LG Jutta

Kommentare sind geschlossen.