Hoe maak je een dynamische widget in WordPress

WordPress-widgets kunnen u helpen uw website dynamisch te maken en effectief te communiceren met bezoekers. Er zijn veel WordPress-widgets beschikbaar voor gebruik. Maar door een aangepaste WordPress-widget te maken, kunt u code naar keuze aan uw WordPress-website toevoegen.

Bijna alle websites gebruiken de dynamische widget om de gebruikerservaring te verbeteren en voor een aantal andere doeleinden. U kunt contactformulieren, inlogformulieren, abonnementskaarten, live tracking en zoveel andere functies voor uw website maken met WordPress-widgets.

Het maken van een widget is eenvoudig en dit bericht zal het u gemakkelijker maken. Dus laten we zonder tijd te verspillen beginnen met het maken van dynamische widgets in WordPress.

 

Hoe maak je een dynamische widget in WordPress

In dit bericht zullen we dit onderwerp in drie grote delen behandelen.

 

DEEL 1: Begrijp een paar dingen voordat je begint

Voordat u leert hoe u een dynamische WordPress-widget kunt maken, moet u een paar dingen weten.

Deze dingen hebben betrekking op de basisprincipes van de widgets en hoe dynamische widgets zijn samengesteld uit WordPress. Probeer dit onderdeel niet te verwaarlozen, te negeren of over te slaan, want het zal je enorm helpen.

Beschouw dit onderdeel als de bouwsteen. Als u echter bekend bent met WordPress-widgets, codering, plug-ins, functies, enz. Dan kunt u het overslaan.

 

Wat is een WordPress-widget?

Een WordPress-widget is een klein blok en dit blok wordt ergens op uw WordPress-webpagina geplaatst.

De widget kan worden gebruikt om uw bezoekers een uniek stukje inhoud en functionaliteit te bieden zonder iets te coderen. Een klein beetje WordPress-codering is voldoende om een ​​widget te maken.

Pop-ups van abonnementsboxen, meldingen, pop-ups van contactformulieren, Live data-updates, enz. zijn enkele veelvoorkomende widgets die worden gebruikt door WordPress-webmasters.

 

Statische widget

Een statische widget heeft geen interactie met de gebruikers omdat er alleen eenrichtingsverkeer is. Het wordt gebruikt om op een eenvoudige manier niet-veranderende informatie te verstrekken of informatie van gebruikers te verzamelen.

 

Dynamische widget

Dynamische widgets communiceren effectief met gebruikers en ze leveren gegevens die worden bijgewerkt met behulp van verschillende API's. Deze widgets verzamelen ook informatie en gebruiken deze dynamisch. Een volledige automatiseringsfunctie is aanwezig in de dynamische widget.

 

Combinatie (combination)

De meeste websites gebruiken tegenwoordig een combinatie van statische en dynamische widgets. In deze widgets bieden ze statische informatie samen met dynamische functionaliteit. 

 

Dingen die je moet weten

Nu bent u bekend met de WordPress-widget en zijn typen. WordPress biedt zijn gebruikers veel ingebouwde widgets. Maar als u een aangepaste WordPress-widget voor uw site wilt maken, heeft u mogelijk de volgende dingen nodig. 

 

Basiscodering

Je moet bekend zijn met de basis OOP (objectgeoriënteerd programmeren) in PHP. 

 

Back-up originele code

Houd er rekening mee dat je gaat spelen met je WordPress-code. Om problemen te voorkomen, moet u een back-up maken van uw originele WordPress-code.

 

Plaatsing van code

WordPress-widgets worden ontwikkeld met codes, maar waar worden deze codes geplaatst? U kunt een widgetcode in de WordPress-thema's plaatsen functions.php het dossier. Deze widgets zijn actief als het thema actief is.

 

Basisprincipes van WordPress-widgets

WordPress biedt de  WP_Widget  class om dynamische widgets te maken. We moeten deze klasse uitbreiden door meer functies toe te voegen volgens onze vereiste om een ​​dynamische WordPress-widget te maken. Hieronder volgen de vier basisfuncties waaraan we kunnen toevoegen:   WP_Widget   klasse.

• Constructeur functie.
• Om de widget-inhoud weer te geven, maken we de  widget functie.
• Om de instellingen van een widget bij te werken, gebruiken we de  bijwerken functie.
• Om informatie van gebruikers te verzamelen, gebruiken we de  Formulier functie.

In een dynamische widget zullen we enkele van deze vier widgetfuncties gebruiken. Daarna zullen we onze widget registreren met  register_widget. 

 

DEEL 2: Laten we een dynamische widget voor WordPress maken

Het maken van een dynamische widget voor WordPress is een lang proces. Misschien voelt het als een ingewikkeld iets als je het voor de eerste keer doet, maar we hebben het eenvoudig voor je gemaakt.

We hebben het hele proces opgedeeld in vier eenvoudige stappen. Volg deze vier eenvoudige stappen om een ​​dynamische widget voor WordPress te maken.

 

STAP 1: Maak een lege plug-in

De eerste stap is het maken van een lege plug-in voor onze WordPress-widget, deze stap is eenvoudig en gemakkelijk. Je hebt dit misschien eerder gezien als je ooit plug-ins of widgets hebt gemaakt.

We maken een plug-in omdat we een widget in deze plug-in zullen toevoegen en die plug-in vervolgens aan onze WordPress-site zullen toevoegen.

Hiervoor moet je naar  /wp-content/plug-ins/. Tijdens het maken van die plug-in voor uw WordPress-site, moet u een nieuwe map toevoegen en deze dienovereenkomstig een naam geven.

Je kunt het alles noemen wat je wilt. In uw directory moet u de . maken   index.php.   Dit indexbestand heeft de volgende voorbeeldcode.

Alle bovengenoemde details in de lege plug-in worden door WordPress gebruikt om u de details van uw plug-in in het beheerderspaneel te tonen. Na het toevoegen van deze code maak je een lege plug-in aan. U ziet het in uw WordPress-beheerderspaneel. Nu moet je deze plug-in activeren.

 

STAP 2: Maak een voorbeeldwidgetcode

De tweede stap is het maken van een voorbeeldwidgetcode. We zullen de vier basisfuncties gebruiken om de bruikbaarheid van de  WP_Widget  klasse.

klasse Voorbeeld_Widget breidt WP_Widget uit {publieke functie __construct() {} openbare functiewidget ($args, $instance) { // Maak de voorbeeldwidget}} // Registreer de widgetfunctie register_sample_widget() {register_widget('My_Custom_Widget'); } add_action( 'widgets_init', 'register_sample_widget');

In de bovenstaande codesectie kun je dat zien:  WP_Widget wordt uitgebreid met het gebruik van de construct-functie. En in het laatste deel van het blok kun je zien hoe we onze voorbeeldwidget hebben geregistreerd met  register_widget. 

Nadat we de voorbeeldwidget hebben gemaakt en geregistreerd, moeten we er dynamische functies aan toevoegen. We kunnen gebruiken  widget,  te vormen, en  bijwerken functies om het als per onze eis.

TIP VOOR BONUSSEN: Om stijldetails op te tellen, kun je CSS gebruiken  Klasse.   Het kan worden toegevoegd aan HTML DOM en het zal de weergave van de hele widget stileren. 

 

STAP 3: Widget toevoegen aan de pagina

Nadat u klaar bent met het codeergedeelte. U kunt de widget aan uw pagina toevoegen. Onthoud dat we nog geen dynamische informatie of gegevensbron hebben toegevoegd aan onze widget.

Om het dynamisch te maken moeten we een dynamische informatiebron toevoegen. We zullen het in de volgende stap doen. Voor nu zullen we deze nieuw gemaakte aangepaste widget toevoegen aan de WordPress-sitepagina.

Om het aan de pagina toe te voegen, moet je teruggaan naar het WordPress-beheerpaneel. Daar moet je naar de het Uiterlijk optie in de zijbalk. Ga naar Uiterlijk>Widgets.

Hier kunt u uw widget overal op de pagina toevoegen, zoals koptekst, voettekst, zijbalk, enz.

 

STAP 4: Dynamische gegevens toevoegen aan de widget

Inmiddels is meer dan de helft van het proces voltooid. Het is tijd om dynamische gegevens aan uw widget toe te voegen. U kunt dynamische gegevens uit elke bron halen.

Als u bijvoorbeeld een widget maakt om live COVID-19-gevallen van de wereld weer te geven, moet u gegevens van een website zoals de WHO of een mediasite halen.

Haal de URL van de informatie op en voeg de . toe  API Key ernaar toe. Gebruik nu de widget functie samen met de "GET" -instructie kunt u de live details van de COVID-19 krijgen (volgens het voorbeeld).  

API Key samen met het "GET" -verzoek worden de gegevens of informatie in uw widget opgehaald en weergegeven. Krijg hulp bij de JSON-tekenreeksen en -variabelen om de gegevens in uw widget bij te werken.

 

STAP 5: Plug-in uploaden

U kunt een voorbeeld van uw widget bekijken zodra u alle vereiste codes heeft toegevoegd.

De laatste stap is nu om de plug-in te uploaden naar uw WordPress-beheerderspaneel. Hiervoor moet u de plug-in in een zipbestand inpakken. Ga nu naar Plug-ins > Nieuw toevoegen > Plug-in uploaden en upload uw plug-in.

 

DEEL 3: Elementen, plug-ins en widgets op één plek ophalen

Het maken en toevoegen van plug-ins, widgets en elementen lijkt moeilijk? Maak je geen zorgen, het goede nieuws is dat je tegenwoordig niets handmatig hoeft te doen.

Er zijn veel WordPress-thema's, plug-ins en widgets beschikbaar. De meeste van uw vereisten kunnen worden vervuld met deze kant-en-klare en aanpasbare widgets. Het volgende is de beste beschikbare optie.

 

Deep WordPress Thema

De Deep WordPress-thema aangeboden door The Webnus is een van de beste opties om de premium WordPress-thema's, elementen, plug-ins, enz. Te krijgen. U kunt al deze dingen gebruiken om elke dynamische widget op uw WordPress-website te plaatsen. Hieronder volgen enkele van de beste functies die u alleen krijgt met de deep WordPress-thema door Webnus.

 

Speed ​​Booster

Extra codes op uw pagina's hebben invloed op de laadsnelheid van uw pagina. Maar er hoeven geen extra codes te worden geladen met dit thema. Waardoor je pagina's sneller laden. CSS- en JS-elementen worden in de broncode van de pagina geladen. Dus het laadt soepeler met minder code.

 

Super reactie

U krijgt een verbeterde gebruikerservaring op uw webpagina's. Verbeterde UX helpt u een superresponsfunctie te bieden aan uw sitebezoekers.

 

Makkelijk te gebruiken

Deep thema-importeur is zeer eenvoudig en snel te gebruiken. Dat helpt u op een zeer comfortabele en handige manier te werken tijdens het importeren van thema's naar uw WordPress-website.

 

Echte prijzen

U bespaart veel bij het gebruik van de deep WordPress-thema door Webnus. Alle thema's, plug-ins zijn beschikbaar voor een echte prijs.

 

Laten we samenvatten!

In dit bericht hebben we geleerd wat een dynamische WordPress-widget is en hoe deze te maken.

Van het toevoegen van gegevens tot het maken van de basiswidget, we hebben elk aspect van het hele proces behandeld. Je kunt eenvoudig een dynamische WordPress-widget maken als je de stappen volgt die in dit bericht worden genoemd.

Ook hebben we geleerd dat je kant-en-klare plug-ins, widgets, elementen, etc. van Webnus kunt krijgen. U bespaart zowel tijd als geld tijdens het gebruik van de deep WordPress-thema door Webnus.