Ein eigenes WordPress-Widget in 3 einfachen Schritten

Widgets für WordPress erstellen

Um unser eigenes WordPress-Widget zu erstellen, benötigt es nur 3 Schritte.

  1. Das Widget für den Administrator-Bereich registrieren
  2. Die Eingabe-Optionen für das Widget festlegen
  3. Die Ausgabe des Widgets für das Frontend erstellen

Zuerst lokalisieren wir die Datei “functions.php” in unserem Theme. Der Pfad dazu sollte etwa so aussehen: “wp-content/themes/mein-theme/functions.php” Falls die Datei noch nicht vorhanden sein sollte, kann man diese einfach neu erstellen. Sie wird bei jedem Aufruf der Seite geladen und ergänzt oder überschreibt bestehende Funktionen des Blogs.
Wichtig: Nicht die “functions.php” der WordPress-Installation benutzen, da diese bei einem Update überschrieben wird.

Um den Code möglichst übersichtlich zu halten, habe ich kein komplexes Widget erzeugt, sondern beschränke mich auf die Ausgabe einiger Daten. Ich werde dazu aber noch ein weiteres Tutorial anlegen, welches tiefgründigere Funktionen und Aufgaben erläutert.

1. Wir beginnen, das Widget für den Administrator-Bereich zu erzeugen.

Beispiel_Widget im Administrator-BereichFür die Funktion wp_register_sidebar_widget existieren mehrere Optionen, wie zum Beispiel die Vergabe einer Klasse, um das Anpassen über eine CSS-Anweisung zu erleichtern oder auch die Angabe einer Beschreibung. Eine gesamte Übersicht der möglichen Parameter gibt es auf http://codex.wordpress.org/Function_Reference/wp_register_sidebar_widget.

Ich habe mich bei der Erstellung auf 2 Optionen beschränkt: Die Klasse und die Widget-Beschreibung.

2. Wir erstellen den Controller für das soeben erzeugte Widget.

Widget-Optionen im Administrator-BereichHierbei werden alle Einstellungsmöglichkeiten für das erzeugte Widget definiert. Man kann ein Widget auch ohne einen solchen Controller einbinden, was aber dazu führt, dass im Administrator-Bereich keine Anpassung für die Darstellung des Widgets erfolgen kann.

Bei meinem einfachen Beispiel erzeuge ich dafür lediglich 4 Eingabefelder (Input-Felder), denen ich dann Werte zuweisen kann. Diese Werte werden beim Klick auf “Speichern” in die WordPress-Datenbank geschrieben und werden dann bei der Anzeige auf der Seite wieder ausgelesen.

3. Im letzten Schritt erzeugen wir die Ausgabe

Wir erstellen die in Schritt 1 aufgerufene Funktion zur Darstellung unseres Widgets. Diese benötigen wir, um eine fehlerfreie Integration in unser bestehendes Theme zu ermöglichen.

ex_widget_3
Unser erstes eigenes WordPress-Widget ist fertig und kann aktiviert werden. Zum Test habe ich etwas Blindtext eingefügt und einen Link zur Twitter-Seite erstellt. Im Projekt sieht die Ausgabe dann einheitlich aus und integriert sich perfekt in die Optik der anderes Widgets auf der Seite.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *