Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Widgets

Erstellen eigener Widgets mit verschiedenen WordPress-APIs: Einführung

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Final product image
What You'll Be Creating

Widgets sind eine gute Möglichkeit, Websitebesitzern die Kontrolle über das Aussehen (und manchmal die Funktionalität) ihrer WordPress-Websites zu geben. In dieser Serie werden wir eine Handvoll WordPress-Widgets erstellen, indem wir die Widgets-API mit anderen externen APIs kombinieren.

Die Serie besteht aus folgenden Tutorials:

  1. Eine Einleitung
  2. Verwandte Beiträge Widget
  3. Login Widget
  4. FAQ Widget
  5. Widget für die beliebtesen Beiträge mit Google Analytics-Integration
  6. Widget für physische Adressen mit Google Maps-Integration
  7. Abschluss

In diesem Tutorial werde ich Ihnen die WordPress-Widgets-API vorstellen, indem ich ein einfaches Text-Widget (neu) erstelle. Wir werden die verschiedenen Funktionen des Widgets analysieren und untersuchen, um zu verstehen, wie WordPress-Widgets im Allgemeinen funktionieren.

Dieses Widget dient auch als Grundlage, auf der wir beim Erstellen anderer Widgets in den folgenden Teilen dieser Serie aufbauen werden.

WordPress-Widgets

WordPress-Widgets fügen Ihren Seitenleisten oder Widget-Bereichen Ihres Themas Inhalte und Funktionen hinzu. Widgets bieten eine einfache und benutzerfreundliche Möglichkeit, dem Benutzer Design und strukturelle Kontrolle über das WordPress-Thema zu geben, ohne dass er wissen muss, wie man programmiert.

Die meisten WordPress-Widgets bieten Anpassungen und Optionen wie auszufüllende Formulare, optionale Bilder und andere Anpassungsfunktionen.

Untersuchen der Widget-Klasse

Der einfachste Weg, ein WordPress-Widget zu erstellen, besteht darin, die WP_Widget-Klasse zu erben. Auf diese Weise können Sie die integrierten Funktionen verwenden, um das Widget zu aktualisieren, das Widget anzuzeigen und eine Administrationsoberfläche für das Widget zu erstellen.

Um die Funktionsweise von Widgets vollständig zu verstehen, erstellen und untersuchen wir ein leeres Widget. Wir werden dann jede Funktion definieren, aus der das Widget besteht. Sehen Sie also, wie sie zusammenarbeiten, um ein funktionierendes Widget zu erstellen.

Unsere Widget-Definition



Die Funktionen im Detail

Schauen wir uns jede Funktion genauer an:

__construct()

Diese Funktion registriert das Widget bei WordPress

widget()

Diese Funktion ist für die Front-End-Anzeige des Widgets verantwortlich. Es gibt den Inhalt des Widgets aus

update()

Verarbeitet die Widget-Optionen beim Speichern. Verwenden Sie diese Funktion, um Ihr Widget zu aktualisieren (Option). Diese Funktion akzeptiert zwei Parameter:

  1. $new_instance - Werte, die gerade gesendet wurden, um gespeichert zu werden. Diese Werte stammen aus dem in der form()-Methode definierten Formular
  2. $old_instance - Zuvor gespeicherte Werte aus der Datenbank

Stellen Sie sicher, dass Sie alle vom Benutzer übermittelten Werte hier bereinigen. Vom Benutzer übermittelte Werte müssen immer bereinigt werden, bevor sie an die Datenbank gesendet werden

form()

Die Methode/Funktion form() wird verwendet, um das Back-End-Widget-Formular zu definieren, das Sie im Widgets-Bereich im Dashboard sehen. Mit diesem Formular kann ein Benutzer den Titel und andere Optionen für das Widget einrichten.

Diese Funktion akzeptiert die folgenden Parameter:

  • $instance - Zuvor gespeicherte Werte aus der Datenbank

Unser Widget erstellen

Um unser Widget zu erstellen, gehen Sie folgendermaßen vor:

  • Definieren Sie, was wir erstellen
  • Registrieren Sie unser Widget bei WordPress
  • Erstellen Sie das Back-End-Formular
  • Speichern Sie Werte in der Datenbank
  • Definieren Sie das Front-End-Display
  • Registrieren Sie das Widget

Was schaffen wir?

Wie bereits erwähnt, erstellen wir ein einfaches Text-Widget, mit dem ein Benutzer einen Titel und einen beliebigen Text eingeben kann, der dann im Front-End seiner Website ausgegeben wird, auf der das Widget platziert ist.

Widget-Konstruktor

Mit dem Konstruktor können wir unser Widget initialisieren, indem wir die übergeordnete Klasse (Standardklasse WP_Widget) überschreiben.



Im obigen Code rufen wir die Konstruktionsfunktion der übergeordneten WP_Widget-Klasse auf und übergeben ihr die folgenden Argumente:

  • Basis-ID - Eine eindeutige Kennung für das Widget. Muss in Kleinbuchstaben sein. Wenn leer, wird ein Teil des Klassennamens des Widgets verwendet.
  • Name - Dies ist der Name für das Widget, das auf der Konfigurationsseite (im Dashborad) angezeigt wird.
  • Und ein (optionales) Array, das einen Klassennamen und eine Beschreibung enthält. Die Beschreibung wird auf der Konfigurationsseite (im WordPress-Dashboard) angezeigt.

Erstellen des Back-End-Formulars

Das Backend-Formular besteht aus zwei Feldern - einem Titelfeld und einem Textfeld. Hier ist ein Screenshot des Formulars, wie es im Widgets-Bedienfeld angezeigt wird:

Our widgets back-end configuration form

Um das obige Formular zu generieren, beginnen wir mit reinem HTML und ersetzen dann einige Attributwerte durch einige PHP-Variablen und Ausdrücke. Das Folgende ist der HTML-Code zum Erstellen der beiden Felder:



Um von diesem zu unserem endgültigen Code für die form() -Funktion zu gelangen, müssen wir einige der oben genannten Attribute dynamisch machen - nämlich Name, ID und das Attribut for der Bezeichnung (das mit der ID des HTML-Codes übereinstimmen muss, den die Bezeichnung enthält ist für). Wir werden auch den Wert des Textfelds und den Inhalt des Textfelds durch dynamische Werte aus der Datenbank ersetzen, sofern diese bereits gespeichert wurden.

Hier ist der Code, mit dem wir enden:



Der obige Code greift auf zuvor gespeicherte Werte aus der Datenbank zu und weist zwei Variablen zu - $title und $message. Wir verwenden dann esc_attr(), um die zurückgegebenen Werte zu codieren und zu vermeiden, dass unser Code beschädigt wird. Anschließend geben wir das Attribut $title in das Attribut value des Textfelds zurück und geben $message als Inhalt des Textfelds wieder.

Im obigen Code werden Sie zwei Methoden bemerken, die für Sie wahrscheinlich neu sind - get_field_id() und get_field_name().

  • get_field_id() - Nimmt den Feldnamen als Argument und erstellt ID-Attribute zur Verwendung in form()-Feldern. Es stellt sicher, dass die zurückgegebene Feld-ID eindeutig ist
  • get_field_name() - Nimmt den Feldnamen als Argument und erstellt Namensattribute zur Verwendung in form()-Feldern. Es stellt sicher, dass der zurückgegebene Feldname eindeutig ist.

Das Attribut label tag for ist so codiert, dass der ID-Wert der Elemente, die sie kennzeichnen, wiedergegeben wird.

Die widefat-Klasse wird verwendet, um sicherzustellen, dass die Felder Ihres Widgets genauso aussehen wie andere Felder im gesamten WordPress-Dashboard.


Aktualisieren unseres Widgets (Optionen)

Um unser Widget zu aktualisieren, schreiben wir den entsprechenden Code in die Aktualisierungsmethode. Hier ist unser Code:


Die obige Funktion akzeptiert zwei Parameter - $new_instance und $old_instance

  • $new_instance ist ein Array, das die neuen Einstellungen (dieser Instanz des Widgets) enthält, die der Benutzer gerade über das Backend-Formular eingegeben hat, das wir in der Funktion form() definieren.
  • $old_settings ist ein Array mit alten Einstellungen. Dies sind die Werte, die derzeit in der Datenbank gespeichert sind.

Die Funktion update() gibt eine Reihe von Einstellungen zurück, die gespeichert werden sollen, oder false, um das Speichern abzubrechen.

Im obigen Code weisen wir der $instance-Variablen $old_instance zu und ersetzen ihren Titel und ihre Nachrichtenschlüssel durch Werte aus $new_instance. Durch die Rückgabe des neuen und aktualisierten Arrays aktualisieren wir effektiv unsere Widget-Einstellungen.

Die Funktion strip_tags() entfernt HTML- und PHP-Tags aus einer an sie übergebenen Zeichenfolge. Wir schließen diese Funktion ein, um zu vermeiden, dass die Benutzer Ihres Themas die über das Back-End-Formular eingegebenen Tags nicht schließen können, was dazu führt, dass Ihre Website beschädigt wird (nicht richtig gerendert wird).

Das Front-End definieren

Die Funktion widget() ist für die Front-End-Anzeige des Widgets verantwortlich. Es werden zwei Parameter benötigt - $args und $instance.

$args ist ein Array, das an die Funktion register_sidebar() übergeben wird, wenn der Seitenleisten-/Widget-Bereich definiert wird, in dem das Widget platziert wird. Dies befindet sich in Ihrer Datei functions.php. Unten finden Sie ein Beispiel für eine register_sidebar() - Deklaration:

Sample register_widget declaration

Das Array enthält Definitionen der öffnenden und schließenden Tags für das Widget selbst und für den Titel des Widgets.

$instance ist ein Array, das die Einstellungen für die bestimmte Instanz des Widgets enthält. Diese Einstellungen wurden aus der Datenbank abgerufen.

Wir verwenden die oben genannten Tags im endgültigen Widget-Code:


Im obigen Code können wir endlich das Front-End unseres Widgets codieren. Unser Widget gibt einfach einen Titel und eine beliebige Nachricht (Text) aus. Der Code macht genau das und umschließt das Widget selbst und den Titel des Widgets mit öffnenden und schließenden Tags, die in functions.php für den spezifischen Widget-Bereich (Seitenleiste) definiert sind, in dem sich das Widget befindet.

Wir führen die Funktion extract() ein, mit der einige möglicherweise nicht vertraut sind. Diese Funktion verwendet ein assoziatives Array und gibt seine Schlüssel als Variablen zurück. Es ermöglicht uns, $before_widget anstelle von $args['before_widget'] wiederzugeben, wodurch unser Code ein wenig vereinfacht wird.

Die endgültige Ausgabe auf einer tatsächlichen Website sieht ungefähr so aus:

Our text widget on an actual site

Registrieren des Widgets

Das Widget muss nach seiner Definition bei WordPress registriert werden, damit es im Widget-Bereich unseres WordPress-Dashboards verfügbar ist.

Der endgültige Code

Um den Endbenutzern unserer Widgets die Arbeit zu erleichtern, werden wir unseren Widget-Code in ein WordPress-Plugin einbinden, damit er einfach zu installieren ist.

Auf diese Weise können wir auch den gesamten Code, den wir während der gesamten Serie erstellen, in einer einzigen Datei speichern.

Hier ist der endgültige Code:


Abschluss

In diesem Tutorial haben wir die Serie vorgestellt - Erstellen eigener WordPress-Widgets mit verschiedenen APIs. Wir haben uns genauer angesehen, was sie sind, wie sie funktionieren und wie man sie erstellt.

Der Zweck dieses Tutorials bestand darin, eine gründliche Einführung in die Widgets-API zu geben und ein Basis-Widget bereitzustellen, aus dem die anderen Widgets in dieser Reihe erstellt werden können.

Im nächsten Teil der Serie werden wir ein Widget für verwandte Beiträge erstellen. In der Zwischenzeit können Sie Fragen oder Kommentare im unten stehenden Formular hinterlassen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.