Creare i tuoi propri widget usando varie API di WordPress Introduzione

Cosa starai creando

I widget sono un modo pulito per dare ai proprietari dei siti un certo controllo sull'aspetto (e talvolta sulla funzionalità) dei loro siti WordPress. In questa serie, creeremo una serie di widget WordPress combinando l'API Widget con altre API esterne.

La serie consisterà dei seguenti tutorial:

1. Un introduzione
2. Related Posts Widget
3. Login Widget
4. FAQ Widget
5. Widget Messaggi più popolari con integrazione di Google Analytics
6. Widget indirizzo fisico con integrazione di Google Maps
7. Conclusione

In questo tutorial, ti introdurrò all'API di WordPress Widget creando (ri) un semplice widget di testo. Analizzeremo ed esamineremo le diverse funzioni che compongono il widget in modo da capire come funzionano i widget di WordPress in generale.

Questo widget servirà anche da base su cui svilupperemo la creazione di altri widget nelle parti successive di questa serie.

Widget WordPress

I widget di WordPress aggiungono contenuti e funzionalità alle barre laterali o alle aree di widget del tema. I widget sono progettati per fornire un modo semplice e facile da usare per fornire il design e il controllo strutturale del tema WordPress all'utente senza richiedere che sappiano come codificare.

La maggior parte dei widget WordPress offre opzioni di personalizzazione e opzioni come moduli da compilare, immagini opzionali e altre funzionalità di personalizzazione.

Esaminando la classe dei widget

Il modo più semplice per creare un widget di WordPress è ereditare il WP_Widget classe. In questo modo è possibile utilizzare le funzioni integrate per aggiornare il widget, visualizzare il widget e creare un'interfaccia di amministrazione per il widget.

Per comprendere appieno come funzionano i widget, creeremo ed esamineremo un widget vuoto. Definiremo quindi ogni funzione che compone il widget, quindi vedi come lavorano insieme per creare un widget funzionante.

La nostra definizione di widget

Le funzioni in dettaglio
 
Diamo un'occhiata a ciascuna funzione in modo più dettagliato:
 
__costruire()
 
Questa funzione registra il widget con WordPress 
 
Widget ()
 
Questa funzione è responsabile della visualizzazione front-end del widget. Emette il contenuto del widget
 
aggiornare()
 
Elabora le opzioni del widget al salvataggio. Usa questa funzione per aggiornare il tuo widget (opzione). Questa funzione richiede due parametri:
 
 
 $ new_instance - Valori appena inviati per essere salvati. Questi valori arriveranno dalla forma definita all'interno del metodo form ()
 
 $ old_instance - Valori salvati in precedenza dal database
 
 
Assicurati di disinfettare tutti i valori inviati dall'utente qui. I valori inviati dall'utente devono essere sempre disinfettati prima di essere inviati al database
 
modulo()
 
Il modulo() metodo / funzione viene utilizzato per definire il modulo del widget back-end, che viene visualizzato nel pannello dei widget nel dashboard. Questo modulo consente a un utente di impostare il titolo e altre opzioni per il widget.
 
Questa funzione accetta i seguenti parametri:
 
 $ esempio - Valori salvati in precedenza dal database
Creare il nostro Widget
 
Per creare il nostro widget, seguiremo i seguenti passi:
 
 
Definisci ciò che stiamo creando
 
Registra il nostro widget con WordPress
 
Costruisci il modulo back-end
 
Salva i valori nel database
 
Definire il display front-end
 
Registra il widget
 
 
Cosa stiamo creando?
 
Come accennato in precedenza, stiamo creando un semplice widget di testo che consente a un utente di inserire un titolo e del testo arbitrario che verrà poi stampato nel front-end del sito Web in cui è posizionato il widget.
 
Widget Constructor
 
Il costruttore ci consente di inizializzare il nostro widget sovrascrivendo la classe genitore (standard WP_Widget classe).

 'tutsplustext_widget', 'description' => __ ('Un widget di testo di base per la demo della serie Tutsplus sulla creazione di propri widget.', 'tutsplustextdomain'))); load_plugin_textdomain ('tutsplustextdomain', false, basename (dirname (__FILE__)). '/ languages');  

Nel codice sopra, chiamiamo la funzione di costruzione della classe genitore WP_Widget e gli passiamo gli argomenti ingannevoli:
 
ID base: un identificativo univoco per il widget. Deve essere in minuscolo. Se lasciato vuoto, verrà utilizzata una porzione del nome della classe del widget.
 
Nome - Questo è il nome del widget visualizzato nella pagina di configurazione (nel dashborad).
 
E una matrice (opzionale) contenente un nome di classe e una descrizione. La descrizione è mostrata nella pagina di configurazione (nella dashboard di WordPress).
 
Costruire il modulo back-end
 
Il modulo back-end sarà composto da due campi: un campo titolo e un campo area testo. Ecco uno screenshot del modulo che apparirà nel pannello Widget:


Per generare il modulo precedente, dovremmo iniziare con puro HTML e quindi sostituire alcuni valori di attributo con alcune variabili ed espressioni PHP. Il seguente è il codice HTML per creare i due campi:

 Titolo  
 
 Messaggio semplice Messaggio…  

Per passare da questo al nostro codice finale per la funzione form (), dovremo rendere alcuni degli attributi sopra dinamici - vale a dire, nome, id e l'etichetta per l'attributo (che deve corrispondere all'ID dell'HTML che l'etichetta è per). Sostituiremo anche il valore del campo di testo e il contenuto del campo textarea con i valori dinamici del database se sono già stati salvati.
 
Ecco il codice con cui finiamo:

 
   
 
  <?php echo $message; ?> 
 
Il codice sopra accede e assegna valori precedentemente salvati dal database a due variabili - $ titolo e $ messaggio. Quindi usiamo il esc_attr () per codificare i valori restituiti e per evitare di rompere il nostro codice. Quindi echo l'attributo $ title nell'attributo value del campo di testo e echo $ message come contenuto del campo textarea.
 
Nel codice qui sopra, noterai due metodi che sono probabilmente nuovi per te - get_field_id () e get_field_name ().
 
 
 get_field_id () - Assegna il nome del campo come argomento e costruisce gli attributi id da utilizzare nei campi form (). Assicura che l'ID del campo restituito sia unico
 
 get_field_name () - Assegna il nome del campo come argomento e costruisce gli attributi del nome da utilizzare nei campi form (). Assicura che il nome del campo restituito sia unico.
 
 
I tag dell'etichetta per l'attributo è codificato per echeggiare il valore id degli elementi che etichettano.
 
Il widefat la classe viene utilizzata per garantire che i campi del widget abbiano lo stesso aspetto degli altri campi nel dashboard di WordPress.

Aggiornamento del nostro widget (Opzioni)
 
Per aggiornare il nostro widget, scriveremo il codice appropriato nel metodo di aggiornamento. Ecco il nostro codice:

La funzione sopra riportata richiede due parametri - $ new_instance e $ old_instance
 
 
 $ new_instance è un array contenente le nuove impostazioni (di questa istanza del widget) che sono state appena immesse dall'utente tramite il modulo di backend che definiamo nella funzione form ().
 
 $ old_settings è un array che contiene le vecchie impostazioni. Questi sono i valori che sono attualmente memorizzati nel database.
 
 
La funzione update () restituisce una serie di impostazioni da salvare o false per annullare il salvataggio.
 
Nel codice precedente, assegniamo $ old_instance alla variabile $ instance e sostituiamo il suo titolo e le chiavi del messaggio con valori da $ new_instance. Restituendo l'array nuovo e aggiornato, aggiorniamo in modo efficace le impostazioni dei widget.
 
Il strip_tags () la funzione rimuove i tag HTML e PHP da una stringa che gli viene passata. Includiamo questa funzione per evitare situazioni in cui gli utenti del tuo tema non riescono a chiudere i tag immessi tramite il modulo back-end, con conseguente interruzione del tuo sito (non rendering corretto).
Definire il front-end 
Il Widget () la funzione è responsabile della visualizzazione finale del widget. Ci vogliono due parametri - $ args e $ esempio. 
$ args è una matrice passata alla funzione register_sidebar () quando si definisce la barra laterale / area in cui è posizionato il widget. Questo si trova nel tuo functions.php file. Di seguito è riportato un esempio di a register_sidebar () dichiarazione:
La matrice contiene le definizioni dei tag di apertura e di chiusura per il widget stesso e per il titolo del widget.
 
$ esempio è una matrice contenente le impostazioni per la particolare istanza del widget. Queste impostazioni saranno state recuperate dal database.
 
Facciamo uso dei tag di cui sopra nel codice del widget finale di seguito:

Nel codice precedente, arriviamo finalmente a codificare il front-end del nostro widget. Il nostro widget emette semplicemente un titolo e un messaggio arbitrario (testo). Il codice fa esattamente questo e avvolge il widget stesso e il titolo del widget all'interno di tag di apertura e chiusura definiti in functions.php per l'area specifica del widget (barra laterale) in cui è posizionato il widget.
 
Vi presentiamo il estratto() funzione che alcuni potrebbero non avere familiarità con. Questa funzione accetta un array associativo e restituisce le sue chiavi come variabili. Ci permette di echeggiare $ before_widget invece di $ args ['before_widget'], semplificando così un po 'il nostro codice.
 
L'output finale su un sito Web effettivo sarà simile a questo:
Registrazione del widget
 
Il widget deve essere registrato con WordPress dopo che è stato definito in modo che diventi disponibile nel pannello dei widget del nostro dashboard WordPress.
Il codice finale 
Per semplificare le cose per gli utenti finali dei nostri widget, avvolgeremo il codice del widget in un plug-in di WordPress in modo che sia facile da installare.
 
Questo ci consentirà anche di mantenere tutto il codice che creeremo in tutte le serie in un unico file.
 
Ecco il codice finale:

 'tutsplustext_widget', 'description' => __ ('Un widget di testo di base per la demo della serie Tutsplus sulla creazione di propri widget.', 'tutsplustextdomain'))); load_plugin_textdomain ('tutsplustextdomain', false, basename (dirname (__FILE__)). '/ languages');  / ** * Visualizzazione del front-end del widget. * * @see WP_Widget :: widget () * * @param array $ args Argomenti widget. * @param array $ istanza Valori salvati dal database. * / widget di funzioni pubbliche ($ args, $ istanza) extract ($ args); $ title = apply_filters ('widget_title', $ instance ['title']); $ message = $ istanza ['message']; echo $ before_widget; if ($ title) echo $ before_title. $ titolo. $ After_title;  echo $ message; echo $ after_widget;  / ** * Sanitizza i valori del modulo del widget mentre vengono salvati. * * @see WP_Widget :: update () * * @param array $ new_instance Valori appena inviati per essere salvati. * @param array $ old_instance Valori precedentemente salvati dal database. * * @return array Valori di sicurezza aggiornati da salvare. * / aggiornamento della funzione pubblica ($ new_instance, $ old_instance) $ instance = $ old_instance; $ instance ['title'] = strip_tags ($ new_instance ['title']); $ istanza ['message'] = strip_tags ($ new_instance ['message']); restituire $ istanza;  / ** * Modulo widget back-end. * * @see WP_Widget :: form () * * @param array $ istanza Valori precedentemente salvati dal database. * / forma di funzione pubblica ($ istanza) $ title = esc_attr ($ istanza ['titolo']); $ message = esc_attr ($ istanza ['messaggio']); ?> 
   
 
  <?php echo $message; ?> 
 
Conclusione
 
In questo tutorial, abbiamo introdotto la serie - Creazione dei tuoi widget WordPress usando varie API. Abbiamo analizzato più approfonditamente cosa sono, come funzionano e come crearne uno.
 
Lo scopo di questo tutorial era fornire un'introduzione approfondita all'API dei widget e fornire un widget di base da cui è possibile creare gli altri widget di questa serie.
 
Nella parte successiva della serie, creeremo un widget relativo ai post. Nel frattempo, non esitare a lasciare domande o commenti nel modulo sottostante.





		
			
	   
	




Codice