Een aangepaste WordPress-widget maken

Wil je je eigen aangepaste widgets maken in WordPress? Met widgets kunt u niet-inhoudselementen toevoegen aan een zijbalk of een widget-klaar gedeelte van uw website.


U kunt widgets gebruiken om banners, advertenties, aanmeldingsformulieren voor nieuwsbrieven en andere elementen aan uw website toe te voegen.

In dit artikel laten we u stap voor stap zien hoe u een aangepaste WordPress-widget maakt.

Een aangepaste WordPress-widget maken

Notitie: Deze tutorial is voor doe-het-zelf WordPress-gebruikers die de ontwikkeling en codering van WordPress leren.

Wat is een WordPress Widget?

WordPress-widgets bevatten stukjes code die u kunt toevoegen aan de zijbalken van uw website of voor widgets geschikte gebieden.

Zie ze als modules die u kunt gebruiken om verschillende elementen toe te voegen met behulp van een eenvoudige interface voor slepen en neerzetten.

Standaard wordt WordPress geleverd met een standaardset widgets die u met elk WordPress-thema kunt gebruiken. Zie onze beginnershandleiding over het toevoegen en gebruiken van widgets in WordPress.

Widgets toevoegen in WordPress

Met WordPress kunnen ontwikkelaars ook hun eigen aangepaste widgets maken.

Veel premium WordPress-thema’s en plug-ins worden geleverd met hun eigen aangepaste widgets die u aan uw zijbalken kunt toevoegen.

U kunt bijvoorbeeld een contactformulier, een aangepast aanmeldingsformulier of een fotogalerij aan een zijbalk toevoegen zonder code te schrijven.

Dat gezegd hebbende, laten we zien hoe u eenvoudig uw eigen aangepaste widgets in WordPress kunt maken.

Video-instructies

Abonneer u op WPBeginner

Als u liever schriftelijke instructies heeft, lees dan verder.

Een aangepaste widget maken in WordPress

Als u WordPress-codering leert, heeft u een lokale ontwikkelomgeving nodig. U kunt WordPress op uw computer installeren (Mac of Windows).

Er zijn verschillende manieren om uw aangepaste widgetcode toe te voegen in WordPress.

Idealiter kunt u een sitespecifieke plug-in maken en uw widgetcode daar plakken.

Je kunt de code ook in het functies.php-bestand van je thema plakken. Het is echter alleen beschikbaar als dat specifieke thema actief is.

Een andere tool die u kunt gebruiken, is de plug-in Code Snippets waarmee u eenvoudig aangepaste code aan uw WordPress-website kunt toevoegen.

In deze zelfstudie maken we een eenvoudige widget die alleen bezoekers begroet. Het doel hier is om vertrouwd te raken met de WordPress-widgetklasse.

Laten we beginnen.

Een eenvoudige WordPress-widget maken

WordPress wordt geleverd met een ingebouwde WordPress Widget-klasse. Elke nieuwe WordPress-widget breidt de klasse WordPress-widget uit.

Er worden 18 methoden genoemd in het handboek van de WordPress-ontwikkelaar die kunnen worden gebruikt met de WP Widget-klasse.

Omwille van deze tutorial zullen we ons echter concentreren op de volgende methoden.

  • __construct (): dit is het deel waar we de widget-ID, titel en beschrijving maken.
  • widget: hier definiëren we de uitvoer die door de widget wordt gegenereerd.
  • formulier: In dit deel van de code maken we het formulier met widgetopties voor backend.
  • update: dit is het deel waar we widget-opties in de database opslaan.

Laten we de volgende code bestuderen waarin we deze vier methoden hebben gebruikt in de WP_Widget-klasse.

// De widget maken
klasse wpb_widget breidt WP_Widget {

// Het construct gedeelte
functie __construct () {

}

// Widget front-end maken
widget voor openbare functies ($ args, $ instance) {

}

// Een widget-backend maken
formulier openbare functie ($ instantie) {

}

// Updaten widget die oude exemplaren vervangt door nieuwe
openbare functie-update ($ new_instance, $ old_instance) {

}

// Klasse wpb_widget eindigt hier
}

Het laatste stuk van de code is waar we de widget daadwerkelijk zullen registreren en in WordPress laden.

functie wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

Laten we dit allemaal samenvoegen om een ​​eenvoudige WordPress-widget te maken.

U kunt de volgende code kopiëren en plakken in uw aangepaste plug-in of het bestand functions.php van het thema.

// De widget maken
klasse wpb_widget breidt WP_Widget {

functie __construct () {
ouder :: __ construct (

// Basis-ID van uw widget
‘wpb_widget’,

// Widgetnaam verschijnt in de gebruikersinterface
__ (‘WPBeginner Widget’, ‘wpb_widget_domain’),

// Widgetbeschrijving
array (‘description’ => __ (‘Voorbeeldwidget gebaseerd op WPBeginner Tutorial’, ‘wpb_widget_domain’),)
);
}

// Widget front-end maken

widget voor openbare functies ($ args, $ instance) {
$ title = apply_filters (‘widget_title’, $ instance [‘title’]);

// voor en na widgetargumenten worden gedefinieerd door thema’s
echo $ args [‘before_widget’];
if (! empty ($ title))
echo $ args [‘before_title’]. $ titel. $ args [‘after_title’];

// Hier voert u de code uit en geeft u de uitvoer weer
echo __ (‘Hallo, Wereld!’, ‘wpb_widget_domain’);
echo $ args [‘after_widget’];
}

// Widget-backend
formulier openbare functie ($ instantie) {
if (isset ($ instance [‘title’])) {
$ title = $ instantie [‘titel’];
}
anders {
$ title = __ (‘Nieuwe titel’, ‘wpb_widget_domain’);
}
// Widget-beheerformulier
?>

<?php _e (‘Title:’); ?>

<?php
}

// Updaten widget die oude exemplaren vervangt door nieuwe
openbare functie-update ($ new_instance, $ old_instance) {
$ instance = array ();
$ instance [‘title’] = (! empty ($ new_instance [‘title’]))? strip_tags ($ new_instance [‘title’]): ”;
$ instantie retourneren;
}

// Klasse wpb_widget eindigt hier
}

// Registreer en laad de widget
functie wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

Na het toevoegen van de code moet je naar toe gaan Uiterlijk »Widgets bladzijde. U zult de nieuwe WPBeginner-widget opmerken in de lijst met beschikbare widgets. Je moet deze widget naar een zijbalk slepen en neerzetten.

Demo-widget

Deze widget heeft slechts één formulierveld om in te vullen, u kunt uw tekst toevoegen en op de knop Opslaan klikken om uw wijzigingen op te slaan.

Nu kunt u uw website bezoeken om deze in actie te zien.

Een voorbeeld van uw aangepaste widget bekijken

Laten we nu de code opnieuw bestuderen.

Eerst hebben we de ‘wpb_widget’ geregistreerd en onze aangepaste widget geladen. Daarna hebben we gedefinieerd wat die widget doet en hoe de widget-backend moet worden weergegeven.

Ten slotte hebben we gedefinieerd hoe om te gaan met wijzigingen in de widget.

Nu zijn er een paar dingen die je misschien wilt vragen. Wat is bijvoorbeeld het doel wpb_text_domain?

WordPress gebruikt gettext om vertaling en lokalisatie af te handelen. Dit wpb_text_domain en __e vertelt gettext om een ​​string beschikbaar te maken voor vertaling. Bekijk hoe u WordPress-thema’s die klaar zijn voor vertaling kunt vinden.

Als u een aangepaste widget voor uw thema maakt, kunt u wpb_text_domain vervangen door het tekstdomein van uw thema.

We hopen dat dit artikel je heeft geleerd hoe je eenvoudig een aangepaste WordPress-widget kunt maken. Misschien wilt u ook onze lijst met de handigste WordPress-widgets voor uw site bekijken.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me