Creazione di un widget del timer per il conto alla rovescia

Tutti noi amiamo una celebrazione, e ora che la Pasqua è finita, non vediamo l'ora che arrivi la prossima occasione. Quanto è lontana la prossima occasione che ti piace celebrare? Qualunque cosa possa essere, costruiamo un plugin per widget per aggiungere un timer per il conto alla rovescia alla nostra barra laterale che mostra quanto tempo ci resta da aspettare.

1. Ottenere un vantaggio

Ci sono un certo numero di cose che dobbiamo fare ogni volta che stiamo sviluppando un plugin per WordPress e, ancora più specificamente, un widget. Grazie a uno dei nostri autori qui su Wptuts +, Tom McFarlin, possiamo iniziare rapidamente utilizzando il Boiler di WordPress Widget.

Per utilizzare WordPress Widget Boilerplate, scaricarlo, decomprimerlo e spostare la directory widget di-boilerplate nel tuo / Wp-content / plugins / directory. Quindi rinominalo wptuts-countdowner.

All'interno di quella directory troverai il principale file PHP, plugin.php, a cui rinomineremo anche wptuts-countdowner.php.

Ora siamo pronti per entrare nel codice.

2. Ri-Badging the Boilerplate

Dentro il wptuts-countdowner.php il file è tutto il lavoro pesante fatto per noi dal piano di riscaldamento. Per cominciare, abbiamo solo bisogno di personalizzarlo per riflettere il nome del nostro plugin. Quindi, una volta che abbiamo scritto il nostro codice, possiamo anche eliminare i bit extra del boilerplate che potrebbero non essere necessari.

Le informazioni dell'intestazione del plugin appariranno come segue:

  
Quindi aggiustalo con i dettagli del nostro plugin:
 
  
Dovremo anche modificare alcuni riferimenti in tutto il codice dello standard per modificare i riferimenti generici per utilizzare il nostro nome di plugin. La maggior parte dei luoghi in cui dovrai farlo sono indicati con unFARE'.
 
Trova e sostituisci 'widget di-nome' con 'wptuts-countdowner', e anche 'WIDGET_NAME' con 'Wptuts_Countdowner'. Ora il plugin ha il suo nome!
 
Ora hai un plugin che puoi attivare nel tuo WordPress Dashboard. Una volta attivato, quando guardi in Aspetto -> Widget, vedrai gli inizi del nostro widget:
  
 
Come puoi vedere, al momento sembra piuttosto generico. Quindi aggiorna il seguente codice:
 
 // TODO: aggiornare classname e description // TODO: sostituire 'wptuts-countdowner-locale' per essere nominato più specifico del plugin. Altre istanze esistono anche nel codice. genitore :: __ costrutto ('wptuts-countdowner-id', __ ('Widget Name', 'wptuts-countdowner-locale'), array ('classname' => 'wptuts-countdowner-class', 'description' => __ ('Breve descrizione del widget va qui.', 'Wptuts-countdowner-locale')));
 
Per riflettere il nome e la descrizione del nostro widget:
 
 // TODO: aggiornare classname e description // TODO: sostituire 'wptuts-countdowner-locale' per essere nominato più specifico del plugin. Altre istanze esistono anche nel codice. genitore :: __ costrutto ('wptuts-countdowner-id', __ ('Wptuts + Countdowner', 'wptuts-countdowner-locale'), array ('classname' => 'wptuts-countdowner-class', 'description' => __ ("Un widget per visualizzare un conto alla rovescia nella barra laterale del tuo sito.", "Wptuts-countdowner-locale")));
 
Ora abbiamo questo:
  
 
 
 3. Raccogli informazioni dall'utente
 
Il nostro widget avrà bisogno di un nome e una data per l'evento per il conto alla rovescia (o su).
 
Quindi, dobbiamo creare un modulo da utilizzare quando il nostro widget viene aggiunto a una barra laterale per la configurazione. Il WordPress Widget Boilerplate separa la parte HTML in vista file per una separazione piacevole e pulita delle preoccupazioni. Imposteremo le nostre variabili nel metodo e quindi il modulo stesso nella visualizzazione admin.
 
Ecco il metodo. Le modifiche per il nostro plugin sono indicate con i punti salienti.
 
 / ** * Genera il modulo di amministrazione per il widget. * * @param array instance La matrice di chiavi e valori per il widget. * / forma di funzione pubblica ($ istanza) // TODO: definisce i valori predefiniti per le variabili $ istanza = wp_parse_args ((array) $ istanza); // TODO: memorizza i valori del widget nella propria variabile if (! Empty ($ istanza ['evento'])) $ event = $ istanza ['evento'];  else $ event = __ ('Nome evento', 'wptuts-countdowner-locale');  if (! empty ($ istanza ['event_date'])) $ event_date = $ istanza ['event_date'];  else $ event_date = date ('Y-m-d');  // Visualizza il modulo di amministrazione include (plugin_dir_path (__ FILE__). '/Views/admin.php');  // forma finale
 
Noterai alla fine del metodo, c'è un includere per la vista Quindi apriti /wp-content/plugins/wptuts-countdowner/views/admin.php. Aggiungi il seguente codice in quel file:
 
 
   
 
   
 
Ora puoi aggiornare il Dashboard di WordPress e aggiungere il widget alla barra laterale, che sarà simile a questo:
  
 
Purtroppo, qualunque cosa tu abbia inserito in quei campi non salverà ancora, quindi dobbiamo modificare il file aggiornare metodo come segue:
 
 / ** * Elabora le opzioni del widget da salvare. * * @param array new_instance L'istanza precedente di valori prima dell'aggiornamento. * @param array old_instance La nuova istanza di valori da generare tramite l'aggiornamento. * / aggiornamento della funzione pubblica ($ new_instance, $ old_instance) $ instance = $ old_instance; // TODO: Qui è dove si aggiornano i vecchi valori del widget con i nuovi valori in entrata $ istanza ['evento'] = strip_tags ($ new_instance ['evento']); $ instance ['event_date'] = strip_tags ($ new_instance ['event_date']); restituire $ istanza;  // fine widget
 
Ora abbiamo un amministratore di widget di lavoro! Puoi trascinare il widget nella barra laterale e salvare i dettagli per un evento, ad esempio Natale:
  
 
 
 4. Mostra sul front-end
 
Ora abbiamo i dettagli dell'evento per il conto alla rovescia, mostriamolo nella parte frontale del sito nella barra laterale.
 
 / ** * Emette il contenuto del widget. * * @param array args La matrice di elementi del form * @param array instance L'istanza corrente del widget * / widget di funzione pubblica ($ args, $ instance) extract ($ args, EXTR_SKIP); echo $ before_widget; // TODO: Qui è dove si manipolano i valori del widget in base ai loro campi di input $ event = apply_filters ('wptuts_countdowner_event', $ instance ['event']); $ event_date = apply_filters ('wptuts_countdowner_event_date', $ instance ['event_date']); include (plugin_dir_path (__FILE__). '/views/widget.php'); echo $ after_widget;  // fine widget
 
Come con il modulo di amministrazione, stiamo utilizzando un vista anche per il front-end, per mantenere separato l'HTML. Apri il tuo /wp-content/plugins/wptuts-countdowner/views/widget.php file e aggiungere quanto segue:
 
  
 
 5. Giorni di conteggio
 
Quindi abbiamo ora un evento e una data / ora, ma questo non ci dà un conto alla rovescia. Abbiamo bisogno di aggiungere un po 'di codice per determinare quanti giorni tra la data del nostro evento e la data di oggi. Poiché la nostra data potrebbe essere nel passato o nel futuro, dovremo anche aggiungere una parola suffisso per indicare quale.
 
Ecco il codice che aggiungiamo alla parte anteriore del widget:
 
 / ** * Emette il contenuto del widget. * * @param array args La matrice di elementi del form * @param array instance L'istanza corrente del widget * / widget di funzione pubblica ($ args, $ instance) extract ($ args, EXTR_SKIP); echo $ before_widget; // TODO: Qui è dove si manipolano i valori del widget in base ai loro campi di input $ event = apply_filters ('wptuts_countdowner_event', $ instance ['event']); $ event_date = apply_filters ('wptuts_countdowner_event_date', $ instance ['event_date']); $ event_date_seconds = date ('U', strtotime ($ event_date)); $ today_date_seconds = date ('U'); $ event_date = human_time_diff ($ event_date_seconds); $ suffix = ($ event_date_seconds> $ today_date_seconds? 'away': 'fa'); include (plugin_dir_path (__FILE__). '/views/widget.php'); echo $ after_widget;  // fine widget
 
Quello che stiamo facendo è ottenere il timestamp attuale in secondi per l'evento e per oggi. Otteniamo quindi la versione leggibile dall'uomo (es. 267 giorni). Lavoriamo anche, a seconda che la data dell'evento sia nel passato o nel futuro, quale parola suffisso usare.
 
Ora abbiamo una parola suffisso, faremmo meglio ad aggiungerla alla vista:
 
  
Ora abbiamo qualcosa che sembra un po 'più rispettabile e ha un po' più senso.
  
 
 
 6. Scegli una data
 
È un po 'brutto dover digitare manualmente una data, quindi aggiungiamo in jQuery UI Datepicker, visto che è incluso in WordPress.
 
Una cosa che non è inclusa però è il CSS per il selezionatore di date. Quindi prendi la directory dei file e delle immagini CSS dal repository UI jQuery di Helen Hou-Sandi su GitHub e inseriscili nel tuo / Wp-content / plugins / wptuts-countdowner / css / elenco.
 
Quindi abbiamo bisogno di ottenere WordPress per caricarli modificando il boilerplate register_admin_scripts e register_admin_styles metodi, in questo modo:
 
register_admin_scripts
 
 / ** * Registra e accoda JavaScript specifico dell'amministratore. * / public function register_admin_scripts () wp_enqueue_script ('jquery-ui-datepicker'); // TODO: modifica "wptuts-countdowner" al nome del tuo plugin wp_enqueue_script ("wptuts-countdowner-admin-script", plugins_url ("wptuts-countdowner / js / admin.js"));  // fine register_admin_scripts
 
register_admin_styles
 
 / ** * Registra e accoda stili specifici dell'amministratore. * / public function register_admin_styles () // TODO: Cambia 'wptuts-countdowner' con il nome del tuo plugin wp_enqueue_style ('wp-admin-jquery-ui', plugins_url ('wptuts-countdowner / css / jquery-ui-fresh .css ')); wp_enqueue_style ('wptuts-countdowner-admin-styles', plugins_url ('wptuts-countdowner / css / admin.css'));  // termina register_admin_styles
 
Infine, aggiungi il tuo codice jQuery nel file di testo admin.js file per agganciare il datapicker al campo.
 
 (function ($) "use strict"; $ (function () // Inserisci il tuo JavaScript specifico per l'amministrazione qui jQuery ('. wptuts-event-date'). datepicker (dateFormat: 'yy-mm-dd' );); (jQuery));
 
 
 7. Pulizia
 
Il file contiene alcune cose che non abbiamo usato in questo plugin, quindi sarebbe una buona idea alleggerire il carico e rimuoverlo. Gli extra sono questi file:
 
 
/css/admin.css
 
/css/widget.css
 
/js/widget.js
 
 
E questi metodi nel wptuts-countdowner.php file:
 
 
attivare
 
disattivare
 
register_widget_scripts
 
register_widget_styles
 
Anche linea wp_enqueue_style ('wptuts-countdowner-admin-styles', plugins_url ('wptuts-countdowner / css / admin.css')); dal register_admin_styles metodo
 
 
 
Conclusione
 
Ecco qua! Un plugin WordPress basato sul Widget Boilerplate che ti permette di mostrare quanti giorni fino a (o da) un evento.
 
Spero che tu l'abbia trovato utile, per favore condividi i tuoi pensieri nei commenti qui sotto.



		
			
	   
	




Codice