Construirea unui widget de cronometru

Cu toții ne place o sărbătoare, iar acum, când se termină Paștile, așteptăm cu nerăbdare următoarea ocazie. Cât de departe este următoarea ocazie pe care doriți să o sărbătoriți? Orice ar fi, să construim un plugin widget pentru a adăuga un cronometru invers la bara noastră laterală, care arată cât timp am rămas să așteptăm.

1. Obținerea unui început

Există o serie de lucruri pe care trebuie să le facem de fiecare dată când dezvoltăm un plugin WordPress și, mai exact, un widget. Mulțumită unuia dintre autorii noștri de la Wptuts +, Tom McFarlin, putem începe rapid folosind WordPress Widget Boilerplate.

Pentru a utiliza Boilerplate Widget-ul WordPress, descărcați-l, dezarhivați-l și mutați directorul widget-boilerplate în tine / Wp-content / plugins / director. Apoi redenumiți-o wptuts-countdowner.

În interiorul directorului veți găsi fișierul principal PHP, plugin.php, la care vom redenumi și noi wptuts-countdowner.php.

Acum suntem gata să intrăm în cod.

2. Re-Badging placă de boiler

În interiorul wptuts-countdowner.php fișierul este tot de ridicare grele făcut pentru noi de către placa de boiler. În primul rând, trebuie doar să-l personalizăm pentru a reflecta numele pluginului nostru. Apoi, după ce ne-am scris propriul cod, putem șterge, de asemenea, bucățile suplimentare ale panoului de bord, de care nu avem nevoie.

Informațiile din antetul pluginului vor arăta astfel:

Așa că rezolvați detaliile pluginului nostru:

De asemenea, va trebui să modificăm câteva referințe pe întregul cod de boilerplate pentru a modifica referințele generice pentru a folosi numele pluginului nostru. Cele mai multe dintre locurile unde veți avea nevoie să faceți acest lucru sunt indicate printr-A FACE'.

Găsiți și înlocuiți "widget-name' cu 'wptuts-countdowner', Si deasemenea 'WIDGET_NAME' cu 'Wptuts_Countdowner“. Acum plugin-ul are propriul nume!

Acum aveți un plugin pe care îl puteți activa în tabloul de bord WordPress. Odată activat, atunci când priviți sub Aspect -> Widgeturi, veți vedea începutul widget-ului nostru:

După cum puteți vedea, pare destul de generic în acest moment. Actualizați următorul cod:

 // TODO: actualizare nume de clasă și descriere // TODO: înlocuiți 'wptuts-countdowner-locale' pentru a fi denumit mai mult plugin specific. Alte instanțe există în întregul cod. părinte :: __ construct ('wptuts-countdowner-id', __ ('Widget Name', 'wptuts-countdowner-locale'), array ('classname' => 'wptuts-countdowner-class', 'description' => __ ("Descrierea scurtă a widget-ului merge aici", "wptuts-countdowner-locale")));

Pentru a reflecta numele și descrierea widget-ului nostru:

 // TODO: actualizare nume de clasă și descriere // TODO: înlocuiți 'wptuts-countdowner-locale' pentru a fi denumit mai mult plugin specific. Alte instanțe există în întregul cod. părinte :: __ construct ('wptuts-countdowner-id', __ ('Wptuts + Countdowner', 'wptuts-countdowner-locale'), array ('classname' => ("Un widget pentru afișarea unui cronometru invers în bara laterală a site-ului dvs.", "wptuts-countdowner-locale")));

Acum avem acest lucru:

3. Colectați informații de la utilizator

Widgetul nostru va avea nevoie de un nume și data pentru ca evenimentul să poată conta pe (sau până) la.

Deci, trebuie să creați un formular care să fie utilizat atunci când widgetul nostru este adăugat la o bara laterală pentru configurare. WordPress Widget Boilerplate separă porțiunea HTML în vedere dosare pentru o separare plăcută și curată a preocupărilor. Vom configura variabilele noastre în metodă și apoi forma în sine în vizualizarea admin.

Iată metoda. Modificările pentru plugin-ul nostru sunt indicate cu evidențiere.

 / ** * generează formularul de administrare pentru widget. * * @ param array instanță Gama de chei și valori pentru widget. * / forma funcției publice (instanță $) // TODO: Definiți valorile implicite pentru variabilele $ instance = wp_parse_args ((array) $ instance); // TODO: Stocați valorile widgetului în propria lor variabilă dacă (! Empty ($ instance ['event'])) $ $ event = $ instanță ['event'];  altceva $ event = __ ("Nume eveniment", "wptuts-countdowner-locale");  dacă ! empty ($ instanță ['event_date'])) $ event_date = $ instanță ['event_date'];  altceva $ event_date = data ('Y-m-d');  // Afișați formularul de administrare include (plugin_dir_path (__ FILE__). /Views/admin.php ');  // forma finală

Veți observa la sfârșitul metodei, există o include pentru vizualizare. Deci, deschide-te /wp-content/plugins/wptuts-countdowner/views/admin.php. Adăugați următorul cod în fișierul respectiv:

   ">  "tip =" text "valoare =""/>

Acum puteți să actualizați tabloul de bord WordPress și să adăugați widgetul în bara laterală, care va arăta astfel:

Din păcate, orice ai pune în acele domenii nu va fi salvat încă, așa că trebuie să modificăm Actualizați după cum urmează:

 / ** * Procesează opțiunile widget-ului pentru a fi salvate. * * @param array new_instance Încă o instanță de valori înainte de actualizare. * @param matrix old_instance Noul exemplu de valori care trebuie generat prin actualizare. * / actualizarea funcției publice ($ new_instance, $ old_instance) $ instance = $ old_instance; // TODO: Aici actualizați valorile vechi ale widgetului cu valorile noi, primite $ instance ['event'] = strip_tags ($ new_instance ['event']); $ instanță ['event_date'] = strip_tags ($ new_instance ['event_date']); returnați $ instanță;  // widget de sfârșit

Acum avem un admin widget de lucru! Puteți să glisați widgetul în bara laterală și să salvați detaliile pentru un eveniment, cum ar fi Crăciunul:

4. Afișarea pe Front End

Acum avem detalii despre eveniment pentru timpul de numărătoare inversă, să-l arătăm în partea din față a site-ului în bara laterală.

 / ** * Afișează conținutul widget-ului. * * @param array args Matricea elementelor formate * @param array instance Exemplu curent al widgetului * / widget functie publica ($ args, $ instance) extract ($ args, EXTR_SKIP); echo $ before_widget; // TODO: Aici manipulezi valorile widgetului pe baza câmpurilor de intrare $ event = apply_filters ('wptuts_countdowner_event', $ instance ['event']); $ event_date = apply_filters ('wptuts_countdowner_event_date', $ instanță ['event_date']); include (plugin_dir_path (__FILE__). /views/widget.php '); echo $ after_widget;  // widget de sfârșit

Ca și în formularul de administrare, folosim a vedere și pentru partea din față, pentru a păstra separat codul HTML. Deschide-ți /wp-content/plugins/wptuts-countdowner/views/widget.php fișier și adăugați următoarele:

5. Zile de numărare

Deci, avem un eveniment și o afișare dată / dată acum, dar asta nu ne face o numărătoare inversă. Trebuie să adăugăm câte un cod pentru a determina numărul de zile între data evenimentului și data de astăzi. Deoarece data noastră ar putea fi în trecut sau în viitor, va trebui să adăugăm și un cuvânt sufix pentru a indica ce.

Iată codul pe care îl adăugăm la partea frontală a widget-ului:

 / ** * Afișează conținutul widget-ului. * * @param array args Matricea elementelor formate * @param array instance Exemplu curent al widgetului * / widget functie publica ($ args, $ instance) extract ($ args, EXTR_SKIP); echo $ before_widget; // TODO: Aici manipulezi valorile widgetului pe baza câmpurilor de intrare $ event = apply_filters ('wptuts_countdowner_event', $ instance ['event']); $ event_date = apply_filters ('wptuts_countdowner_event_date', $ instanță ['event_date']); $ event_date_seconds = data ('U', strtotime ($ event_date)); $ today_date_seconds = data ('U'); $ event_date = fișier uman_time_diff ($ event_date_seconds); $ sufix = ($ event_date_seconds> $ astăzi_date_seconds? 'departe': 'în urmă'); include (plugin_dir_path (__FILE__). /views/widget.php '); echo $ after_widget;  // widget de sfârșit

Ceea ce facem acolo este obtinerea timbruului curent in cateva secunde pentru eveniment, si pentru ziua de azi. Apoi, obținem versiunea care poate fi citită de oameni (adică. 267 de zile). De asemenea, lucrăm, pe baza faptului dacă data evenimentului este în trecut sau în viitor, care sugerează cuvântul de utilizat.

Acum avem un cuvânt sufix, mai bine să îl adăugăm la vedere:

Acum avem ceva care pare mai respectabil și are mai mult sens.

6. Alegeți o dată

Este puțin urât să trebuiască să tastați manual o dată, deci să adăugăm jQuery UI Datepicker, văzând cum este inclus în WordPress.

Un lucru care nu este inclus, este CSS pentru selectorul de date. Prindeți astfel directorul de fișiere și imagini CSS din depozitul UI de la Helen Hou-Sandi, JQuery UI pe GitHub și puneți-le în / Wp-content / plugins / wptuts-countdowner / css / director.

Apoi, trebuie să luăm WordPress pentru a le încărca modificând placa de bază register_admin_scripts și register_admin_styles metode, cum ar fi:

`register_admin_scripts`

 / ** * Înregistrează și încalcă JavaScript specific pentru admin. * / funcția publică register_admin_scripts () wp_enqueue_script ('jquery-ui-datepicker'); // TODO: Schimbați "wptuts-countdowner" în numele pluginului wp_enqueue_script ('wptuts-countdowner-admin-script', plugins_url ('wptuts-countdowner / js / admin.js'));  // end register_admin_scripts

`register_admin_styles`

 / ** * Înregistrează și încalcă stilurile specifice administratorului. * / funcția publică register_admin_styles () // TODO: Schimbați "wptuts-countdowner" în numele pluginului dvs. wp_enqueue_style ('wp-admin-jquery-ui', plugins_url ('wptuts-countdowner / css / jquery-ui-fresh .css ')); wp_enqueue_style ('wptuts-countdowner-admin-stiluri', plugins_url ('wptuts-countdowner / css / admin.css'));  // end register_admin_styles

În cele din urmă, adăugați codul jQuery în placa de bord admin.js fișier pentru a fixa selectorul de date până la câmp.

 (functie ($) "foloseste stricta"; $ (function () // Plasati JavaScript specific pentru administrare aici jQuery ('.wptuts-event-date' );); (jQuery));

7. Curățarea

Boilerplate conține câteva lucruri pe care nu le-am folosit în acest plugin, așadar ar fi o idee bună să ușurați încărcătura și să le eliminați. Extrasurile sunt următoarele fișiere:

/css/admin.css
/css/widget.css
/js/widget.js

Și aceste metode în wptuts-countdowner.php fişier:

Activati
dezactivați
register_widget_scripts
register_widget_styles
De asemenea, linia wp_enqueue_style ('wptuts-countdowner-admin-stiluri', plugins_url ('wptuts-countdowner / css / admin.css')); de la register_admin_styles metodă

Concluzie

Acolo îl ai! Un plugin WordPress bazat pe widgetul Boilerplate care vă permite să afișați câte zile până la (sau din) un eveniment.

Sper că ați găsit-o utilă, vă rugăm să vă împărtășiți gândurile în comentariile de mai jos.

Cod