✅ WEB- und WordPress-Nachrichten, Themen, Plugins. Hier teilen wir Tipps und beste Website-Lösungen.

Tutorial: Erstellen Sie ein Mikrodaten-Widget für Ihr Unternehmen in WordPress

13

In diesem Lernprogramm erfahren Sie, wie Sie ein benutzerdefiniertes Widget erstellen, das Ihre Geschäftsinformationen ausgibt, z. B. den offiziellen Namen, die Adresse, die Telefonnummer und die E-Mail-Adresse. Aber wir gehen noch einen Schritt weiter, indem wir sie mit Mikrodaten oder Schema-Markup ausgeben, wodurch Suchmaschinen Ihre Inhalte verstehen können.

Widgets sind dynamische Blöcke, die in verfügbaren Bereichen Ihres Designs platziert werden können. Normalerweise hat Ihr Thema mindestens eine Seitenleiste und einen oder mehrere Bereiche in der Fußzeile. Ihre Geschäftsinformationen als Widget in der Fußzeile zu haben, ist üblich und ziemlich intelligent – ​​da die Fußzeile auf allen Seiten Ihrer Website erscheint.

Mikrodaten sind zusätzliche HTML-Attribute, die erklären, was ein bestimmtes HTML-Tag enthält, damit eine Maschine verstehen kann, was sie sind (z. B. Firmenname, Telefonnummer, Geschäftsadresse, geschäftliche E-Mail-Adresse usw.). Dadurch können Suchmaschinen wie Google Informationen über Ihr Unternehmen aus Ihrem HTML extrahieren.

Was wir erstellen

Unser Widget gibt Informationen mithilfe des Mikrodatenschemas LocalBusiness aus, das sich perfekt für eine Organisation oder ein Unternehmen eignet. Es liegt ganz bei Ihnen, welche Eigenschaften Sie ausgeben möchten. Klicken Sie einfach auf den obigen Link, um alle möglichen Eigenschaften in LocalBusiness (einschließlich geerbter) zu lesen. Ihr Unternehmen oder Ihr Land bevorzugt möglicherweise andere Arten von Informationen.

Das Widget dieses Tutorials gibt die folgenden optionalen Informationen aus:

  • Firmenname (Microdata-Eigenschaft: legalName)
  • Umsatzsteuer-Identifikationsnummer oder Organisationsnummer (Microdata-Eigenschaft: vatID)
  • Postanschrift (Microdata-Tag: PostalAddressmit Eigenschaften für streetAddress, postalCode, und addressLocality)
  • E-Mail-Adresse des Unternehmens (Microdata-Eigentum: email)
  • Telefonnummer (Microdata-Eigenschaft: telephone)

Dieses Tutorial führt Sie nicht durch das Styling des Widgets, da dies ziemlich einfach sein sollte. Im Frontend sieht unser Widget wie ein normales Text-Widget aus. Aber unter der Haube hat es natürlich ein Schema-Markup, das Google hilft.

Die Grundlagen zum Erstellen eines benutzerdefinierten Widgets

Sie können Ihren Code in Ihr Design einfügen functions.phpoder ein benutzerdefiniertes Plugin erstellen. Denken Sie nur daran, dass Sie das Widget verlieren, wenn Sie es in einem Plugin behalten, wenn Sie das Plugin deaktivieren. Wenn Sie es im Design behalten, verlieren Sie das Widget, wenn Sie zu einem anderen Design wechseln. In diesem Beispiel füge ich den Code in die functions.php.

Das Erstellen eines Widgets erfolgt mit objektorientiertem PHP-Code. Sie schreiben eine PHP-Klasse, die die Widget-Klasse von WordPress erweitert, und initialisieren sie, register_widget()indem Sie Ihren Klassennamen aufrufen und angeben. In diesem Tutorial habe ich meine Widget-Klasse benannt LocalBusiness.

Beginnen wir mit dem Aufrufen register_widget()einer Funktion, die mit der Aktion verbunden ist widgets_init.

add_action('widgets_init', function() { register_widget('LocalBusiness'); });

Lassen Sie uns schnell einen Blick auf das Skelett einer benutzerdefinierten Widget-Klasse werfen:

class LocalBusiness extends WP_Widget {   // Initialize your widget in the class constructor public function __construct() { }   // Responsible for outputting the widget in frontend public function widget($args, $instance) { }   // Responsible for outputting the widget settings in admin public function form($instance) { }   // Responsible for saving settings in admin public function update($new_instance, $old_instance) { } }

Wie Sie oben sehen können, benötigen Sie vier Funktionen in Ihrer Klasse. Gehen wir jede Funktion einzeln durch und füllen sie aus.

Erstellen eines LocalBusiness-Mikrodaten-Widgets

Der logischste Ausgangspunkt ist der Konstruktor, der für die Einrichtung Ihres Widgets verantwortlich ist.

Die Funktion __construct()

Innerhalb des Konstruktors müssen Sie einige Variablen einrichten, z. B. den Namen des Widgets, und die Konstruktorfunktion des übergeordneten Elements aufrufen (die übergeordnete Klasse ist diejenige, die Sie erweitern; WP_Widget). Lesen Sie hier mehr über mögliche Optionen im Konstruktor. Ich werde eine Basis-ID, einen Titel und eine Beschreibung wie folgt bereitstellen:

Sie können mehr in der __constructMethode tun, wie z. B. das Einreihen von Skripts oder das Definieren weiterer Widget-Einstellungen. Aber das Obige reicht normalerweise in den meisten Fällen aus.

Die Funktion form()

Der nächste Schritt besteht darin, alle Einstellungen und Eingaben zu erstellen, die Ihr Widget im Admin akzeptiert. Für die Ausgabe von Einstellungen an den Widget-Administrator verwenden wir die Funktion form(), die Ihnen einen Parameter gibt; ein Array, das alle Ihre möglicherweise gespeicherten Widget-Optionen enthält. Wichtig ist, dass Sie in allen Eingaben die entsprechende gespeicherte Einstellung ausgeben, damit die Daten erhalten bleiben. (Wie Sie die Einstellungen speichern, sehen wir uns im nächsten Schritt an).

In der Formularfunktion gibt es eine Menge zu verfolgen, also fügen wir zuerst eine Eingabe für den legalen Namen hinzu und stellen sicher, dass wir verstehen, was wir tun müssen:

Zunächst gibt der obige Code einige HTML-Wrapper und -Klassen in der Form aus, in der WordPress ihre Widget-Formulare ausgibt – wir tun dies, damit das Formular gut aussieht.

Es gibt zwei Funktionen, mit denen Sie sich vertraut machen müssen; get_field_id()und get_field_name()und sie sind beide Funktionen innerhalb WP_Widget(weshalb Sie „ $this->” davor aufrufen – wohingegen $thissich auf die Instanz der Klasse bezieht). Die Funktionen geben die ID bzw. den Namen eines bereitgestellten Felds zur Verwendung in Ihren Eingaben idund nameAttributen zurück. Dies ist sehr wichtig Vergessen Sie nicht, ein nameAttribut zu Ihrer Eingabe hinzuzufügen, da Sie sonst beim Speichern nie auf seinen Wert zugreifen können.

Und schließlich geben wir den aktuell gespeicherten Wert valuefür unsere Eingabe aus, indem wir auf das übergebene Argument verweisen $instance. Ohne dies für Ihren Wert zu tun, wird die Eingabe niemals mit dem gefüllt, was in der Datenbank gespeichert ist, und erscheint jedes Mal leer, was Benutzer verwirren kann.

Wenn Sie andere Formulareingaben wünschen, wie z. B. Kontrollkästchen oder Dropdowns, sollten Sie diese nach den oben genannten Regeln problemlos hinzufügen können. Lassen Sie uns den Rest unserer Widget-Einstellungen hinzufügen. Sie sind alle Texteingaben, also ist es derselbe Code wie oben wiederholt, mit Ausnahme ihrer Feld-IDs. Unsere form()Methode sieht am Ende so aus:

Wenn Sie Ihr Widget in einen verfügbaren Widget-Bereich einfügen, sollte es so aussehen:

Tutorial: Erstellen Sie ein Mikrodaten-Widget für Ihr Unternehmen in WordPress

Die Funktion update()

Die update()Funktion ist dafür verantwortlich, Ihre eingegebenen Werte tatsächlich in admin zu speichern. Leider macht WordPress das nicht automatisch für dich. In dieser Funktion werden zwei Parameter bereitgestellt; normalerweise benannt $new_instanceund $old_instance. Innerhalb des ersten Parameters $new_instancefinden Sie alle übermittelten Werte, und innerhalb des zweiten Parameters finden $old_instanceSie die Werte, die derzeit in der Datenbank gespeichert sind. Auf diese Weise können Sie bei Bedarf einige intelligente Vergleiche durchführen.

Normalerweise würden Sie einfach ein neues Array all Ihrer Widget-Einstellungen erstellen und alles speichern, was darin eingestellt ist $new_instance. Wir kümmern uns auch um eine Desinfektion. Schließlich geben wir einfach dieses Array zurück, das WordPress mitteilt, was gespeichert werden soll.

// Responsible for saving settings in admin public function update($new_instance, $old_instance) { $instance = []; $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): ''; $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): ''; $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): ''; $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): ''; $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): ''; $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): ''; $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): ''; return $instance; }

Sie können Ihr Widget jetzt testen, wenn Sie möchten, und überprüfen, ob Ihre eingegebenen Werte gespeichert werden. Und wenn Sie daran denken, das valueAttribut in richtig einzustellen form(), sollten die Werte beim Speichern und Aktualisieren beibehalten werden. Groß! Nun zum letzten und zugegebenermaßen spaßigsten Schritt – der Ausgabe des Frontend-Bits.

Die Widget()-Funktion

Die widget()Funktion ist für die Ausgabe Ihres Widgets im Frontend verantwortlich. Wir erhalten zwei Argumente für die Funktion; erstens ein Array mit einigen nützlichen Informationen, wie z. B. die definierten Widget-Bereichs-Wrapper des Themas, und zweitens Ihre gespeicherten Widget-Einstellungswerte.

Die Ausgabe Ihres Widgets sollte immer mit echoing beginnen $args['before_widget']und immer mit echoing enden $args['after_widget']. Dadurch wird sichergestellt, dass Ihr Widget in die gleichen richtigen Widget-HTML-Wrapper verpackt wird, die vom Design definiert werden. Auf den gleichen Spuren können Sie echo $args['before_title']und $args['after_title']für die Ausgabe korrekter HTML-Wrapper um den Widget-Titel herum verwenden. Wir haben an sich keinen eigentlichen Widget-Titel, aber wir packen den rechtlichen Namen des Unternehmens in einen Widget-Titel.

Andernfalls erhalten Sie Ihre gespeicherten Werte, indem Sie auf das zweite Argument, $instance, mit Ihren in form()und festgelegten Schlüsselnamen verweisen update(). Es hat sich bewährt, nur die gesetzten Einstellungen auszugeben – und die leeren zu ignorieren.

Da wir auch Mikrodaten ausgeben, müssen wir die entsprechenden Eigenschaften nach den Regeln von schema.org hinzufügen.

Es liegt ganz bei Ihnen, wie Sie Ihr Widget ausgeben möchten; Sie könnten wahrscheinlich erwägen, weitere HTML-Wrapper hinzuzufügen, um das Styling zu vereinfachen.

Passen Sie die Ausgabe an, fügen Sie etwas Styling hinzu und fertig!

FYI: Ihr Widget erhält den Wrapping-Klassennamen „ widget_<base ID>” (Basis-ID ist das, was Sie im Konstruktor angegeben haben). In unserem Fall erhält unser Widget die Klasse „ widget_local_business“. Dies könnte Ihnen helfen, ein gezieltes Styling hinzuzufügen.

Abschluss und endgültiger Code

In diesem Tutorial haben wir gelernt, wie man ein benutzerdefiniertes Widget erstellt und wie man eine mikrodatenformatierte Ausgabe aus seinen Einstellungen rendert. Sie sollten in der Lage sein, Ihre eigenen Widgets zu erstellen, indem Sie den Grundlagen einer Widget-Klasse folgen!

Als Referenz ist hier der vollständige Code, alles zusammen.

Aufnahmequelle: awhitepixel.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen