Creazione di eventi futuri Plugin in WordPress creazione del widget

Nell'ultima parte della serie, abbiamo esaminato la registrazione di un tipo di post personalizzato per gli eventi. Abbiamo personalizzato il dashboard aggiungendo un metabox personalizzato e alcuni metadati personalizzati per l'immissione dei dati degli eventi. Per semplificare l'inserimento delle date da parte dell'utente, abbiamo incorporato nel dashboard anche il controllo datepicker dell'interfaccia utente jQuery. 

Mentre WordPress mostra solo il titolo e la colonna della data per il tipo di post personalizzato nella schermata di amministrazione, abbiamo aggiunto le nostre colonne personalizzate per mostrare la data di inizio dell'evento, la data di fine e la sede dell'evento. In questo modo, abbiamo completato la maggior parte del nostro plug-in eventi in arrivo.

Nella parte finale di questa serie, dovremo:

• guarda l'API dei widget di WordPress
• registra un widget per mostrare un elenco di eventi imminenti
• interrogare il database per gli eventi imminenti utilizzando la classe WP_Query
• crea una meta query per confrontare le date in modo che vengano visualizzati solo gli eventi futuri

Facciamo un tuffo come stiamo andando attraverso il processo di costruzione di un widget di WordPress da zero.

API di WordPress Widget

Possiamo pensare ai widget come blocchi di codice pensati per aggiungere determinate funzionalità a un sito. Questo potrebbe essere qualsiasi cosa da un calendario, pulsanti di condivisione sociale, un sistema di valutazione o un dispositivo di scorrimento testimonial. Un utente può facilmente aggiungerli o rimuoverli dal sito semplicemente trascinandoli.

I widget WordPress possono essere creati estendendo il WP_Widget classe che fornisce WordPress. Questa classe contiene i metodi e le proprietà necessari per far funzionare un widget. Ciò include le funzioni per inizializzare un widget, mostrare l'interfaccia utente nell'amministratore, aggiornare le diverse istanze, salvare le nuove impostazioni nel database e visualizzarle sul font-end.

Estenderemo quattro funzioni dalla classe base per definire la funzionalità del nostro widget:

1. __costruire()
2. modulo()
3. aggiornare()
4. Widget ()

Diamo una panoramica a ciascuno di essi:

__costruire()

Il __costruire() il metodo inizializza il widget. Imposta il nome del widget, l'ID di base e altre informazioni come la descrizione e la classe del widget, ecc.

modulo()

Questa è la funzione che emette il modulo delle impostazioni nel dashboard. Il modulo può includere campi per varie opzioni per personalizzare l'aspetto e la funzionalità del widget sul front-end. Il modulo() metodo accetta un argomento per l'istanza del widget.

aggiornare()

Questo metodo si assicura che il widget venga aggiornato ogni volta che viene applicata una nuova impostazione a un'istanza del widget. Accetta due argomenti: uno per la vecchia istanza e uno per la nuova istanza del widget.

Widget ()

Questo metodo restituisce il contenuto del widget al front-end del sito. È qui che definiamo cosa si intende per essere visto dagli utenti quando visitano il sito. Questo metodo accetta due argomenti:

1. $ widget_args: Questo è un array che contiene le informazioni necessarie sul widget
2. $ esempio: L'istanza del widget da mostrare

Daremo un'occhiata più da vicino a questi metodi e ai loro argomenti in un po 'di tempo. Per ora, registriamo la nostra classe di widget.

Registrazione del widget

Nella cartella principale del plugin, crea una nuova directory chiamata inc per include. In quella directory, crea un file chiamato widget di-prossima-events.php. Scriveremo tutto il codice del nostro widget in questo file per mantenere le cose pulite e gestibili.

Inizieremo estendendo la classe del widget genitore in questo modo:

Per registrare il widget, useremo il register_widget () funzione in congiunzione con il widgets_init gancio:
 
function uep_register_widget () register_widget ('Upcoming_Events');  add_action ('widgets_init', 'uep_register_widget');
Il register_widget () la funzione accetta il nome della classe estesa come argomento.
 
Dentro il Prossimi eventi classe, definiremo i nostri quattro metodi su quelli che abbiamo visto nella sezione precedente:
 
Nel prossimo passaggio, scriveremo il codice per ognuno di essi e daremo uno sguardo più da vicino su come funzionano. Ma prima, aggiungi la seguente riga di codice alla fine di imminente-events.php file di plugin principale per includere il widget:
 
include ('inc / widget-upcoming-events.php');
Il __costruire() Metodo
 
Se hai uno sfondo in OOP allora sai certamente quali sono i costruttori. Per i principianti, i costruttori sono funzioni speciali di una classe che vengono chiamate automaticamente quando viene istanziato un oggetto di quella classe. 
Dato che abbiamo una classe per un widget, abbiamo bisogno di una funzione che imposta alcune cose come l'id e il nome del widget ogni volta che il widget viene istanziato ed è qui che __costruire() il metodo entra in gioco.
 
Il __costruire() il metodo della classe genitore accetta tre argomenti:
 
 
 $ base_id: L'ID univoco per il widget
 
 $ titolo: Il titolo del widget nell'area di amministrazione. Dovrebbe essere contrassegnato per la traduzione
 
 $ widget_ops: Un array contenente altre opzioni del widget come la classe del widget e la descrizione del widget ecc
 
 
Ora che sappiamo cosa __costruire() fa e quali argomenti accetta, scriviamo il codice per questo:
funzione pubblica __construct () $ widget_ops = array ('class' => 'uep_upcoming_events', 'description' => __ ('Un widget per visualizzare un elenco di eventi imminenti', 'uep')); genitore :: __ costrutto ('uep_upcoming_events', // base id __ ('Prossimi eventi', 'uep'), // title $ widget_ops); 
Nel __costruire() metodo del nostro widget, abbiamo fatto una chiamata al __costruire() metodo della classe genitore indicato da parent :: __ construct () e ha passato tre argomenti per le opzioni base id, titolo e widget. Si noti inoltre che le stringhe sono contrassegnate per la traduzione utilizzando il __ () funzione.
Il modulo() Metodo
 
Il modulo() metodo è dove definiamo il corpo del nostro widget che verrà mostrato nell'amministratore di WordPress. Accetta un argomento $ esempio per l'istanza del widget.
 
Dobbiamo fornire all'utente un campo di testo per inserire il titolo del widget. Inoltre, lui o lei dovrebbe essere in grado di scegliere tra il numero di eventi che desidera mostrare sul sito. Ma questi campi dovrebbero anche avere alcuni valori di default nel caso in cui l'utente non voglia inserire i propri.
 
Innanzitutto, definiremo i valori predefiniti per i nostri campi:
$ widget_defaults = array ('title' => 'Prossimi eventi', 'number_events' => 5); $ istanza = wp_parse_args ((array) $ istanza, $ widget_defaults);

Abbiamo definito le nostre impostazioni predefinite in un array con le chiavi come nomi di campi. Abbiamo quindi usato il wp_parse_args () funzione di utilità che unisce una serie di argomenti (nel nostro caso - $ esempio) con una serie di valori predefiniti (in questo caso - $ widget_defaults). Si noti inoltre che abbiamo typecast il $ esempio come una matrice.
 
È tempo di rendere i campi modulo per il titolo e il numero di eventi. Iniziamo creando un campo di testo per il titolo:
   

Prima di tutto, abbiamo creato un paragrafo come elemento contenitore (anche se potevi altrettanto facilmente come usato a div). Quindi abbiamo creato un'etichetta per il campo di input. Non abbiamo bisogno di dargli un ID manualmente come WordPress si prenderà cura di esso da solo. Ci fornisce alcune funzioni di utilità per lavorare meglio con i nomi dei campi e gli ID. Genererà un ID univoco e un nome per ogni campo nel modulo ogni volta che creeremo un'istanza del widget, consentendoci così di creare tante istanze dello stesso widget.
 
Il metodo utilizzato per generare l'ID del campo è get_field_id () preceduto da a $ This->, che è un modo per dire che questo metodo appartiene alla stessa classe. Questo metodo è già definito nella base WP_Widget classe e dal momento che abbiamo esteso con la nostra classe, diventa prontamente disponibile. Il metodo accetta un argomento per il campo per il quale stiamo generando un id.
 
Abbiamo contrassegnato il testo dell'etichetta per la traduzione utilizzando il _E () funzione.
 
Il prossimo metodo che abbiamo usato è get_field_name () che funziona allo stesso modo di get_field_id () tranne che genera un valore per l'attributo name del campo.
 
La classe widefat abbiamo dato al campo di input è una classe di WordPress predefinita che disegna i campi di input nell'amministratore di WordPress.
 
Quindi per l'attributo value del campo di input, abbiamo semplicemente echeggiato il contenuto di $ Esempio [ 'title'] mentre lo passa attraverso il esc_attr () funzione per codificare eventuali caratteri indesiderati.
 
Per il menu a discesa Seleziona per specificare il numero di eventi da mostrare, aggiungere il seguente codice nel modulo() metodo:
    >   

Il codice è praticamente lo stesso del codice per il campo del titolo, tranne per il fatto che abbiamo eseguito un ciclo per la creazione dei tag di opzione. Per verificare se un'opzione è attualmente selezionata, abbiamo utilizzato un'altra funzione di utilità di WordPress selezionato() che confronta due valori dati (in questo caso - $ i e $ esempio [ 'number_events']) e quindi aggiunge il selezionato attributo all'attuale tag opzione se i valori sono uguali.
 
Questo è tutto per il modulo() metodo. Ora dobbiamo assicurarci che il nostro widget venga aggiornato ogni volta che viene applicato un nuovo cambiamento.
 
Il aggiornare() Metodo
 
Il aggiornare() metodo lo rende così che siamo in grado di aggiornare i valori che un widget gestisce. Accetta due argomenti $ old_instance e $ new_instance e restituisce l'istanza aggiornata del widget. 
Il codice è abbastanza semplice:
aggiornamento della funzione pubblica ($ new_instance, $ old_instance) $ instance = $ old_instance; $ instance ['title'] = $ new_instance ['title']; $ instance ['number_events'] = $ new_instance ['number_events']; restituire $ istanza; 

Quindi ogni volta che viene apportata una modifica a un'istanza del widget da parte dell'utente, il aggiornare() metodo aggiornerà le impostazioni nel database mantenendo così il widget aggiornato con nuove impostazioni.
 
Il Widget () Metodo
 
Questo è il metodo più importante di tutti in quanto visualizza il contenuto previsto sul front-end del sito. Accetta due argomenti $ args e $ esempio. Il $ args la matrice contiene i seguenti elementi:
 
 
 nome $: Il nome della barra laterale in cui viene visualizzato il widget
 
 $ id: L'id della barra laterale rispettata
 
 $ descrizione: La descrizione della barra laterale
 
 $ classe: La classe della barra laterale
 
 $ before_widget: L'HTML che verrebbe prima del widget. Potrebbe essere un tag di apertura dell'elemento contenitore
 
 $ after_widget: L'HTML che verrà dopo il widget. Generalmente un tag di chiusura dell'elemento contenitore
 
 $ before_title: L'HTML che verrà inserito prima del titolo del widget
 
 $ after_title: HTML preceduto dal titolo del widget
 
 $ WIDGET_ID: L'id di quella particolare istanza del widget. Questo NON è l'ID base del widget
 
 $ WIDGET_NAME: Il nome del widget passato durante la registrazione del widget
 
 
Se hai mai registrato una barra laterale per un tema WordPress, allora i primi otto elementi del $ args la matrice dovrebbe sembrarti familiare. Gli ultimi due elementi sono specifici del widget.
 
Estraiamo il $ args array e applicare il widget_title filtra per il titolo del widget:
widget di funzioni pubbliche ($ args, $ istanza) extract ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); 

Ora è il momento di preparare la query per recuperare un elenco di eventi. Useremo il WP_Query classe per questo scopo insieme alla meta query:
$ query_args = array ('post_type' => 'evento', 'posts_per_page' => $ istanza ['number_events'], 'post_status' => 'pubblica', 'ignore_sticky_posts' => true, 'meta_key' => 'evento -start-date ',' orderby '=>' meta_value_num ',' order '=>' ASC '); $ prossimi_events = new WP_Query ($ query_args);
Dal momento che vogliamo ordinare i nostri eventi in ordine crescente in base alle date di inizio, abbiamo impostato il meta_key al evento-start-date meta valore dei nostri eventi. Insieme a questo, abbiamo detto a WordPress che stiamo confrontando i numeri qui (non le stringhe) impostando il ordinato da a meta_value_num. Se si imposta ordinato da solo per meta_value, il WordPress farà il confronto come se stesse confrontando le stringhe e non è quello che vogliamo.
 
La query sopra riportata recupererà il numero specificato di eventi in ordine crescente rispetto alle date di inizio. Ma vogliamo anche escludere eventi che hanno già superato i loro evento-end-date il valore meta è inferiore al timestamp corrente. Perché ciò avvenga, passeremo una meta query che controllerà le loro date di fine:
$ meta_quer_args = array ('relation' => 'AND', array ('chiave' => 'event-end-date', 'value' => time (), 'compare' => '> =')); $ query_args = array ('post_type' => 'evento', 'posts_per_page' => $ istanza ['number_events'], 'post_status' => 'pubblica', 'ignore_sticky_posts' => true, 'meta_key' => 'evento -start-date ',' orderby '=>' meta_value_num ',' order '=>' ASC ',' meta_query '=> $ meta_quer_args); $ prossimi_events = new WP_Query ($ query_args);

Nel codice sopra, abbiamo confrontato il evento-end-date meta value deve essere maggiore o uguale al timestamp corrente. Ora, solo gli eventi con i loro evento-end-date meta valori maggiori rispetto al timestamp corrente, cioè gli eventi imminenti in futuro verranno recuperati.
 
Ora che abbiamo recuperato gli eventi, iniziamo a sputare il contenuto del nostro widget:
echo $ before_widget; if ($ title) echo $ before_title. $ titolo. $ After_title; ?> 
 have_posts ()): $ upcoming_events-> the_post (); $ event_start_date = get_post_meta (get_the_ID (), 'event-start-date', true); $ event_end_date = get_post_meta (get_the_ID (), 'event-end-date', true); $ event_venue = get_post_meta (get_the_ID (), 'event-venue', true); ?> 
 
"> a 
   -  
  
 "> Visualizza tutti gli eventi 
Il codice sopra dovrebbe essere auto-esplicativo: per prima cosa abbiamo fatto eco al contenuto di $ before_widget come tag di apertura dell'elemento contenitore. Quindi abbiamo controllato se il widget ha un titolo, se è così, lo abbiamo stampato mentre lo avvolgevamo $ before_title e $ after_title. 
Successivamente, abbiamo analizzato gli eventi che avevamo recuperato, stampandone titoli, estratti e altre informazioni come date e luoghi. Alla fine, abbiamo aggiunto un link alla loro pagina di archivio usando la funzione get_post_type_archive_link () che restituisce un permalink alla pagina di archivio del tipo di post specificato. Abbiamo quindi concluso il nostro widget facendo eco a $ after_widget tag di chiusura.
Scriviamo alcuni stili di base per il nostro widget in css / style.css file:
.uep_event_entry margin-bottom: 21px;  .uep_event_entry h4 margin-bottom: 3px;  .uep_event_entry h4 a text-decoration: none; colore: ereditario;  .uep_event_entry .event_venue font-size: 0.9em; color: # 777777; font-weight: normal; stile di carattere: corsivo;  .uep_event_entry p margin-bottom: 3px! important;  .uep_event_entry .uep_event_date font-size: 0.9em; color: # 777777; 

Ora dobbiamo includere questo file sul front-end, ma solo quando il nostro widget è attualmente attivato. Verificheremo se il nostro widget è attualmente visualizzato sul front-end utilizzando il is_active_widget () funzione che accetta quattro argomenti e tutti sono opzionali:
 
 $ callback: Il callback del widget da verificare
 
 $ WIDGET_ID: ID widget. Necessario per il controllo
 
 $ id_base: L'ID base del widget passato nel __costruire() metodo
 
 $ skip_inactive: Se saltare i widget inattivi
 
Aggiungi il seguente codice sotto il uep_admin_script_style () funzione nel imminente-events.php file plugin principale:
function uep_widget_style () if (is_active_widget (",", 'uep_upcoming_events', true)) wp_enqueue_style ('prossimi-events', STYLES. 'immin-events.css', false, '1.0', 'all');  add_action ('wp_enqueue_scripts', 'uep_widget_style');

Quindi abbiamo prima verificato se il widget è attualmente attivo. Se è così, abbiamo accodato il foglio di stile usando il wp_enqueue_style () funzione.
Questo è tutto per il Widget () metodo. Abbiamo creato con successo un widget che mostra un elenco di eventi imminenti insieme alle altre informazioni associate.
Flushing Rewrite Rules
 
Abbiamo quasi completato il nostro plug-in e il widget, ma abbiamo ancora un piccolo problema: fai clic su qualsiasi titolo dell'evento e potresti ottenere un "errore non trovato nella pagina". Questo perché ogni volta che registriamo un tipo di post tramite plugin, abbiamo bisogno di svuotare le regole di riscrittura all'attivazione del plugin per il corretto funzionamento della struttura permalink. 
Potresti far funzionare i tuoi link cambiando la struttura del permalink ma non è il modo ideale; pertanto, svuoteremo le regole di riscrittura ogni volta che il nostro plugin è stato attivato.
 
Aggiungi il seguente codice all'interno del tuo imminente-events.php file:
function uep_activation_callback () uep_custom_post_type (); flush_rewrite_rules ();  register_activation_hook (__FILE__, 'uep_activation_callback');

Quindi abbiamo registrato il hook di attivazione per il nostro plugin usando il register_activation_hook () funzione che accetta due argomenti:
 
 $ file: Il percorso del file del plugin principale
 
 $ funzione: La funzione di callback deve essere eseguita ogni volta che viene attivato il plug-in
 
 Nella funzione di callback del nostro hook, abbiamo prima aggiunto il tipo di evento personalizzato nel database usando la funzione uep_custom_post_type () avevamo definito in precedenza nel nostro tutorial precedente. 
Abbiamo quindi svuotato le regole di riscrittura usando il flush_rewrite_rules () funzione. Ora potresti voler disattivare il plug-in e attivarlo nuovamente per assicurarti che le regole di riscrittura siano state svuotate, facendo così, i tuoi link dovrebbero ora funzionare bene e reindirizzarti alla singola pagina dell'evento.
 
Conclusione
 
Questo è stato un altro lungo tutorial in cui abbiamo scritto un sacco di codice e guardato varie funzioni di WordPress. Abbiamo creato un widget WordPress da zero estendendo il genitore WP_Widget classe e ha esaminato le funzioni membro che questa classe fornisce per definire la funzionalità del nostro widget. Abbiamo anche scritto una query sfruttando il potere di WP_Query classe per recuperare un elenco di eventi filtrati dai loro meta-valori.
 
Con questo, concludiamo anche le nostre serie in tre parti. Spero che questa serie possa aiutare i nuovi lettori che sono appena agli inizi con WordPress e anche coloro che desiderano migliorare la propria conoscenza del plugin per WordPress e dello sviluppo di widget..
 
Puoi accedere al codice completo del plugin sulla mia pagina GitHub e di seguito sono riportati alcuni link per approfondire gli argomenti trattati in questo tutorial:
 
 API di WordPress Widget
 
Riferimento di classe: WP_Query
 
Conoscenza dei metadati di WordPress: un'introduzione ai metadati
 
 Programmazione orientata agli oggetti in WordPress: un'introduzione
 





		
			
	   
	




Codice