So erstellen Sie ein Widget-Plugin für WordPress

WordPress ist ein erstaunliches Content Management System mit vielen großartigen Funktionen wie Widgets. In diesem Tutorial werde ich Ihnen erklären, wie Sie Ihre eigenen Widgets in einem kleinen Plugin erstellen. Dieser Beitrag behandelt einige zusätzliche Punkte, die Sie verstehen müssen, bevor Sie das Widget selbst erstellen. Auf geht’s!


Schritt 1: Erstellen Sie Ihr Widget-Plugin

Ich habe kürzlich ein Plugin namens “Freelancer Widgets Bundle” erstellt und einige Leute haben mich gefragt, wie man ein solches Plugin erstellt. Deshalb habe ich beschlossen, diesen Beitrag zu schreiben. Der erste Schritt ist die Erstellung des Plugins. Und wie Sie sehen werden, ist dies nicht der schwierigste Teil. Ein Plugin ist ein zusätzlicher Code, der WordPress hinzugefügt wird, sobald Sie es aktivieren. WordPress erstellt eine Schleife durch einen Ordner, um alle verfügbaren Plugins abzurufen und im Backoffice aufzulisten. Zum Erstellen Ihres Plugins benötigen Sie einen Editor wie Coda (Mac) oder Dreamweaver (PC & Mac). Ich empfehle Ihnen, Ihr Plugin in einer lokalen Installation von WordPress zu erstellen. Wenn Sie es auf einem Live-Server erstellen, kann dies zu Problemen führen, wenn Sie einen Fehler machen. Warten Sie also bitte, um unser Plugin zu testen, bevor Sie Ihr Hosting darauf platzieren.

Öffne jetzt den Ordner wp-content / plugins. Hier fügen Sie Ihr Plugin hinzu. Erstellen Sie ein neues Verzeichnis und nennen Sie es “Widget-Plugin” (tatsächlich kann dieser Name beliebig sein). Auch wenn unser Plugin nur eine einzige Datei enthält, ist es immer besser, für jedes Plugin einen Ordner zu verwenden. Erstellen Sie in Ihrem Verzeichnis eine neue Datei mit dem Namen “widget-plugin.php” (dieser Name kann auch geändert werden) und öffnen Sie sie. Wir sind jetzt dabei, unsere ersten Codezeilen hinzuzufügen. Die Definition eines Plugins unter WordPress folgt einigen Regeln, die Sie lesen können hier im Kodex. So definiert WordPress ein Plugin:

Wir müssen diesen Code also ändern, damit er unseren Anforderungen entspricht:

Speichern Sie Ihre Datei. Indem wir nur Code zu unserer Datei widget-plugin.php hinzufügen, haben wir ein Plugin erstellt! Nun, im Moment macht das Plugin nichts, aber WordPress erkennt es. Um sicherzustellen, dass dies der Fall ist, gehen Sie zu Ihrer Verwaltung und gehen Sie zum Menü "Plugins". Wenn Ihr Plugin in der Plugin-Liste angezeigt wird, sind Sie gut. Andernfalls stellen Sie sicher, dass Sie meinen Anweisungen gefolgt sind, und versuchen Sie es erneut. Sie können jetzt das Plugin aktivieren.

Schritt 2: Erstellen Sie das Widget

Wir werden jetzt das Widget selbst erstellen. Dieses Widget wird eine PHP-Klasse sein, die die Kernklasse von WordPress erweitert WP_Widget. Grundsätzlich wird unser Widget folgendermaßen definiert:

// Die Widget-Klasse
Klasse My_Custom_Widget erweitert WP_Widget {

// Hauptkonstruktor
öffentliche Funktion __construct () {
/ * ... * /
}}

// Das Widget-Formular (für das Backend)
öffentliches Funktionsformular ($ instance) {
/ * ... * /
}}

// Widget-Einstellungen aktualisieren
Aktualisierung der öffentlichen Funktion ($ new_instance, $ old_instance) {
/ * ... * /
}}

// Widget anzeigen
Widget für öffentliche Funktionen ($ args, $ instance) {
/ * ... * /
}}

}}

// Registriere das Widget
Funktion my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}}
add_action ('widgets_init', 'my_register_custom_widget');

Dieser Code gibt WordPress alle Informationen, die das System benötigt, um das Widget verwenden zu können:

  1. Das Konstrukteur, um das Widget zu starten
  2. Das form () Funktion um das Widget-Formular in der Administration zu erstellen
  3. Das update () Funktion, um Widget-Daten während der Edition zu speichern
  4. Und der Widget () Funktion um den Widget-Inhalt im Front-End anzuzeigen

1 - Der Konstruktor

Der Konstruktor ist der Teil des Codes, der den Widget-Namen und die Hauptargumente definiert. Nachfolgend finden Sie ein Beispiel dafür, wie er aussehen kann.

// Hauptkonstruktor
öffentliche Funktion __construct () {
parent :: __ Konstrukt (
'my_custom_widget',
__ ('Mein benutzerdefiniertes Widget', 'Textdomäne'),
Array (
'customize_selective_refresh' => true,
)
);
}}

Bitte nicht die Verwendung von __ () um den Widget-Namen, diese Funktion wird von WordPress für die Übersetzung verwendet. Ich empfehle Ihnen wirklich, immer zu verwenden diese Funktionen, um Ihr Thema vollständig übersetzbar zu machen. Durch die Verwendung des Parameters "customize_selective_refresh" kann das Widget unter aktualisiert werden Aussehen> Anpassen Wenn Sie das Widget so bearbeiten, dass nicht die gesamte Seite aktualisiert wird, wird nur das Widget aktualisiert, wenn Sie Änderungen vornehmen.

2 - Die Funktion form ()

Diese Funktion erstellt die Widget-Formulareinstellungen im WordPress-Administrationsbereich (entweder unter Darstellung> Widgets oder Darstellung> Anpassen> Widgets). Hier geben Sie Ihre Daten ein, die auf der Website angezeigt werden sollen. Daher erkläre ich, wie Sie Ihren Widget-Formulareinstellungen Textfelder, Textbereiche, Auswahlfelder und Kontrollkästchen hinzufügen können.

// Das Widget-Formular (für das Backend)
öffentliches Funktionsformular ($ instance) {

// Widget-Standardeinstellungen festlegen
$ defaults = array (
'title' => '',
'text' => '',
'textarea' => '',
'checkbox' => '',
'select' => '',
);

// Aktuelle Einstellungen mit Standardeinstellungen analysieren
extract (wp_parse_args ((Array) $ instance, $ defaults)); ?>


/>

Dieser Code fügt dem Widget einfach 5 Felder hinzu (Titel, Text, Textbereich, Auswahl und Kontrollkästchen). Zuerst definieren Sie die Standardeinstellungen für Ihr Widget, dann analysiert die nächste Funktion die aktuellen Einstellungen, die für Ihr Widget definiert / gespeichert wurden, mit den Standardeinstellungen (sodass nicht vorhandene Einstellungen auf die Standardeinstellungen zurückgesetzt werden, z. B. wenn Sie zum ersten Mal ein Widget hinzufügen Ihre Seitenleiste). Und zuletzt ist das HTML für jedes Feld. Beachten Sie die Verwendung von esc_attr () beim Hinzufügen der Formularfelder. Dies erfolgt aus Sicherheitsgründen. Wenn Sie eine benutzerdefinierte Variable auf Ihrer Website wiedergeben, sollten Sie sicherstellen, dass sie zuerst bereinigt wird.

3 - Die Funktion update ()

Die update () Funktion ist wirklich einfach. Da die Kernentwickler von WordPress eine wirklich leistungsstarke Widgets-API hinzugefügt haben, müssen wir nur diesen Code hinzufügen, um jedes Feld zu aktualisieren:

// Widget-Einstellungen aktualisieren
Aktualisierung der öffentlichen Funktion ($ new_instance, $ old_instance) {
$ instance = $ old_instance;
$ instance ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instance ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instance ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instance ['checkbox'] = isset ($ new_instance ['checkbox'])? 1: falsch;
$ instance ['select'] = isset ($ new_instance ['select'])? wp_strip_all_tags ($ new_instance ['select']): '';
return $ instance;
}}

Wie Sie sehen, müssen wir nur nach jeder Einstellung suchen und sie in der Datenbank speichern, wenn sie nicht leer ist. Beachten Sie die Verwendung der Funktionen wp_strip_all_tags () und wp_kses_post (). Diese werden verwendet, um die Daten zu bereinigen, bevor sie der Datenbank hinzugefügt werden. Wenn Sie vom Benutzer übermittelte Inhalte in eine Datenbank einfügen, müssen Sie sicherstellen, dass kein schädlicher Code vorhanden ist. Die erste Funktion wp_strip_all_tags entfernt alles außer dem Basistext, sodass Sie sie für alle Felder verwenden können, in denen der Endwert eine Zeichenfolge ist. Die zweite Funktion wp_kses_post () ist dieselbe Funktion, die für den Inhalt des Beitrags verwendet wird, und entfernt alle Tags außer einfachen HTML-ähnlichen Links , Spannweiten, Divs, Bilder usw..

4 - Die Funktion widget ()

Die Funktion widget () gibt den Inhalt der Website aus. Das werden Ihre Besucher sehen. Diese Funktion kann so angepasst werden, dass sie CSS-Klassen und bestimmte Tags enthält, die perfekt zu Ihrer Themenanzeige passen. Hier ist der Code (bitte nicht, dass dieser Code leicht an Ihre Bedürfnisse angepasst werden kann):

// Widget anzeigen
Widget für öffentliche Funktionen ($ args, $ instance) {

extrahieren ($ args);

// Überprüfen Sie die Widget-Optionen
$ title = isset ($ instance ['title'])? apply_filters ('widget_title', $ instance ['title']): '';
$ text = isset ($ instance ['text'])? $ instance ['text']: '';
$ textarea = isset ($ instance ['textarea'])? $ instance ['textarea']: '';
$ select = isset ($ instance ['select'])? $ instance ['select']: '';
$ checkbox =! leer ($ instance ['checkbox'])? $ instance ['checkbox']: false;

// WordPress Core before_widget Hook (immer einschließen)
echo $ before_widget;

// Widget anzeigen
Echo '
'; // Widget-Titel anzeigen, falls definiert if ($ title) { echo $ before_title. $ title. $ after_title; }} // Textfeld anzeigen if ($ text) { Echo '

'. $ text. '

'; }} // Textfeld anzeigen if ($ textarea) { Echo '

'. $ textarea. '

'; }} // Auswahlfeld anzeigen if ($ select) { Echo '

'. $ select. '

'; }} // Etwas anzeigen, wenn das Kontrollkästchen wahr ist if ($ checkbox) { Echo '

Etwas großartiges

'; }} Echo '
'; // WordPress Core After_widget Hook (immer enthalten) echo $ after_widget; }}

Dieser Code ist nicht komplex. Sie müssen lediglich überprüfen, ob eine Variable festgelegt ist. Wenn Sie dies nicht tun und wenn Sie sie drucken möchten, wird eine Fehlermeldung angezeigt.

Der vollständige Widget-Plugin-Code

Wenn Sie nun richtig gefolgt sind, sollte Ihr Plugin nun voll funktionsfähig sein und Sie können es an Ihre Bedürfnisse anpassen. Wenn Sie der Anleitung nicht gefolgt sind oder den Code noch einmal überprüfen möchten, können Sie auf der Github-Seite den vollständigen Code anzeigen.

Vollständigen Code auf Github anzeigen

Fazit

Wir haben gesehen, dass das Erstellen eines Widgets in einem Plugin sehr interessant ist. Jetzt müssen Sie wissen, wie man ein einfaches Plugin erstellt, das ein Widget mit verschiedenen Feldtypen enthält, und Sie haben gelernt, wie Sie mithilfe erweiterter Techniken zum Anpassen des Widgets etwas weiter gehen können. Herzlichen Glückwunsch, Sie haben einen tollen Job gemacht!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map