Crearea de evenimente viitoare Plugin în WordPress Crearea widgetului

În ultima parte a seriei, am analizat înregistrarea unui tip de post personalizat pentru evenimente. Am personalizat tabloul de bord prin adăugarea unui metabox personalizat și a câmpurilor meta personalizate pentru introducerea datelor evenimentului. Pentru a facilita introducerea datelor de către utilizator, am inclus și controlul de datepicker al jQuery UI în tabloul de bord, precum și.

În timp ce WordPress afișează doar titlul și coloana de date pentru tipul postului personalizat din ecranul post admin, am adăugat propriile coloane personalizate pentru a afișa data de începere a evenimentului, data de încheiere și locul evenimentului. Astfel, am finalizat cea mai mare parte a plugin-ului nostru de evenimente viitoare.

În ultima parte a acestei serii, vom:

uita-te la API-urile WordPress widgets
înregistrați un widget pentru a afișa o listă de evenimente viitoare
interogați baza de date pentru evenimente viitoare utilizând clasa WP_Query
efectuați o interogare meta pentru a compara datele, astfel încât să apară doar evenimentele viitoare

Să ne aruncăm cu capul în jos, deoarece vom trece prin procesul de construire a unui widget WordPress de la bază în sus.

WordPress Widgets API

Ne putem gândi la widget-uri ca blocuri de coduri menite să adauge anumite funcționalități unui site. Acest lucru ar putea fi orice dintr-un calendar, butoane de partajare socială, un sistem de rating sau un slider de mărturii. Un utilizator poate să le adauge sau să le elimine cu ușurință de pe site pur și simplu prin tragerea lor.

Widgeturile WordPress pot fi făcute prin extinderea WP_Widget clasa pe care WordPress o oferă. Această clasă conține metode și proprietăți necesare pentru a face ca widgetul să funcționeze. Aceasta include funcții de inițializare a unui widget, de afișare a interfeței cu utilizatorul în admin, de actualizare a diferitelor instanțe, de salvare a noilor setări în baza de date și de afișare a acestora pe capătul de font.

Vom extinde patru funcții din clasa de bază pentru a defini funcționalitatea widgetului nostru:

__construi()
formă()
Actualizați()
widget ()

Să avem o privire de ansamblu asupra fiecăruia dintre ele:

__construi()

__construi() metoda inițializează widget-ul. Acesta stabilește numele de widget, ID-ul de bază și alte informații, cum ar fi descrierea și clasa widget, etc.

formă()

Aceasta este funcția care emite formularul de setări în tabloul de bord. Formularul poate include câmpuri pentru diferite opțiuni pentru a personaliza aspectul și funcționalitatea widgetului de pe front-end. formă() metoda acceptă un argument pentru instanța widget-ului.

Actualizați()

Această metodă asigură faptul că widget-ul se actualizează de fiecare dată când se aplică o nouă setare unei instanțe a widget-ului. Acceptă două argumente: una pentru vechea instanță și una pentru noua instanță a widget-ului.

widget ()

Această metodă afișează conținutul widget-ului în partea frontală a site-ului. Aici definim ceea ce trebuie să fie văzut de utilizatori atunci când aceștia vizitează site-ul. Această metodă acceptă două argumente:

$ widget_args: Acesta este un matrice care conține informațiile necesare despre widget
$ instanță: Exemplu de widget care urmează să fie afișat

Vom examina mai îndeaproape aceste metode și argumentele lor în doar puțin timp. Pentru moment, hai să ne înregistrăm clasa widget.

Înregistrarea widgetului

În directorul rădăcină al pluginului, creați un nou director numit inc pentru include. În acel director, creați un fișier numit widget-viitoare-events.php. Vom scrie toate codurile widget în acest fișier pentru a păstra lucrurile curate și ușor de gestionat.

Vom începe prin extinderea clasei widget părinte astfel:

Pentru a înregistra widgetul, vom folosi register_widget () funcția împreună cu widgets_init cârlig:

funcția uep_register_widget () register_widget ('Upcoming_Events');  add_action ('widgets_init', 'uep_register_widget');

register_widget () funcția acceptă numele clasei extinse ca argument.

În interiorul Evenimente viitoare clasa, vom defini cele patru metode pe cele pe care le-am aruncat o privire în secțiunea anterioară:

În următorul pas, vom scrie cod pentru fiecare dintre ele și vom avea o privire mai atentă la modul în care funcționează. Dar, înainte de aceasta, adăugați următoarea linie de cod la sfârșitul lui viitoare-events.php fișierul plugin principal pentru a include widget-ul:

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

`__construi()` Metodă

Dacă aveți o experiență în OOP, atunci cu siguranță știi ce sunt constructorii. Pentru începători, constructorii sunt funcții speciale într-o clasă care sunt automat numiți atunci când un obiect din acea clasă este instanțiat.

Deoarece avem o clasă pentru un widget, trebuie să avem o funcție care să stabilească anumite lucruri, cum ar fi id-ul și numele widget-ului, ori de câte ori widget-ul este instanțiat și acolo este locul __construi() metoda intră în joc.

__construi() metoda clasei părinte acceptă trei argumente:

$ base_id: ID-ul unic pentru widget
titlu $: Titlul widget-ului din zona de administrare. Ar trebui marcate pentru traducere
$ widget_ops: Un tablou care conține alte opțiuni widget precum clasa widget și descrierea widgetului etc.

Acum că știm ce __construi() și ce argumente acceptă, să scriem codul pentru el:

funcția publică __construct () $ widget_ops = array ('class' => 'uep_upcoming_events', 'description' => __ ('Un widget pentru a afișa o listă de evenimente viitoare', 'uep')); părinte :: __ construct ('uep_upcoming_events', // base id __ ('Evenimente viitoare', 'uep'), // title $ widget_ops);

În __construi() metoda widgetului nostru, am sunat la __construi() metoda din clasa părinte indicată de părinte :: __ construct () și a trecut trei argumente pentru opțiunile bazei id, titlu și widget. De asemenea, rețineți că șirurile sunt marcate pentru traducere utilizând __ () funcţie.

`formă()` Metodă

formă() metoda este locul în care definim corpul widgetului nostru care se va afișa în administratorul WordPress. Acceptă un argument $ instanță pentru exemplul widget-ului.

Trebuie să furnizăm utilizatorului un câmp de text pentru a introduce titlul widgetului. De asemenea, el sau ea ar trebui să poată alege între numărul de evenimente pe care vrea să le arate pe site. Dar aceste câmpuri ar trebui să aibă și anumite valori implicite în cazul în care utilizatorul nu dorește să introducă propriile sale valori.

În primul rând, vom defini valorile implicite pentru câmpurile noastre:

$ widget_defaults = array ('title' => 'Evenimente viitoare', 'number_events' => 5); $ instanță = wp_parse_args ((array) $ instanță, $ widget_defaults);

Am definit valorile implicite într-o matrice cu chei ca nume de câmp. Apoi am folosit wp_parse_args () utilitate care combină o serie de argumente (în cazul nostru - $ instanță) cu o serie de valori implicite (în acest caz - $ widget_defaults). De asemenea, rețineți că am difuzat tipul $ instanță ca o matrice.

Este timpul să faceți câmpuri de formular pentru titlu și numărul de evenimente. Să începem prin crearea unui câmp de text pentru titlu:

  ">  "valoare ="„>

Mai întâi de toate, am creat un paragraf ca element de container (deși ați putea fi la fel de ușor de utilizat a div). Apoi am creat o etichetă pentru câmpul de intrare. Nu trebuie să îi dăm un id manual, deoarece WordPress va avea grijă de el însuși. Acesta ne oferă câteva funcții de utilitate pentru o mai bună lucrare cu nume de domeniu și ID-uri. Acesta va genera un id unic și un nume pentru fiecare câmp în formular de fiecare dată când creați o instanță a widgetului, permițându-ne astfel să creăm cât mai multe instanțe ale aceluiași widget.

Metoda utilizată pentru generarea id-ului de câmp este get_field_id () precedat de a $ This->, care este o modalitate de a spune că această metodă aparține aceleiași clase. Această metodă este deja definită în bază WP_Widget și din moment ce l-am extins cu clasa noastră, ea devine ușor disponibilă. Metoda acceptă un argument pentru domeniul pe care îl generăm.

Am marcat textul de etichetă pentru traducere utilizând _e () funcţie.

Următoarea metodă pe care am folosit-o este get_field_name () care funcționează în același mod ca și get_field_id () cu excepția faptului că generează o valoare pentru atributul de nume al câmpului.

Clasa widefat pe care le-am dat câmpului de intrare este o clasă implicită WordPress care modelează câmpurile de intrare din administratorul WordPress.

Apoi, pentru atributul value al câmpului de intrare, am reluat pur și simplu conținutul $ [ 'Title'] instanță în timp ce trece prin esc_attr () pentru a codifica orice caractere nedorite.

Pentru meniul derulant selectat pentru a specifica numărul de evenimente care trebuie afișate, adăugați următorul cod în formă() metodă:

Codul este aproape la fel ca și codul pentru câmpul de titlu, cu excepția faptului că am executat o buclă pentru crearea etichetelor de opțiune. Pentru a verifica dacă o opțiune este selectată în prezent, am folosit o altă funcție de utilitate WordPress selectat() care compară două valori date (în acest caz - $ i și $ exemplu [ 'NUMBER_EVENTS']) și apoi adaugă selectat atribuiți etichetei de opțiune curentă dacă valorile sunt egale.

Asta e totul despre formă() metodă. Acum trebuie să ne asigurăm că widget-ul nostru se actualizează ori de câte ori se aplică o nouă modificare.

`Actualizați()` Metodă

Actualizați() metoda o face astfel încât să putem actualiza valorile pe care widget-ul le gestionează. Acceptă două argumente $ old_instance și $ new_instance și returnează instanța actualizată a widget-ului.

Codul este destul de simplu:

actualizarea funcției publice ($ new_instance, $ old_instance) $ instance = $ old_instance; $ instanță ['title'] = $ new_instance ['title']; $ instanță ['number_events'] = $ new_instance ['number_events']; returnați $ instanță;

Deci, de fiecare dată când a fost făcută o modificare a unei instanțe a widgetului de către utilizator, Actualizați() metoda va actualiza setările din baza de date, menținând astfel widget-ul actualizat cu setări noi.

`widget ()` Metodă

Aceasta este metoda cea mai importantă pentru toți, deoarece afișează conținutul intenționat în partea frontală a site-ului. Acceptă două argumente $ args și $ instanță. $ args array conține următoarele elemente:

numele $: Numele barei laterale în care este afișat widget-ul
$ id: ID-ul bara laterală respectată
descriere $: Descrierea barei laterale
clasa $: Clasa barei laterale
$ before_widget: HTML-ul care va apărea înainte de widget. Ar putea fi o etichetă de deschidere a elementului care conține
$ after_widget: HTML-ul care va apărea după widget. În general, o etichetă de închidere a elementului care conține
$ before_title: HTML-ul care va fi plasat inainte de titlul widget-ului
$ after_title: HTML-ul precedat de titlul widget-ului
$ WIDGET_ID: ID-ul acelei instanțe speciale a widget-ului. Acesta nu este ID-ul de bază al widget-ului
$ WIDGET_NAME: Numele widget-ului trecut la înregistrarea widget-ului

Dacă ați înregistrat vreodată o bara laterală pentru o temă WordPress, atunci primele opt elemente ale $ args array ar trebui să arate familiar pentru tine. Ultimele două elemente sunt specifice widgetului.

Să extragem $ args și aplicați widget_title filtrați la titlul widgetului:

funcția publică funcțională ($ args, $ instance) extract ($ args); $ title = apply_filters ('widget_title', $ instanță ['title']);

Acum este momentul să pregătiți interogarea pentru a obține o listă de evenimente. Vom folosi WP_Query clasa pentru acest scop împreună cu interogarea meta:

$ query_args = array ('post_type' => 'evenimente', 'posts_per_page' => $ instance ['number_events'], 'post_status' => 'event' -start-date ',' orderby '=>' meta_value_num ',' comanda '=>' ASC '); $ upcoming_events = noua valoare WP_Query ($ query_args);

De vreme ce dorim să sortăm evenimentele în ordine ascendentă după datele lor de început, am setat meta_key la eveniment dată de început valoarea meta a evenimentelor noastre. Odata cu aceasta, am spus WordPress ca comparam numerele aici (nu sirurile de caractere) prin setarea orderby la meta_value_num. Dacă ați setat orderby Doar pentru meta_value, WordPress va face comparația ca și cum ar fi comparat șiruri de caractere și asta nu este ceea ce ne dorim.

Interogarea de mai sus va prelua numărul dat de evenimente în ordine ascendentă cu privire la datele lor de început. Dar, de asemenea, dorim să reflectăm evenimentele care au trecut deja, adică ale lor eveniment-end-data valoarea meta este mai mică decât ștampila actuală. Pentru ca acest lucru să fie realizat, vom transmite o interogare meta care va verifica datele de încheiere:

$ meta_quer_args = array ('relation' => 'ȘI', array ('key' => 'event-end-date', 'value' => time (), 'compare' => '> =')); $ query_args = array ('post_type' => 'evenimente', 'posts_per_page' => $ instance ['number_events'], 'post_status' => 'event' -start-date ',' orderby '=>' meta_value_num ',' comanda '=>' ASC ',' meta_query '=> $ meta_quer_args); $ upcoming_events = noua valoare WP_Query ($ query_args);

În codul de mai sus, am comparat eveniment-end-data valoarea meta să fie mai mare sau egală cu timbrul temporal curent. Acum, doar evenimentele cu ei eveniment-end-data vor fi preluate valorile meta mai mari decât marcajul curent, adică evenimentele viitoare.

Acum că am recuperat evenimentele, să începem să scuipăm conținutul widget-ului nostru:

echo $ before_widget; dacă ($ title) echo $ before_title. titlul $. $ After_title; ?>

„> la
-

"> Vezi toate evenimentele

Codul de mai sus ar trebui să fie explicabil: am reiterat mai întâi conținutul $ before_widget ca o etichetă de deschidere a elementului care conține. Apoi am verificat dacă widgetul are un titlu, dacă da, l-am imprimat în timp ce îl împachetăm $ before_title și $ after_title.

După aceea, am făcut buclă prin evenimentele pe care le-am recuperat - imprimându-le titlurile, fragmente și alte informații cum ar fi datele și locațiile. În final, am adăugat un link către pagina lor de arhivă folosind funcția get_post_type_archive_link () care returnează o permalink la pagina de arhivă a tipului de post dat. Apoi am încheiat widget-ul nostru prin ecou $ after_widget tag-ul de închidere.

Să scriem câteva stiluri de bază pentru widgetul nostru în css / style.css fişier:

.uep_event_entry marginea-jos: 21px;  .eu_event_entry h4 margin-bottom: 3px;  .eu_event_entry h4 a text-decoration: nimic; culoare: moștenire;  .eu_event_entry .event_venue font-size: 0.9; culoare: # 777777; font-weight: normal; font-style: italic;  .uep_event_entry p margin-bottom: 3px! important;  .eu_event_entry.uep_event_date font-size: 0.9; culoare: # 777777;

Acum trebuie să includeți acest fișier pe front-end, dar numai atunci când widget-ul nostru este în prezent activat. Vom verifica dacă widget-ul nostru este în prezent afișat pe front-end utilizând is_active_widget () funcție care acceptă patru argumente și toate acestea sunt opționale:

$ apel invers: Apel invers widget pentru a verifica
$ WIDGET_ID: Widget id. Necesar pentru verificare
$ id_base: ID-ul de bază al widget-ului ca trecut în __construi() metodă
$ skip_inactive: Dacă doriți să săriți widgeturile inactive

Adăugați următorul cod de mai jos uep_admin_script_style () funcția în viitoare-events.php fișier principal plugin:

funcția uep_widget_style () if (is_active_widget (",", "uep_upcoming_events", true)) wp_enqueue_style ("evenimente viitoare", STYLES "upcoming-events.css", false;  add_action ('wp_enqueue_scripts', 'uep_widget_style');

Prin urmare, am verificat mai întâi dacă widgetul este activ în prezent. Dacă da, am introdus foaia de stil folosind wp_enqueue_style () funcţie.

Asta e totul despre widget () metodă. Am creat cu succes un widget care arată o listă de evenimente viitoare împreună cu celelalte informații asociate.

Declanșarea regulilor de rescriere

Aproape am terminat pluginul și widget-ul, dar avem încă o mică problemă - faceți clic pe oricare din titlurile evenimentului și puteți obține o "eroare de pagină care nu a fost găsită". Asta pentru că ori de câte ori înregistrăm un tip post prin plugin, trebuie să ștergem normele de rescriere după activarea pluginului pentru funcționarea corectă a structurii permalink.

S-ar putea să obțineți link-urile dvs. de lucru prin schimbarea structurii permalink, dar asta nu este modul ideal; prin urmare, vom renunța la rescrierea regulilor de fiecare dată când plugin-ul nostru a fost activat.

Adăugați următorul cod în interiorul viitoare-events.php fişier:

funcția uep_activation_callback () uep_custom_post_type (); flush_rewrite_rules ();  register_activation_hook (__FILE__, 'uep_activation_callback');

Așa că am înregistrat cârligul de activare pentru plugin-ul nostru folosind register_activation_hook () funcție care acceptă două argumente:

fișier $: Calea spre fișierul plugin principal
funcţia $: Funcția de apel invers care se execută ori de câte ori plugin-ul este activat

În funcția de apel invers a cârligului nostru, am adăugat mai întâi tipul de evenimente personalizate postate în baza de date utilizând funcția uep_custom_post_type () am definit mai devreme în tutorialul nostru anterior.

Apoi am revărsat regulile de rescriere folosind flush_rewrite_rules () funcţie. Acum, poate doriți să dezactivați plugin-ul și să îl activați înapoi pentru a vă asigura că regulile de rescriere au fost eliminate, făcând acest lucru, legăturile dvs. ar trebui să funcționeze acum și să vă redirecționeze la pagina unică a evenimentului.

Concluzie

Acesta a fost un tutorial destul de lung, în care am scris o mulțime de coduri și ne-am uitat la diferite funcții WordPress. Am creat un widget WordPress de la zero prin extinderea părintelui WP_Widget clasa și a analizat funcțiile membrilor pe care le oferă această clasă pentru a defini funcționalitatea widget-ului nostru. Am scris, de asemenea, o interogare care folosește puterea WP_Query pentru a recupera o listă de evenimente filtrate după valorile lor meta.

Cu aceasta, încheiem și seria noastră cu trei părți. Sper că această serie va ajuta cititorii noi care se află la început cu WordPress și cei care doresc să-și sporească cunoștințele despre pluginul WordPress și dezvoltarea widget-urilor.

Puteți accesa codul complet al pluginului pe pagina mea GitHub și mai jos sunt câteva linkuri pentru explorarea în continuare a temelor abordate în acest tutorial:

WordPress Widgets API
Referință clasă: WP_Query
Masterat WordPress Meta date: o introducere în meta date
Object-Oriented Programming în WordPress: Introducere

Cod