So erstellen Sie ein dynamisches Widget in WordPress

WordPress-Widgets können Ihnen helfen, Ihre Website dynamisch zu gestalten und effektiv mit Besuchern zu interagieren. Es stehen viele WordPress-Widgets zur Verfügung. Wenn Sie jedoch ein benutzerdefiniertes WordPress-Widget erstellen, können Sie Ihrer WordPress-Website Code Ihrer Wahl hinzufügen.

Fast alle Websites verwenden das dynamische Widget, um die Benutzererfahrung zu verbessern und für einige andere Zwecke. Sie können mit WordPress-Widgets Kontaktformulare, Anmeldeformulare, Abonnementkarten, Live-Tracking und viele andere Funktionen für Ihre Website erstellen.

Das Erstellen eines Widgets ist einfach und dieser Beitrag wird es Ihnen erleichtern. Beginnen wir also ohne Zeitverlust mit der Erstellung dynamischer Widgets in WordPress.

 

So erstellen Sie ein dynamisches Widget in WordPress

In diesem Beitrag werden wir dieses Thema in drei großen Teilen behandeln.

 

TEIL 1: Verstehen Sie einige Dinge, bevor Sie beginnen

Bevor Sie lernen, ein dynamisches WordPress-Widget zu erstellen, müssen Sie einige Dinge wissen.

Diese Dinge beziehen sich auf die Grundlagen der Widgets und wie dynamische Widgets aus WordPress zusammengesetzt sind. Versuchen Sie nicht, diesen Teil zu vernachlässigen, zu ignorieren oder zu überspringen, denn er wird Ihnen sehr helfen.

Betrachten Sie diesen Teil als den Baustein. Wenn Sie jedoch mit WordPress-Widgets, Codierung, Plugins, Funktionen usw. vertraut sind, können Sie es überspringen.

 

Was ist ein WordPress-Widget?

Ein WordPress-Widget ist ein kleiner Block und dieser Block wird irgendwo auf Ihrer WordPress-Webseite platziert.

Das Widget kann verwendet werden, um Ihren Besuchern einen einzigartigen Inhalt und eine einzigartige Funktionalität bereitzustellen, ohne etwas zu programmieren. Ein wenig WordPress-Codierung reicht aus, um ein Widget zu erstellen.

Abonnementbox-Popups, Benachrichtigungen, Kontaktformular-Popups, Live-Daten-Updates usw. sind einige gängige Widgets, die von WordPress-Webmastern verwendet werden.

 

Statisches Widget

Ein statisches Widget hat keine Interaktion mit den Benutzern, da nur eine unidirektionale Kommunikation vorhanden ist. Es wird verwendet, um auf einfache Weise unveränderliche Informationen bereitzustellen oder Informationen von Benutzern zu sammeln.

 

Dynamisches Widget

Dynamische Widgets interagieren effektiv mit Benutzern und stellen Daten bereit, die mithilfe verschiedener APIs aktualisiert werden. Außerdem sammeln diese Widgets Informationen und verwenden sie dynamisch. Eine vollständige Automatisierungsfunktion ist im dynamischen Widget enthalten.

 

Kombination

Die meisten Websites verwenden heutzutage eine Kombination aus statischen und dynamischen Widgets. In diesen Widgets stellen sie statische Informationen zusammen mit dynamischen Funktionen bereit. 

 

Dinge, die Sie wissen müssen

Jetzt sind Sie mit dem WordPress-Widget und seinen Typen vertraut. WordPress bietet seinen Benutzern viele integrierte Widgets. Wenn Sie jedoch ein angepasstes WordPress-Widget für Ihre Website erstellen möchten, benötigen Sie möglicherweise die folgenden Dinge. 

 

Grundlegende Codierung

Sie müssen mit der grundlegenden OOP (Objektorientierte Programmierung) in PHP vertraut sein. 

 

Originalcode sichern

Denken Sie daran, dass Sie mit Ihrem WordPress-Code spielen werden. Um Probleme zu vermeiden, müssen Sie Ihren ursprünglichen WordPress-Code sichern.

 

Platzierung des Codes

WordPress-Widgets werden mit Codes entwickelt, aber wo werden diese Codes platziert? Sie können einen Widget-Code im WordPress-Theme platzieren Functions.php Datei. Diese Widgets sind aktiv, wenn das Thema aktiv ist.

 

Grundlagen zu WordPress-Widgets

WordPress bietet die  WP_Widget  -Klasse, um dynamische Widgets zu erstellen. Wir müssen diese Klasse erweitern, indem wir gemäß unserer Anforderung weitere Funktionen hinzufügen, um ein dynamisches WordPress-Widget zu erstellen. Im Folgenden sind die vier Grundfunktionen aufgeführt, die wir hinzufügen können   WP_Widget   Klasse.

• Konstruktor-Funktion.
• Um den Widget-Inhalt anzuzeigen, erstellen wir die  Widget Funktion.
• Um die Einstellungen eines Widgets zu aktualisieren, verwenden wir die  Aktualisierung Funktion.
• Um Informationen von Benutzern zu sammeln, verwenden wir die  Form Funktion.

In einem dynamischen Widget verwenden wir einige dieser vier Widget-Funktionen. Danach registrieren wir unser Widget mit  register_Widget. 

 

TEIL 2: Erstellen wir ein dynamisches Widget für WordPress

Das Erstellen eines dynamischen Widgets für WordPress ist ein langer Prozess. Vielleicht fühlt es sich komplex an, wenn Sie es zum ersten Mal tun, aber wir haben es für Sie einfach gemacht.

Wir haben den gesamten Prozess in vier einfache Schritte unterteilt. Befolgen Sie diese vier einfachen Schritte, um ein dynamisches Widget für WordPress zu erstellen.

 

SCHRITT 1: Erstellen Sie ein leeres Plugin

Der erste Schritt besteht darin, ein leeres Plugin für unser WordPress-Widget zu erstellen, dieser Schritt ist einfach und unkompliziert. Sie haben dies vielleicht schon einmal gesehen, wenn Sie jemals Plugins oder Widgets erstellt haben.

Wir erstellen ein Plugin, weil wir ein Widget in diesem Plugin hinzufügen und dieses Plugin dann zu unserer WordPress-Site hinzufügen.

Dazu musst du gehen zu  /wp-content/plugins/. Beim Erstellen dieses Plugins für Ihre WordPress-Site müssen Sie ein neues Verzeichnis hinzufügen und es dann entsprechend benennen.

Sie können es benennen, was Sie wollen. In Ihrem Verzeichnis müssen Sie die   index.php.   Diese Indexdatei enthält den folgenden Beispielcode.

Alle oben genannten Details im leeren Plugin werden von WordPress verwendet, um Ihnen die Details Ihres Plugins im Admin-Panel anzuzeigen. Nachdem Sie diesen Code hinzugefügt haben, erstellen Sie ein leeres Plugin. Sie werden es in Ihrem WordPress-Admin-Panel sehen. Jetzt müssen Sie dieses Plugin aktivieren.

 

SCHRITT 2: Erstellen Sie einen Beispiel-Widget-Code

Der zweite Schritt besteht darin, einen Beispiel-Widget-Code zu erstellen. Wir werden die vier Grundfunktionen verwenden, um die Benutzerfreundlichkeit der  WP_Widget  Klasse.

class Example_Widget erweitert WP_Widget { public function __construct() { } public function widget( $args, $instance ) { // Das Beispiel-Widget erstellen } } // Widget registrieren Funktion register_sample_widget() { register_widget( 'My_Custom_Widget' ); } add_action( 'widgets_init', 'register_sample_widget');

Im obigen Codeabschnitt können Sie das sehen  WP_Widget wird mit der Funktion Konstrukt erweitert. Und im letzten Teil des Blocks sehen Sie, wie wir unser Beispiel-Widget registriert haben  register_Widget. 

Nachdem wir das Beispiel-Widget erstellt und registriert haben, müssen wir ihm dynamische Funktionen hinzufügen. Wir können benutzen  Widget,  bilden, und  Aktualisierung Funktionen dazu wie pro unsere Anforderung.

Bonus-Tipp: Um Styling-Details hinzuzufügen, können Sie CSS verwenden  Klasse.   Es kann zu HTML DOM hinzugefügt werden und stilisiert die Anzeige des gesamten Widgets. 

 

SCHRITT 3: Widget zur Seite hinzufügen

Nachdem Sie mit dem Codierungsteil fertig sind. Sie können das Widget zu Ihrer Seite hinzufügen. Denken Sie daran, dass wir unserem Widget noch keine dynamischen Informationen oder Datenquellen hinzugefügt haben.

Um es dynamisch zu machen, müssen wir eine dynamische Informationsquelle hinzufügen. Wir werden es im nächsten Schritt tun. Vorerst werden wir dieses neu erstellte angepasste Widget zur WordPress-Site-Seite hinzufügen.

Um es der Seite hinzuzufügen, müssen Sie zum WordPress-Admin-Panel zurückkehren. Dort musst du zum Optik Option in der Seitenleiste. Gehe zu Aussehen>Widgets.

Hier können Sie Ihr Widget überall auf der Seite hinzufügen, z. B. Kopfzeile, Fußzeile, Seitenleiste usw.

 

SCHRITT 4: Dynamische Daten zum Widget hinzufügen

Inzwischen ist mehr als die Hälfte des Prozesses abgeschlossen. Es ist an der Zeit, Ihrem Widget dynamische Daten hinzuzufügen. Sie können dynamische Daten aus jeder Quelle abrufen.

Wenn Sie beispielsweise ein Widget erstellen, um Live-COVID-19-Fälle der Welt anzuzeigen, müssen Sie Daten von einer Website wie der WHO oder einer Medienseite abrufen.

Rufen Sie die URL der Informationen ab und fügen Sie die hinzu  API-Schlüssel dazu. Verwenden Sie jetzt die Widget Funktion zusammen mit der Anweisung „GET“ können Sie die Live-Details des COVID-19 (gemäß dem Beispiel) abrufen.  

API-Schlüssel zusammen mit der „GET“-Anfrage werden die Daten oder Informationen in Ihrem Widget erfasst und angezeigt. Holen Sie sich Hilfe zu den JSON-Strings und -Variablen, um die Daten in Ihrem Widget zu aktualisieren.

 

SCHRITT 5: Plugin hochladen

Nachdem Sie alle erforderlichen Codes hinzugefügt haben, können Sie eine Vorschau Ihres Widgets anzeigen.

Der letzte Schritt besteht nun darin, das Plugin in Ihr WordPress-Admin-Panel hochzuladen. Dazu müssen Sie das Plugin in eine Zip-Datei packen. Gehe jetzt zu Plugins> Neu hinzufügen> Plugin hochladen und lade dein Plugin hoch.

 

TEIL 3: Holen Sie sich Elemente, Plugins, Widgets an einem Ort

Das Erstellen und Hinzufügen von Plugins, Widgets und Elementen scheint schwierig zu sein? Keine Sorge, die gute Nachricht ist, dass Sie heutzutage nichts mehr manuell tun müssen.

Da sind viele WordPress-Themen, Plugins und Widgets verfügbar. Die meisten Ihrer Anforderungen können mit diesen vorgefertigten, anpassbaren Widgets erfüllt werden. Im Folgenden finden Sie die beste verfügbare Option.

 

Deep WordPress Theme

Das Deep WordPress Thema bereitgestellt von The Webnus ist eine der besten Optionen, um die Premium-WordPress-Themes, -Elemente, -Plugins usw. zu erhalten. Sie können all diese Dinge verwenden, um jedes dynamische Widget auf Ihrer WordPress-Website zu platzieren. Im Folgenden sind einige der besten Funktionen aufgeführt, die Sie nur mit dem deep WordPress-Theme von Webnus.

 

Geschwindigkeitsverstärker

Zusätzliche Codes auf Ihren Seiten wirken sich auf die Ladegeschwindigkeit der Seite aus. Es müssen jedoch keine zusätzlichen Codes mit diesem Thema geladen werden. Dadurch werden Ihre Seiten schneller geladen. CSS- und JS-Elemente werden in den Quellcode der Seite geladen. So wird es mit weniger Code reibungsloser geladen.

 

Super Antwort

Sie erhalten eine verbesserte Benutzererfahrung auf Ihren Webseiten. Enhanced UX hilft Ihnen, Ihren Website-Besuchern eine Super-Response-Funktion bereitzustellen.

 

Einfach im Einsatz

Deep Theme-Importer ist sehr einfach und schnell zu bedienen. Dies hilft Ihnen beim Importieren von Designs auf Ihre WordPress-Website auf sehr komfortable und bequeme Weise.

 

Echte Preise

Sie werden viel sparen, wenn Sie die deep WordPress-Theme von Webnus. Alle Themes, Plugins sind zu einem echten Preis erhältlich.

 

Fassen wir zusammen!

In diesem Beitrag haben wir erfahren, was ein dynamisches WordPress-Widget ist und wie man es erstellt.

Vom Hinzufügen von Daten bis zum Erstellen des grundlegenden Widgets haben wir jeden Aspekt des gesamten Prozesses abgedeckt. Sie können ganz einfach ein dynamisches WordPress-Widget erstellen, wenn Sie die in diesem Beitrag genannten Schritte befolgen.

Außerdem haben wir erfahren, dass Sie von Webnus fertige Plugins, Widgets, Elemente usw. erhalten können. Sie sparen Zeit und Geld, während Sie das deep WordPress-Theme von Webnus.