Aangepaste WordPress-widgets bouwen

Het bouwen van WordPress-widgets is net als het bouwen van een plug-in, maar het is eenvoudiger en eenvoudiger. Het enige dat u hoeft te doen is een enkel bestand te hebben waarin alle PHP's terechtkomen en het is eenvoudiger om te coderen dan een plug-in die meer dan één bestand kan hebben. Er zijn drie belangrijke functies van een widget die kan worden uitgesplitst widget, bijwerken en het formulier.

  • functie widget ()
  • functie-update ()
  • functieformulier ()

Basis structuur

De basisbeschrijving van onze widget is heel eenvoudig en er zijn een handvol functies die u moet kennen. De blote botstructuur van onze widget is zoiets als dit:

 add_action ('widgets_init', 'register_my_widget'); // functie om mijn widgetfunctie te laden register_my_widget ()  // functie om mijn widgetklasse te registreren My_Widget breidt WP_Widget () uit  // De voorbeeld widget klassefunctie My_Widget ()  // Widgetinstellingen functie widget ()  // toon de update van de widgetfunctie ()  // update het widgetfunctievorm ()  // en natuurlijk het formulier voor de widgetopties

Stap 1

Voordat we dat allemaal doen, laden we eerst onze widget wanneer dat nodig is door de functie "widget_init". Dit is een actiehaak en je kunt er meer over vinden in de WordPress codex.

 add_action ('widgets_init', 'register_my_widget');

Het volgende dat we zullen doen, is onze widget in WordPress registreren, zodat deze beschikbaar is onder de sectie widgets.

 function register_my_widget () register_widget ('My_Widget'); 

Stap 2

We zullen onze widget in een klas plaatsen. De naam van de klas is belangrijk! Een ding dat in gedachten moet worden gehouden, is dat de naam van de klasse en de naam van de functie hetzelfde moeten zijn.

 class My_Widget breidt WP_Widget uit 

Nu zullen we enkele instellingsparameters doorgeven aan deze klasse. We kunnen dit bijvoorbeeld de breedte en hoogte doorgeven. We kunnen onze widget ook een kleine beschrijving geven als we dat willen, wat handig is als je deze widget combineert met je commerciële thema.

 function My_Widget () function My_Widget () $ widget_ops = array ('classname' => 'example', 'description' => __ ('Een widget die de naam van de auteur weergeeft', 'example')); $ control_ops = array ('width' => 300, 'height' => 350, 'id_base' => 'example-widget'); $ this-> WP_Widget ('example-widget', __ ('Example Widget', 'example'), $ widget_ops, $ control_ops); 

Nu we de basisvereisten voor onze widget hebben voltooid, zullen we onze aandacht vestigen op de drie functies waar we eerder over gesproken hebben, die de belangrijke functies of de belangrijkste bouwstenen van onze widget zijn!


Stap 3 Functiewidget ()

De eerste functie houdt verband met de weergave van onze widget. We zullen een paar argumenten doorgeven aan onze widget-functie. We zullen argumenten uit het thema doorgeven, die een titel en andere specifieke waarden kunnen zijn. Vervolgens passeren we de instantievariabele, die gerelateerd is aan de klasse van onze functie.

 functiewidget ($ args, $ instance)

Hierna extraheren we de waarden uit het argument omdat we willen dat de waarden lokaal beschikbaar zijn. Als je niet weet waar deze lokale variabele over gaat, maak je er dan nu geen zorgen over en voeg deze stap gewoon toe!

 extract ($ args);

Vervolgens stellen we de titel en andere waarden in voor onze widget, die door de gebruiker in het widgets-menu kan worden bewerkt. We nemen ook de speciale variabelen zoals op $ before_widget, $ after_widget. Deze waarden worden behandeld door het thema.

 $ title = apply_filters ('widget_title', $ instance ['title']); $ name = $ instance ['name']; $ show_info = isset ($ instantie ['show_info'])? $ instance ['show_info']: false; echo $ before_widget; // Geef de titel van de widget weer als ($ title) $ before_title echo. $ titel. $ After_title; // Geef de naam weer als ($ naam) printf ('

'. __ ('Hey hun matroos! Mijn naam is% 1 $ s.', 'Voorbeeld'). '

', $ naam); if ($ show_info) printf ($ naam); echo $ after_widget;

Stap 4 Update-functie ()

De volgende is de update-functie. Deze functie neemt de gebruikersinstellingen op en slaat ze op. Het zal alleen de instellingen bijwerken volgens de smaak van de gebruiker.

 functie-update ($ new_instance, $ old_instance) $ instance = $ old_instance; // Strip tags uit titel en naam om HTML $ instance ['title'] = strip_tags ($ new_instance ['title']) te verwijderen; $ instance ['name'] = strip_tags ($ new_instance ['name']); $ instance ['show_info'] = $ new_instance ['show_info']; return $ instantie; 

Een ding om op te merken is dat we de waarden verwijderen, zodat elke XHTML uit de tekst kan worden verwijderd, wat, in eenvoudige woorden, de werking van onze widget kan beïnvloeden.


Stap 5 Formulierfunctie ()

De volgende stap beschrijft het maken van het formulier dat als invoervak ​​zal dienen. Dit omvat de door de gebruiker gedefinieerde instellingen en waarden. De formulierfunctie kan selectievakjes, tekstinvoervakken enz. Bevatten.

Voordat we deze invoervelden maken, moeten we beslissen wat we moeten weergeven als de gebruiker niets selecteert in de widget. Hiertoe geven we een aantal standaardwaarden door, zoals titel, beschrijving, enzovoort.

 // Stel een aantal standaard widget-instellingen in. $ defaults = array ('title' => __ ('Voorbeeld', 'example'), 'name' => __ ('Bilal Shaheen', 'example'), 'show_info' => true); $ instance = wp_parse_args ((array) $ instantie, $ standaard); ?>

Nu maken we het invoertekstvak. We zullen deze opties insluiten binnen de paragraaf die de tag omsluit.

 // Widget-titel: tekstinvoer 

//Tekst invoer

// Checkbox

name ="get_field_name ('show_info'); ?> "/>

Conclusie

En dat is het. Je hebt jezelf een heel leuke en eenvoudige widget gemaakt die de naam van de auteur van de blog weergeeft. Bovendien biedt het de gebruiker de mogelijkheid om het publiek al dan niet publiekelijk te tonen. Sla de code op in een PHP-bestand en upload het naar uw themamap. Noem het in jouw functions.php. Ga daarna naar je widgets-paneel en je ziet de nieuw gemaakte widget.

Alle code is opgenomen in het downloadbestand, zodat u deze gemakkelijker kunt kopiëren en plakken. Veel plezier!