Wordpress Basics: Ein Widget Area in ein Theme einbauen
Zukünftig möchte ich euch in mehrern Einführungs- Tutorials grundlegende Wordpress Funktionen und deren Umsetzung in eigenen Themes näher bringen. Zum einen um Einsteigern bei der Wordpress Theme Entwicklung zu unterstützen und zum anderen als eigenen kleine “how-to” Sammlung. Fangen wir mit dem Einrichten eines individuellen Widget Bereiches an.
Grundsätzlich: Widgets in Wordpress sind toll.
Bearbeiter können im Wordpress Backend einfach per Drag-and-Drop Inhalte hinterlegen, Menüs platzieren oder andere tolle Sachen machen. Ohne das am Quelltext etwas verändert werden müßte. In Sekunden können diese Inhalte geändert oder wieder gelöscht werden. Viele Plugins kommen mit einer Vielzahl zusätzlicher Widgets daher die genauso einfach platziert und administriert werden können. Grundvoraussetzung für das platzieren von Widgets in sogenannten Widget Areas ist aber das diese Bereiche im Theme definiert sind.
Dies erfolgt in zwei Schritten: 1. Ein Widget Area in der functions.php Datei des Themes registrieren 2. Die Ausgabe der Widget Inhalte im Theme selber bestimmen
1. Widget Area in der functions.php Datei registrieren
Damit nun im Wordpress Backend auf einfache Art und Weise Widgets angelegt und veröffentlicht werden können, muss Wordpress zunächst mitgeteilt werden das es ein oder mehrere Widget Bereiche gibt. Dies läuft über die functions.php. Wird ein Theme neu erstellt muss einfach eine leere Datei mit dem entsprechenden Namen im Hauptverzeichnis des Themes angelegt werden. Wird ein vorgefertigtes Theme genutzt findet sich mit allergrößter Wahrscheinlichkeit bereits eine Datei mit diesem Namen im Hauptverzeichnis. Hier wird dann folgendes hinterlegt:
function deinthemename_widgets_init() { register_sidebar(array( 'name' => 'Erstes Widget', 'id' => 'erstes_widget', 'description' => 'Mein erstes selbst angelegtes Widget Area', 'before_widget' => '
', 'before_title' => '', 'after_title' => '
', ) ); } add_action( 'widgets_init', 'deinthemename_widgets_init' );Achtung: Befindet sich noch gar nichts in der functions.php Datei muss noch vor der Funktion der öffnende PHP Tag <?php notiert werden, und am Ende der schließende: ?>
Befinden sich bereits Funktionen in der Datei ist dies bereits der Fall. Dann muss der Code oben eben nur zwischen die beiden Tags kopiert werden. Wichtig bei der Funktion ist eigentlich nur die Angabe einer eindeutigen ID. Über diese funktioniert die Zuordnung zwischen angelegtem Widget im Backend und Ausgabe der Inhalte im Frontend.
Der Rest ist im Prinzip optional. Der “name” und die “description” wird beispielsweise nur im Backend angezeigt und soll die Zuordnung ermöglichen. Die Angabe dieser Werte ist also durchaus sinnvoll aber nicht zwingend. Die anderen Angaben helfen einem das Erscheinungsbild des Widgets individuell per CSS festzulegen.
Ist die Arbeit an der functions.php abgeschlossen können bereits Widgets im Wordpress Backend der neuen Position zugeordnet werden. Im Frontend wird allerdings noch nichts angezeigt, da wir Wordpress noch nicht mitgeteilt haben wo das Widget erscheinen soll.
"Mein erstest selbst angelegtes Widget" - So siehts dann im Wordpress Backend aus.
2. Die Ausgabe des Widget Inhalts im Theme
Jetzt wirds einfach. Es muss nur der folgende PHP Code:
an der Stelle im Theme hinterlegt werden, auf der der Widget Inhalt erscheinen soll. Der Code Schnipsel überprüft ob ein Widget veröffentlicht ist, wenn ja wird sich der Inhalt geholt und ausgegeben.
Das läßt sich noch mit etwas HTML anreichern:
Tatatata: Jetzt erscheint an der definierten Stelle das angelegte und zugeordnete Widget.
Weiterführende Informationen zum Thema: