Aanstaande gebeurtenissen toevoegen Plugin in WordPress de widget maken

In het laatste deel van de serie hebben we gekeken naar het registreren van een aangepast berichttype voor evenementen. We hebben het dashboard aangepast door een aangepaste metabox toe te voegen en enkele aangepaste metavelden voor het invoeren van gebeurtenisgegevens. Om het voor de gebruiker gemakkelijker te maken om datums in te voeren, hebben we de jQuery UI datepicker-besturing ook in het dashboard opgenomen.

Hoewel WordPress alleen de titel en de datumkolom voor het aangepaste berichttype in het beheerdersvenster van post toont, hebben we onze eigen aangepaste kolommen toegevoegd om de begindatum, einddatum en de locatie van het evenement te tonen. Daarmee hebben we het grootste deel van onze plug-ins voor toekomstige evenementen voltooid.

In het laatste deel van deze serie zullen we:

kijk naar de WordPress widgets API
registreer een widget om een lijst met aankomende evenementen te tonen
doorzoek de database voor aankomende evenementen met behulp van de klasse WP_Query
maak een meta-query om datums te vergelijken, zodat alleen de gebeurtenissen in de toekomst naar voren komen

Laten we naar binnen duiken, want we zullen het hele proces van het bouwen van een WordPress-widget vanaf de basis doorlopen.

WordPress Widgets API

We kunnen widgets beschouwen als codeblokken die bedoeld zijn om bepaalde functionaliteit aan een site toe te voegen. Dit kan van alles zijn, van een agenda, knoppen voor sociaal delen, een beoordelingssysteem of een testimonial-schuifregelaar. Een gebruiker kan eenvoudig toevoegen aan of verwijderen van de site door ze eenvoudigweg te slepen.

WordPress-widgets kunnen worden gemaakt door het WP_Widget klasse die WordPress biedt. Deze klasse bevat de benodigde methoden en eigenschappen om een widget te laten werken. Dit omvat functies om een widget te initialiseren, de gebruikersinterface in de beheerder weer te geven, hun verschillende instanties bij te werken, de nieuwe instellingen in de database op te slaan en ze weer te geven op het doopvont.

We breiden vier functies uit de basisklasse uit om de functionaliteit van onze widget te definiëren:

__construct ()
het formulier()
bijwerken()
widget ()

Laten we een overzicht hebben voor elk van hen:

__construct ()

De __construct () methode initialiseert de widget. Het stelt widgetnaam, basis-ID en andere informatie in zoals beschrijving en widget-klasse, enz.

het formulier()

Dit is de functie die het instellingenformulier in het dashboard uitvoert. Het formulier kan velden bevatten voor verschillende opties om het uiterlijk en de functionaliteit van de widget aan de voorkant aan te passen. De het formulier() methode accepteert een argument voor de instantie van de widget.

bijwerken()

Deze methode zorgt ervoor dat de widget wordt bijgewerkt wanneer een nieuwe instelling wordt toegepast op een instantie van de widget. Het accepteert twee argumenten: één voor de oude instantie en één voor nieuwe instantie van de widget.

widget ()

Met deze methode wordt de widgetinhoud naar de voorkant van de site uitgevoerd. Hier bepalen we wat de gebruikers moeten zien als ze de site bezoeken. Deze methode accepteert twee argumenten:

$ widget_args: Dit is een array met de nodige informatie over de widget
$ instantie: Het exemplaar van de widget dat wordt weergegeven

We zullen deze methoden en hun argumenten in een tijdje van naderbij bekijken. Laten we voorlopig onze widgetklasse registreren.

De widget registreren

Maak in de hoofdmap van de plug-in een nieuwe map met de naam inc voor omvat. Maak in die map een bestand met de naam widget-aankomende-events.php. We zullen al onze widgetcode in dit bestand schrijven om de zaken overzichtelijk en overzichtelijk te houden.

We beginnen met het uitbreiden van de bovenliggende widgetklasse, zoals zo:

Om de widget te registreren, gebruiken we de register_widget () functie in combinatie met de widgets_init haak:

functie uep_register_widget () register_widget ('Upcoming_Events');  add_action ('widgets_init', 'uep_register_widget');

De register_widget () functie accepteert de naam van de uitgebreide klasse als het argument.

Binnen in de Aankomende evenementen klas, zullen we onze vier methoden definiëren voor degenen die we in het vorige gedeelte hebben bekeken:

In de volgende stap zullen we code voor elk van hen schrijven en zullen we de werking ervan nader bekijken. Maar voeg daarvoor de volgende regel code toe aan het eind van aankomende-events.php belangrijkste plugin-bestand om de widget op te nemen:

include ('inc / widget-upcoming-events.php');

De `__construct ()` Methode

Als je een achtergrond hebt in OOP, dan weet je zeker wat constructeurs zijn. Voor beginners zijn constructors speciale functies in een klasse die automatisch worden aangeroepen wanneer een object van die klasse wordt geïnstantieerd.

Omdat we een klasse hebben voor een widget, moeten we een functie hebben die bepaalde dingen instelt, zoals de ID en de widgetnaam wanneer die widget wordt geïnstantieerd en dat is waar de __construct () methode komt om de hoek kijken.

De __construct () methode van de bovenliggende klasse accepteert drie argumenten:

$ base_id: Het unieke ID voor de widget
$ title: De titel van de widget in het beheerdersgebied. Moet worden gemarkeerd voor vertaling
$ widget_ops: Een array met andere widgetopties zoals widgetklasse en widgetbeschrijving, enzovoort

Nu dat we wat weten __construct () doet en welke argumenten het accepteert, laten we er code voor schrijven:

public function __construct () $ widget_ops = array ('class' => 'uep_upcoming_events', 'description' => __ ('Een widget om een lijst met aankomende evenementen weer te geven', 'uep')); parent :: __ construct ('uep_upcoming_events', // base id __ ('Upcoming Events', 'uep'), // title $ widget_ops);

In de __construct () methode van onze widget, hebben we een oproep gedaan naar de __construct () methode van de bovenliggende klasse aangegeven met bovenliggende :: __ construct () en gaf drie argumenten door voor basis id, titel en widget-opties. Merk ook op dat de tekenreeksen zijn gemarkeerd voor vertaling met behulp van de __ () functie.

De `het formulier()` Methode

De het formulier() methode is waar we het lichaam van onze widget definiëren dat in de WordPress-beheerder wordt weergegeven. Het accepteert één argument $ instantie voor het exemplaar van de widget.

We moeten de gebruiker een tekstveld bieden om de widgettitel in te voeren. Ook moet hij of zij kunnen kiezen tussen het aantal evenementen dat hij op de site wil laten zien. Maar deze velden zouden ook een aantal standaardwaarden moeten hebben voor het geval de gebruiker zijn eigen waarden niet wil invoeren.

Eerst zullen we de standaardwaarden voor onze velden definiëren:

$ widget_defaults = array ('title' => 'Aankomende evenementen', 'number_events' => 5); $ instance = wp_parse_args ((array) $ instantie, $ widget_defaults);

We definieerden onze standaardwaarden in een array met toetsen als veldnamen. We hebben toen de wp_parse_args () utility-functie die een array van argumenten samenvoegt (in ons geval - $ instantie) met een reeks standaardwaarden (in dit geval - $ widget_defaults). Merk ook op dat we de $ instantie als een array.

Het is tijd om formuliervelden voor de titel en het aantal afspraken weer te geven. Laten we beginnen met het maken van een tekstveld voor de titel:

Allereerst hebben we een alinea gemaakt als een containerelement (hoewel je net zo gemakkelijk kon gebruiken als een div). Vervolgens hebben we een label voor het invoerveld gemaakt. We hoeven het niet handmatig een ID te geven, omdat WordPress het alleen zal regelen. Het biedt ons enkele utility-functies voor beter werken met veldnamen en id's. Het zal een unieke id en naam genereren voor elk veld in de vorm elke keer dat we een instantie van de widget maken, waardoor we in staat zijn om zoveel exemplaren van dezelfde widget te maken.

De methode die wordt gebruikt om het veld-ID te genereren is get_field_id () voorafgegaan door een $ This->, wat een manier is om te vertellen dat deze methode tot dezelfde klasse behoort. Deze methode is al gedefinieerd in de basis WP_Widget klasse en omdat we het hebben uitgebreid met onze eigen klas, wordt het direct beschikbaar. De methode accepteert een argument voor het veld waarvoor we een ID genereren.

We hebben de labeltekst voor vertaling gemarkeerd met behulp van de _e () functie.

De volgende methode die we hebben gebruikt is get_field_name () die op dezelfde manier werkt als get_field_id () behalve dat het een waarde genereert voor het naamattribuut van het veld.

De klas widefat we hebben gegeven aan het invoerveld is een standaard WordPress-klasse die de invoervelden in de WordPress-beheerder stijlen.

Dan voor het waardeattribuut van het invoerveld, herhaalden we eenvoudig de inhoud van $ Bijvoorbeeld [ 'title'] tijdens het doorgeven van de esc_attr () functie om ongewenste tekens te coderen.

Voor de vervolgkeuzelijst selecteren om het aantal te tonen gebeurtenissen te specificeren, voegt u de volgende code toe in de het formulier() methode:

De code is vrijwel hetzelfde als de code voor het titelveld, behalve dat we een lus hebben gemaakt voor het maken van de optietags. Om te controleren of een optie momenteel is geselecteerd, hebben we een andere functie voor het gebruik van WordPress gebruikt gekozen() die twee gegeven waarden vergelijkt (in dit geval - $ i en $ Bijvoorbeeld [ 'NUMBER_EVENTS']) en voegt vervolgens de gekozen attribuut aan de huidige optietag als de waarden gelijk zijn.

Dat is alles over de het formulier() methode. We moeten nu controleren of onze widget wordt bijgewerkt wanneer er een nieuwe wijziging op wordt toegepast.

De `bijwerken()` Methode

De bijwerken() methode maakt het zo dat we in staat zijn om de waarden die een widget beheert bij te werken. Het accepteert twee argumenten $ old_instance en $ new_instance en retourneert het bijgewerkte exemplaar van de widget.

De code is vrij eenvoudig:

update van openbare functies ($ new_instance, $ old_instance) $ instance = $ old_instance; $ instance ['title'] = $ new_instance ['title']; $ instance ['number_events'] = $ new_instance ['number_events']; return $ instantie;

Dus iedere keer dat de gebruiker een wijziging in een instantie van de widget aanbrengt, is de bijwerken() methode werkt de instellingen in de database bij, zodat de widget wordt bijgewerkt met nieuwe instellingen.

De `widget ()` Methode

Dit is de belangrijkste methode omdat de beoogde inhoud aan de voorkant van de site wordt weergegeven. Het accepteert twee argumenten $ args en $ instantie. De $ args array bevat de volgende elementen:

name $: De naam van de zijbalk waarin de widget wordt weergegeven
$ id: De id van de gerespecteerde zijbalk
$ beschrijving: De beschrijving van de zijbalk
$ klasse: De sidebar-klasse
$ before_widget: De HTML die vóór de widget zou komen. Kan een openingstag zijn van het bevattende element
$ after_widget: De HTML die achter de widget zou komen. Over het algemeen een afsluitende tag van het bevattende element
$ before_title: De HTML die voor de titel van de widget wordt geplaatst
$ after_title: De HTML voorafgegaan door de titel van de widget
$ WIDGET_ID: De id van dat specifieke exemplaar van de widget. Dit is NIET het basis-ID van de widget
$ WIDGET_NAME: De naam van de widget die wordt doorgegeven bij het registreren van de widget

Als u ooit een zijbalk voor een WordPress-thema hebt geregistreerd, dan zijn de eerste acht elementen van de $ args array zou er bekend uit moeten zien. De laatste twee elementen zijn widget-specifiek.

Laten we het uitpakken $ args array en pas de widget_title filter naar de titel van de widget:

openbare functie widget ($ args, $ instance) extract ($ args); $ title = apply_filters ('widget_title', $ instance ['title']);

Nu is het tijd om de query voor te bereiden voor het ophalen van een lijst met evenementen. We zullen de gebruiken WP_Query klasse voor dit doel samen met de meta query:

$ query_args = array ('post_type' => 'event', 'posts_per_page' => $ instance ['number_events'], 'post_status' => 'publish', 'ignore_sticky_posts' => true, 'meta_key' => 'event -start-date ',' orderby '=>' meta_value_num ',' order '=>' ASC '); $ upcoming_events = nieuwe WP_Query ($ query_args);

Omdat we onze evenementen in oplopende volgorde willen sorteren op hun startdatum, hebben we de meta_key naar de event-start-date meta-waarde van onze evenementen. Samen met dat hebben we WordPress verteld dat we hier getallen vergelijken (niet de strings) door het instellen van orderby naar meta_value_num. Als je instelt orderby om gewoon meta_value, de WordPress maakt de vergelijking alsof het strings vergelijkt en dat is niet wat we willen.

De bovenstaande query zal het gegeven aantal gebeurtenissen in oplopende volgorde ophalen met betrekking tot hun startdata. Maar we willen ook gebeurtenissen uitfilteren die al voorbij zijn, dat wil zeggen hun event-einddatum meta-waarde is minder dan de huidige tijdstempel. Om dat te bereiken, zullen we een meta-vraag doorgeven die zal controleren op hun einddata:

$ meta_quer_args = array ('relation' => 'AND', array ('key' => 'event-end-date', 'value' => time (), 'compare' => '> =')); $ query_args = array ('post_type' => 'event', 'posts_per_page' => $ instance ['number_events'], 'post_status' => 'publish', 'ignore_sticky_posts' => true, 'meta_key' => 'event -start-date ',' orderby '=>' meta_value_num ',' order '=>' ASC ',' meta_query '=> $ meta_quer_args); $ upcoming_events = nieuwe WP_Query ($ query_args);

In de bovenstaande code vergeleken we de event-einddatum meta-waarde groter dan of gelijk aan de huidige tijdstempel. Nu, alleen de gebeurtenissen met hun event-einddatum meta-waarden die groter zijn dan de huidige tijdstempel, d.w.z. de gebeurtenissen die in de toekomst aanstaande zullen worden opgehaald.

Nu we de gebeurtenissen hebben opgehaald, beginnen we met het uitspugen van de inhoud van onze widget:

echo $ before_widget; if ($ title) echo $ before_title. $ titel. $ After_title; ?>

"> op
-

"> Bekijk alle evenementen

De bovenstaande code moet vanzelfsprekend zijn: we hebben eerst de inhoud van $ before_widget als een openingstag van het bevattende element. Daarna hebben we gecontroleerd of de widget een titel heeft, als dat zo is, hebben we het afgedrukt terwijl het wrapt $ before_title en $ after_title.

Daarna hebben we de gebeurtenissen doorgenomen die we hadden gevonden - het afdrukken van hun titels, fragmenten en andere informatie, zoals data en locaties. Aan het einde hebben we een link naar hun archiefpagina toegevoegd met behulp van de functie get_post_type_archive_link () die een permalink teruggeeft naar de archiefpagina van het gegeven berichttype. Vervolgens hebben we onze widget ingepakt door de $ after_widget afsluitende tag.

Laten we enkele basisstijlen voor onze widget in de. Schrijven css / style.css het dossier:

.uep_event_entry margin-bottom: 21px;  .uep_event_entry h4 margin-bottom: 3px;  .uep_event_entry h4 a text-decoration: none; kleur: erven;  .uep_event_entry .event_venue font-size: 0.9em; kleur: # 777777; font-gewicht: normaal; lettertype-stijl: cursief;  .uep_event_entry p margin-bottom: 3px! important;  .uep_event_entry .uep_event_date font-size: 0.9em; kleur: # 777777;

Nu moeten we dit bestand aan de voorkant toevoegen, maar alleen als onze widget momenteel is geactiveerd. We zullen controleren of onze widget momenteel wordt weergegeven op de front-end met behulp van de is_active_widget () functie die vier argumenten accepteert en ze zijn allemaal optioneel:

$ callback: De widget callback om te controleren
$ WIDGET_ID: Widget-ID. Nodig voor controle
$ id_base: De basis-ID van de widget zoals doorgegeven in de __construct () methode
$ skip_inactive: Of de inactieve widgets worden overgeslagen

Voeg de volgende code toe onder de uep_admin_script_style () functie in de aankomende-events.php hoofd plugin bestand:

function uep_widget_style () if (is_active_widget (",", 'uep_upcoming_events', true)) wp_enqueue_style ('comingcoming-events', STYLES. 'upcoming-events.css', false, '1.0', 'all');  add_action ('wp_enqueue_scripts', 'uep_widget_style');

Daarom hebben we eerst gecontroleerd of de widget momenteel actief is. Als dit het geval is, hebben we de stylesheet uitgezet met behulp van de wp_enqueue_style () functie.

Dat is alles over de widget () methode. We hebben met succes een widget gemaakt die een lijst met aankomende evenementen weergeeft, samen met de andere bijbehorende informatie.

Flushing Rewrite-regels

We hebben onze plug-in en de widget bijna voltooid, maar we hebben nog steeds een klein probleempje: klik op een van de titel van het evenement en er verschijnt mogelijk een fout 'pagina niet gevonden'. Dat komt omdat wanneer we een berichttype registreren via plug-in, we regels voor het herschrijven van de activering van de plug-in moeten doorspoelen voor een goede werking van de permalink-structuur.

U zou uw links kunnen laten werken door de permalink-structuur te veranderen, maar dat is niet de ideale manier; daarom zullen we herschrijfregels doorspoelen elke keer dat onze plug-in is geactiveerd.

Voeg de volgende code toe aan uw aankomende-events.php het dossier:

function uep_activation_callback () uep_custom_post_type (); flush_rewrite_rules ();  register_activation_hook (__FILE__, 'uep_activation_callback');

Dus hebben we de activeringshaak voor onze plug-in geregistreerd met behulp van de register_activation_hook () functie die twee argumenten accepteert:

$ file: Het pad naar het hoofdinvoegbestand
$ functie: De callback-functie die moet worden uitgevoerd wanneer de plug-in is geactiveerd

In de callback-functie van onze haak hebben we eerst het aangepaste berichttype van gebeurtenissen in de database toegevoegd met behulp van de functie uep_custom_post_type () we hadden eerder in onze vorige tutorial gedefinieerd.

Vervolgens hebben we de herschrijfregels doorgespoeld met de flush_rewrite_rules () functie. Nu wilt u misschien de plug-in deactiveren en weer activeren om ervoor te zorgen dat de herschrijfregels zijn leeggemaakt, terwijl uw links nu goed moeten werken en u doorverwijzen naar de enige pagina van het evenement.

Conclusie

Dit was een heel lange tutorial waarin we veel code schreven en naar verschillende WordPress-functies keken. We hebben vanuit het niets een WordPress-widget gemaakt door het bovenliggende element uit te breiden WP_Widget klasse en gekeken naar de ledfuncties die deze klasse biedt om de functionaliteit van onze widget te definiëren. We hebben ook een zoekopdracht geschreven met de kracht van WP_Query klasse om een lijst met gebeurtenissen op te halen die is gefilterd op hun metawaarden.

Hiermee sluiten we ook onze driedelige serie af. Ik hoop dat deze serie nieuwe lezers zal helpen die net met WordPress zijn begonnen en ook diegenen die hun kennis van WordPress-plug-in en widget-ontwikkeling willen verbeteren..

Je hebt toegang tot de volledige code van de plug-in op mijn GitHub-pagina en hieronder zijn enkele links voor een verdere verkenning van de onderwerpen die in deze tutorial aan de orde komen:

WordPress Widgets API
Klasseverwijzing: WP_Query
Mastering WordPress Meta Data: een inleiding tot metadata
Object-georiënteerd programmeren in WordPress: een inleiding

Code