WordPress 2.8 bringt eine neue objektorientierte Schnittstelle für Widgets mit. Sie ist eine der wichtigsten Neuerungen in Version 2.8 und läutet auch endlich den Weg in Richtung OOP in WordPress ein.
Ab 2.8 sind Widgets nun endlich Klassen welche aus WP_Widget abgeleitet werden. Die Elternklasse bringt schon alle notwendigen Methoden mit um Wigetdaten in Sidebars zu verankern, Formulare im Adminpanel zu integrieren und Einstellungen zu speichern.
Dateiname und Pfad
Widgets werden im Pluginverzeichnis von WordPress gespeichert. Nach Standardkonfiguration in diesem Beispiel unter wp-content/plugins/hello-world/hello-world.php abgelegt. Datei- und Ordnername dürfen beliebig gewählt werden. Zu Bedenken ist dass immer die Datei als Plugin erkannt wird welche den entsprechenden Kopf enthält. Ein Verzeichnis kann auch mehrere valide Plugindateien enthalten welche getrennt voneinander im Adminpanel (de)-aktiviert werden können.
Kopf eines Plugins
1 2 3 4 5 6 7 8 | /*
Plugin Name: Hello World Widget
Plugin URI: http://exmaple.com/HelloWorldPluginProject
Description: Beschreibung des Widgets für den Plugin Adminbereich
Version: 1.0
Author: Dennis Hoppe
Author URI: http://DennisHoppe.de
*/ |
Diese Eigenschaften ergeben dann im Adminpanel folgendes Bild:
Grundgerüst eines Widgets
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Class HelloWorld Extends WP_Widget { Function HelloWorld(){ // Konstruktor: Hooks, Filter, etc. $this->WP_Widget ( False, 'Hello World!'); // Names des Widgets } Function widget ($args, $settings){ // Ausgabe in der Sidebar } Function form ($settings){ // Form der Admineinstellungen } Function update ($new_settings, $old_settings){ // Speichert Einstellungen aus dem Adminpanel } } |
Nun muss das Widget noch als Solches registriert werden. Hier müssen wir etwas tricksen da die Funktion Register_Widget zum Zeitpunkt der Aktivierung des Plugins noch nicht zur Verfügung steht. Wir bedienen uns also eines Hooks und einer anonymen Funktion.
1 2 | // Hook um das Widget zu Registrieren Add_Action ('widgets_init', Create_Function('', 'Register_Widget("HelloWorld");')); |
Nach der Aktivierung sollte das Widget nun unter Darstellung > Widgets zur Verfügung stehen und sich beliebig oft in verschiedenen Sidebars einfügen lassen.
Nun müssen wir das Widget dazu bringen auch etwas zu tun. Dafür stellt WP_Widget die Funktion wiget() zur Verfügung. Als Parameter bekommen wir die Einstellungen des aktuellen Themes sowie alle gespeichert Einstellungen für das aktuelle Widget.
Die Ausgabe erfolgt durch ein einfaches Echo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | Class HelloWorld Extends WP_Widget { Function HelloWorld(){ // Konstruktor: Hooks, Filter, etc. $this->WP_Widget ( False, 'Hello World!'); } Function widget ($args, $settings){ // Ausgabe in der Sidebar // Ausgabe des Widgets Pre-Codes: Echo $args['before_widget']; // Ausgabe des Titels Echo $args['before_title']; Echo 'Hello World!'; // Der Titel Echo $args['after_title']; // Ausgabe eines Textes: Echo 'Das ist ein Hallo Welt Widget! Ich kann auch dynamische Inhalte anzeigen: '.Date('d.m. H:i'); // Ausgabe des Widgets Post-Codes: Echo $args['after_widget']; } Function form ($settings){ // Form der Admineinstellungen } Function update ($new_settings, $old_settings){ // Speichert Einstellungen aus dem Adminpanel } } |
Als nächstes braucht das Widget Einstellungsmöglichkeiten. Dabei gibt form() das Formular zum Einstellen der Konfigurationsdaten aus. Um öffnende und schließende < f o r m > Tags müssen Sie sich nicht kümmern, das macht WP für Sie.
Alle Felder die innerhalb Ihres Formulars verwendet werden sollen müssen allerdings für das System kenntlich gemacht werden damit die richtigen Postdaten auch in der richtigen Funktion ankommen. Diese Aufgabe übernimmt die Funktion get_field_name($name).
form() erhält als Parameter einen assoziativen Array mit den aktuellen Einstellungen, welche Sie verwenden können um Felder vor zu belegen.
Die Funktion update() bekommt bei einem Klick auf “Speichern” alle aktuellen Einstellungen sowie die Einstellungen die vom Benutzer eingeben wurden. In unserem Hallo Welt Beispiel werden die neuen Einstellungen einfach ungeprüft an den die Klasse zurück gereicht. (Hier kann nicht viel schief gehen. 
)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | Class HelloWorld Extends WP_Widget { Function HelloWorld(){ // Konstruktor: Hooks, Filter, etc. $this->WP_Widget ( False, 'Hello World!'); } Function widget ($args, $settings){ // Ausgabe in der Sidebar // Ausgabe des Widgets Pre-Codes: Echo $args['before_widget']; // Ausgabe des Titels Echo $args['before_title']; Echo 'Hello World!'; // Der Titel Echo $args['after_title']; // Ausgabe eines Textes: Echo $settings['text']; // Ausgabe des Widgets Post-Codes: Echo $args['after_widget']; } Function form ($settings){ // Form der Admineinstellungen Echo '<h3>Einstellungen</h3>'; Echo 'Text: <input name="'.$this-/>get_field_name('text').'" type="text" value="'.$settings['text'].'" />'; } Function update ($new_settings, $old_settings){ // Speicher Einstellungen aus dem Adminpanel return $new_settings; } } |
An dieser Stelle ist das Plugin vollständig Funktionsfähig. Zum Schluss noch einmal die gesamte Datei auf einen Blick.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | /* Plugin Name: Hello World Widget Plugin URI: http://exmaple.com/HelloWorldPluginProject Description: Beschreibung des Widgets für den Plugin Adminbereich Version: 1.0 Author: Dennis Hoppe Author URI: http://DennisHoppe.de */ Class HelloWorld Extends WP_Widget { Function HelloWorld(){ // Konstruktor: Hooks, Filter, etc. $this->WP_Widget ( False, 'Hello World!'); } Function widget ($args, $settings){ // Ausgabe in der Sidebar // Ausgabe des Widgets Pre-Codes: Echo $args['before_widget']; // Ausgabe des Titels Echo $args['before_title']; Echo 'Hello World!'; // Der Titel Echo $args['after_title']; // Ausgabe eines Textes: Echo $settings['text']; // Ausgabe des Widgets Post-Codes: Echo $args['after_widget']; } Function form ($settings){ // Form der Admineinstellungen Echo '<h3>Einstellungen</h3>'; Echo 'Text: <input name="'.$this-/>get_field_name('text').'" type="text" value="'.$settings['text'].'" />'; } Function update ($new_settings, $old_settings){ // Speicher Einstellungen aus dem Adminpanel return $new_settings; } } // Hook um das Widget zu Registrieren Add_Action ('widgets_init', Create_Function('', 'Register_Widget("HelloWorld");')); |
Anmerkung: Teilweise befinden sich im Code Objektzeiger welche “-/>” als Operator enthalten. Diese müssen durch “->” ersetzt werden damit der Code lauffähig wird. Es handelt sich um einen Darstellungsfehler.
Weitere Meinungen
Sie können der Diskussion zu diesem Beitrag über den RSS 2.0 Feed folgen.
Sie können zu diesem Artikel einen Kommentar schreiben oder einen Trackback von Ihrer eigenen Seite setzen.
Kommentare