Uw eigen widgets maken met behulp van verschillende WordPress-API's Inleiding

Wat je gaat creëren

Widgets zijn een handige manier om site-eigenaren controle te geven over het uiterlijk (en soms de functionaliteit) van hun WordPress-sites. In deze serie gaan we een handvol WordPress-widgets maken door de Widgets-API te combineren met andere externe API's.

De serie bestaat uit de volgende tutorials:

Een introductie
Gerelateerde berichten Widget
Inloggen Widget
FAQ Widget
Meest populaire posts Widget met Google Analytics-integratie
Physical Address Widget met Google Maps Integration
Conclusie

In deze zelfstudie zal ik u kennis laten maken met de WordPress Widgets-API door een eenvoudige tekstwidget te (her) creëren. We zullen de verschillende functies van de widget analyseren en onderzoeken om te begrijpen hoe WordPress-widgets in het algemeen werken.

Deze widget zal ook als basis dienen waarop we zullen voortbouwen bij het maken van andere widgets in de volgende delen van deze serie.

WordPress Widgets

WordPress-widgets voegen inhoud en functies toe aan uw zijbalken of widgetized gebieden van uw thema. Widgets zijn ontworpen om een eenvoudige en gebruiksvriendelijke manier te bieden om het ontwerp en de structurele controle van het WordPress-thema aan de gebruiker te geven zonder dat ze moeten weten hoe ze moeten coderen.

De meeste WordPress-widgets bieden maatwerk en opties, zoals in te vullen formulieren, optionele afbeeldingen en andere aanpassingsfuncties.

De widgetklas onderzoeken

De eenvoudigste manier om een WordPress-widget te maken is om de WP_Widget klasse. Op deze manier kunt u de ingebouwde functies gebruiken om de widget bij te werken, de widget weer te geven en een beheerdersinterface voor de widget te maken.

Om volledig te begrijpen hoe widgets werken, zullen we een lege widget maken en bekijken. Vervolgens definiëren we elke functie waaruit de widget bestaat, zodat u kunt zien hoe ze samen werken om een werkende widget te maken.

Onze Widget-definitie

De functies in detail

Laten we elke functie in meer detail bekijken:

__construct ()

Deze functie registreert de widget met WordPress

widget ()

Deze functie is verantwoordelijk voor de front-end weergave van de widget. Het geeft de inhoud van de widget weer

bijwerken()

Verwerkt de widgetopties bij opslaan. Gebruik deze functie om uw widget bij te werken (optie). Deze functie heeft twee parameters nodig:

$ new_instance - Waarden die zojuist zijn verzonden om te worden opgeslagen. Deze waarden komen van het formulier dat is gedefinieerd in de methode form ()
$ old_instance - Eerder opgeslagen waarden uit de database

Zorg ervoor dat u alle door gebruikers ingediende waarden hier opschoont. Door gebruikers ingediende waarden moeten altijd worden opgeschoond voordat ze naar de database worden verzonden

het formulier()

De het formulier() methode / functie wordt gebruikt om het back-end widget formulier te definiëren - dat je ziet in het paneel widgets in het dashboard Dit formulier stelt een gebruiker in staat om de titel en andere opties voor de widget in te stellen.

Deze functie neemt de volgende parameter (s):

$ instantie - Eerder opgeslagen waarden uit de database

Onze widget maken

Om onze widget te maken, zullen we de volgende stappen volgen:

Bepaal wat we aan het creëren zijn
Registreer onze widget met WordPress
Bouw het back-end formulier
Sla waarden op in de database
Definieer het front-end display
Registreer de widget

Wat zijn we aan het creëren?

Zoals we eerder vermeldden, creëren we een eenvoudige tekstwidget die een gebruiker in staat stelt om een titel en een willekeurige tekst in te voeren die dan in de voorkant van hun website wordt weergegeven waar de widget wordt geplaatst.

Widget Constructor

De constructor stelt ons in staat om onze widget te initialiseren door de bovenliggende klasse te overschrijven (standaard WP_Widget klasse).

 'tutsplustext_widget', 'description' => __ ('Een standaard tekstwidget om de Tutsplus-serie te demonstreren bij het maken van uw eigen widgets.', 'tutsplustextdomain'))); load_plugin_textdomain ('tutsplustextdomain', false, basename (dirname (__FILE__)). '/ languages');

In de bovenstaande code noemen we de constructiefunctie van de bovenliggende WP_Widget-klasse en geven deze de foolowing-argumenten door:

Base ID - Een unieke ID voor de widget. Moet in kleine letters zijn. Als dit leeg wordt gelaten, wordt een deel van de klassennaam van de widget gebruikt.
Naam - Dit is de naam voor de widget die wordt weergegeven op de configuratiepagina (in de dashborad).
En een (optionele) array met een klassenaam en een beschrijving. De beschrijving wordt getoond op de configuratiepagina (in het WordPress dashboard).

Het back-end formulier bouwen

Het back-end-formulier bestaat uit twee velden: een titelveld en een tekstveld. Hier is een screenshot van het formulier zoals het eruit zal zien in het Widgets-paneel:

Om het bovenstaande formulier te genereren, zouden we beginnen met pure HTML en enkele attribuutwaarden vervangen door enkele PHP-variabelen en -uitdrukkingen. Het volgende is de HTML-code om de twee velden te maken:

Titel

Eenvoudig bericht bericht…

Om van deze naar onze definitieve code voor de functie form () te gaan, moeten we een aantal van de bovenstaande attributen dynamisch maken - namelijk naam, id en het attribuut van het label (dat moet overeenkomen met de id van de HTML die het label bevat) is voor). We zullen ook de waarde van het tekstveld en de inhoud van het tekstveld vervangen door dynamische waarden uit de database als ze al zijn opgeslagen.

Hier is de code waarmee we eindigen:

    
   <?php echo $message; ?> 
 
De bovenstaande code opent en wijst eerder opgeslagen waarden uit de database toe aan twee variabelen - $ title en $ message. We gebruiken dan de esc_attr () om de geretourneerde waarden te coderen en om te voorkomen dat onze code wordt overtreden. Vervolgens herhalen we het $ title -kenmerk in het waardekenmerk van het tekstveld en echo $ -bericht als de inhoud van het textarea-veld.
 In de bovenstaande code ziet u twee methoden die waarschijnlijk nieuw voor u zijn: get_field_id () en get_field_name ().
   get_field_id () - Neemt veldnaam als een argument en construeert id-attributen voor gebruik in formulier () -velden. Het zorgt ervoor dat het geretourneerde veld-ID uniek is
  get_field_name () - Neemt veldnaam als een argument en construeert naamattributen voor gebruik in formulier () -velden. Het zorgt ervoor dat de geretourneerde veldnaam uniek is.
 
 De label-tags ' voor attribuut is gecodeerd om de id-waarde van de elementen die ze labelen uit te beelden.
 De widefat class wordt gebruikt om ervoor te zorgen dat de velden van uw widget er hetzelfde uitzien als andere velden in het WordPress-dashboard.

Updaten van onze widget (opties)
 Om onze widget bij te werken, zullen we de juiste code schrijven in de update-methode. Hier is onze code:

De bovenstaande functie heeft twee parameters nodig - $ new_instance en $ old_instance
   $ new_instance is een array met de nieuwe instellingen (van dit exemplaar van de widget) die zojuist door de gebruiker zijn ingevoerd via het backend-formulier dat we definiëren in de functie formulier ().
  $ old_settings is een array met oude instellingen. Dit zijn de waarden die momenteel in de database zijn opgeslagen.
 
 De update () functie retourneert een reeks instellingen om op te slaan of onwaar om het opslaan te annuleren.
 In de bovenstaande code wijzen we $ old_instance toe aan de variabele $ instance en vervangen de titel- en berichtsleutels door waarden van $ new_instance. Door de nieuwe en bijgewerkte array te retourneren, werken we onze widget-instellingen effectief bij.
 De strip_tags () functie verwijdert HTML- en PHP-tags uit een string die eraan is doorgegeven. We nemen deze functie op om te voorkomen dat de gebruikers van uw thema tags die zijn ingevoerd via het back-end-formulier niet kunnen sluiten, waardoor uw site wordt verbroken (niet correct weergegeven).
De front-end definiëren 
De widget () functie is verantwoordelijk voor de fron-end-weergave van de widget. Er zijn twee parameters voor nodig - $ args en $ instantie. 
$ args is een array die is doorgegeven aan de functie register_sidebar () bij het definiëren van het zijbalk- / widgeted gebied waarin de widget wordt geplaatst. Dit is te vinden in uw functions.php het dossier. Hieronder staat een voorbeeld van een register_sidebar () verklaring:
De array bevat definities van de openings- en sluitingstags voor de widget zelf en voor de titel van de widget.
 $ instantie is een array met de instellingen voor het specifieke exemplaar van de widget. Deze instellingen zijn opgehaald uit de database.
 We maken gebruik van de bovenstaande tags in de uiteindelijke widgetcode hieronder:

In de bovenstaande code kunnen we eindelijk de voorkant van onze widget coderen. Onze widget voert eenvoudig een titel en een willekeurig bericht (tekst) uit. De code doet precies dat en wikkelt de widget zelf en de titel van de widget binnen de openings- en sluitingslabels die zijn gedefinieerd in functions.php voor het specifieke widgetgebied (zijbalk) waar de widget wordt geplaatst.
 We introduceren de extract() functie waarvan sommigen misschien niet bekend zijn. Deze functie neemt een associatieve array en geeft de sleutels als variabelen terug. Het stelt ons in staat om $ before_widget in plaats van $ args ['before_widget'] te echoën, waardoor onze code een beetje vereenvoudigd wordt.
 De uiteindelijke uitvoer op een echte website ziet er ongeveer zo uit:
De widget registreren
 De widget moet worden geregistreerd bij WordPress nadat deze is gedefinieerd, zodat deze beschikbaar wordt in het widgetpaneel van ons WordPress-dashboard.
De definitieve code 
Om alles eenvoudig te houden voor de eindgebruikers van onze widgets, gaan we onze widgetcode inpakken in een WordPress-plug-in, zodat deze eenvoudig te installeren is.
 Dit zal ons ook in staat stellen om alle code die we in de serie zullen maken in één enkel bestand te bewaren.
 Hier is de definitieve code:

 'tutsplustext_widget', 'description' => __ ('Een standaard tekstwidget om de Tutsplus-serie te demonstreren bij het maken van uw eigen widgets.', 'tutsplustextdomain'))); load_plugin_textdomain ('tutsplustextdomain', false, basename (dirname (__FILE__)). '/ languages');  / ** * Front-end weergave van widget. * * @see WP_Widget :: widget () * * @param array $ args Widget-argumenten. * @param array $ instance Opgeslagen waarden uit database. * / public function widget ($ args, $ instance) extract ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); $ message = $ instance ['message']; echo $ before_widget; if ($ title) echo $ before_title. $ titel. $ After_title;  echo $ bericht; echo $ after_widget;  / ** * Sanitize widget-formulierwaarden als ze worden opgeslagen. * * @see WP_Widget :: update () * * @param array $ new_instance Waarden die zojuist zijn verzonden om te worden opgeslagen. * @param array $ old_instance Eerder opgeslagen waarden uit database. * * @return array Bijgewerkte veilige waarden die moeten worden opgeslagen. * / update openbare functie ($ new_instance, $ old_instance) $ instance = $ old_instance; $ instance ['title'] = strip_tags ($ new_instance ['title']); $ instance ['message'] = strip_tags ($ new_instance ['message']); return $ instantie;  / ** * Back-end widget-formulier. * * @see WP_Widget :: form () * * @param array $ instance Eerder opgeslagen waarden uit database. * / public function form ($ instance) $ title = esc_attr ($ instance ['title']); $ message = esc_attr ($ instance ['message']); ?>    
   <?php echo $message; ?> 
 Conclusie
 In deze zelfstudie hebben we de reeks geïntroduceerd: Uw eigen WordPress-widgets maken met behulp van verschillende API's. We hebben dieper ingegaan op wat ze zijn, hoe ze werken en hoe ze te maken.
 Het doel van deze zelfstudie was om een grondige inleiding te geven in de Widgets-API en om een basiswidget te leveren van waaruit de andere widgets in deze serie kunnen worden gemaakt.
 In het volgende deel van de serie gaan we een gerelateerde berichtenwidget maken. In de tussentijd kunt u gerust vragen of opmerkingen achterlaten in het onderstaande formulier.





		
			
	   
	




Code