Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Widgets
Code

Creazione di Widget per WordPress Attraverso L'Utilizzo di Varie API: Introduzione

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Angelo Isw (you can also view the original English article)

Final product image
What You'll Be Creating

I widget di wordpress sono uno strumento comodo ed elegante per controllare particolari aspetti grafici e funzionali del nostro sito. In questa serie di articoli, andremo a creare alcuni widget combinando le Widgets API con altre API esterne.

La serie è composta dai seguenti tutorial:

  1. Una introduzione
  2. Widget per post correlati
  3. Widget per il login
  4. Widget per le FAQ
  5. Widget per i post più popolari con l'integrazione di Google Analytics
  6. Widget per l'inserimento dell'indirizzo fisico e l'integrazione di google maps.
  7. Conclusioni

In questo tutorial, introduciamo le API per i Widget di Wordpress creando un semplice widget di testo. Andremo a dissezionare ed esaminare le differenti funzioni che permettono al widget di funzionare, in modo da capire il suo funzionamento generale.

Questo widget ci servirà poi come base per la creazione degli altri widget nei prossimi tutorial

I Widget di Wordpress

I widget di wordpress permettono, in modo semplificato, di aggiungere contenuti e nuove funzionalità alla sidebar o ad altre zone predisposte del sito. L'utente dovrà essere in grado di modificare il tema di Wordpress senza utilizzare alcuna conoscenza in ambito di programmazione.

La maggior parte dei widget di Wordpress offre un certo grado di personalizzazione attraverso l'utilizzo di un form da completare in cui inserire del testo, immagini facoltative o altre opzioni.

Esame della Classe per i Widget

Il modo più semplice di creare un widget di Wordpress consiste nell'estendere la classe WP_Widget. In questo modo abbiamo a disposizione una serie di metodi della classe che servono ad esempio per mostrare il contenuto del widget oppure per la creazione dell'interfaccia di amministrazione.

Per capire appieno il funzionamento dei widget, creiamo ed esaminiamo un widget vuoto. In seguito definiamo ogni singolo metodo e come funziona nel contesto generale del widget.

Definizione di un Widget

I metodi di WP_Widget

Vediamo ora i metodi di WP_Widget nel dettaglio:

__construct()

Il metodo costruttore inizializza il widget all'interno di Wordpress

widget()

Questo metodo è responsabile di ciò che viene visualizzato nel frontend. Genera l'output del contenuto del widget.

update()

Processa le opzioni del widget durante il salvataggio del form. Usiamo questa funzione per effettuare l'aggiornamento del widget. A questo metodo passiamo due parametri:

  1. $new_instance – Valori inviati per essere salvati. Questi valori provengono dal form definito nel metodo form().
  2. $old_instance – Valori precedentemente salvati nel database.

Bisogna assicurarsi che tutti i dati inseriti dagli utenti siano validati prima di essere immessi nel database.

form()

Il metodo form() è usato per definire il form del widget che troviamo nella sezione aspetto/widget del backend di wordpress.

Il metodo riceve il seguente parametro:

  • $instance – Contiene i valori correnti, precedentemente salvati nel database.

Creazione del widget

Per creare il nostro widget seguiremo i seguenti passaggi:

  • Descrizione delle funzionalità del widget
  • Inizializzazione del widget
  • Crezione del form per le opzioni
  • Salvataggio dei valori inseriti nel database
  • Definizione di ciò che apparirà nel tema
  • Registrazione del widget

Funzionalità del widget

Come abbiamo detto in precedenza, dobbiamo creare un semplice widget di testo che permette all'utente di inserire un titolo e un blocco di testo. Questi compariranno come output nel front-end, nel punto del tema in cui il widget è stato posizionato.

Il costruttore del widget

Il costruttore ci permette di inizializzare il nostro widget sovrascrivendo la classe principale WP_Widget.

Nel codice di sopra, modifichiamo il costruttore della classe WP_Widget e passiamo i seguenti argomenti:

  • Base ID - Un identificatore unico per il widget. Deve essere in lettere minuscole. Se lasciato vuoto viene utilizzata una porzione del nome della classe che stiamo creando.
  • Name - Questo è il nome del widget mostrato nella pagina di configurazione (nella bacheca di wordpress)
  • Un array opzionale contenente il nome di una classe e una descrizione. La descrizione appare nella pagina di configurazione (nella bacheca).

Creare il Form delle opzioni

Il form delle opzioni consiste in due campi - un campo per il titolo e un'area di testo (textarea). Ecco una schermata del form così come appare nel pannello dei widget:

Our widgets back-end configuration form

Come metodo per generare il codice del form possiamo partire con una struttura in html puro e in un secondo momento sostituire alcuni attributi con espressioni o variabili php:

Per passare da questo codice a quello finale, che utilizzeremo all'interno di form(), dobbiamo rendere dinamici alcuni attributi, e precisamente: name, id e l'attributo for del tag label (il quale deve corrispondere con l'id dell'elemento html a cui il tag label è associato). Inoltre è necessario sostituire il contenuto del campo textarea con il valore corrente se presente nel database.

Ecco il codice finale:

Nel codice sopra riportato accediamo ai valori precedentemente salvati nel database e li assegnamo a due variabili – $title e $message. Quindi usiamo la funzione wordpress esc_attr() per effettuare l'escape degli attributi ed evitare che eventuali caratteri indesiderati compromettano il codice. In seguito stampiamo il contenuto di $title come attributo value dell'input di testo e $message come contenuto della textarea.

Possiamo anche notare l'utilizzo di due metodi particolari che probabilmente ci sono nuovi – get_field_id() e get_field_name().

  • get_field_id() – Accetta il nome del campo come argomento e genera gli "id" da utilizzare nel form. Si assicura che l'id restituito sia unico.
  • get_field_name() – Accetta il nome del campo come argomento e genera gli attributi "name" da utilizzare nei campi del form. Si assicura che il valore restituito sia unico.

L'attributo for del tag label contiene l'id dell'elemento (input o textarea) corrispondente.

La classe widefat è stata utilizzata per uniformare l'aspetto del nostro widget con gli altri elementi della dashboard.

Aggiornamento delle opzioni del Widget

Per aggiornare il widget è necessario intervenire sul metodo update(). Ecco il codice:

Il metodo update() accetta due parametri: – $new_instance e $old_instance

  • $new_instance array che contiene le nuove impostazioni che sono state appena inserite dall'utente nel back-end, attraverso il form definito con form().
  • $old_settings array con le vecchie impostazioni. Contiene i valori correnti presenti nel database.

Il metodo update() restituisce un array con le impostazioni da salvare oppure 'false' per annullare il salvataggio.

Nel codice di cui sopra, assegnamo $old_instance alla variabile $instance e sostituiamo i nuovi valori corrispondenti alle chiavi 'title' e 'message' dell'array, con quelli presenti in $new_instance. Restituendo il nuovo array aggiornato, di fatto stiamo aggiornando le impostazioni del widget.

La funzione strip_tags() rimuove i tag html e php dalle stringhe che passiamo come parametro. Utilizziamo questa funzione per evitare che eventuali tag inseriti nel form interferiscano con il codice generato, che quindi non sarebbe reso correttamente.

Definire Il Front-End

Il metodo widget() è responsabile dei contenuti che vengono visualizzati nel sito. Accetta due parametri – $args e $instance.

$args è un array passato alla funzione register_sidebar() nel momento in cui definiamo la sidebar o altra regione che ospiterà il widget. Troviamo questo codice nel file functions.php. Di seguito un esempio di dichiarazione di register_sidebar()

Sample register_widget declaration

L'array contiene la definizione del titolo del widget e dei tag di apertura e chiusura.

$instance è un array contenente le impostazioni correnti del widget. Queste informazioni dovranno essere recuperate dal database.

Vediamo come appare il codice definitivo del metodo widget():

Questo blocco di codice rappresenta il punto in cui viene creato l'html finale del widget. Nel nostro caso verranno visualizzati semplicemente un titolo e del testo. Il contenuto del widget sarà inserito all'interno dei tag di apertura e chiusura definiti nel file functions.php per la specifica sidebar o area del widget.

Spieghiamo la funzione extract() in quanto non tutti sono familiari con il suo utilizzo. La funzione riceve un array associativo e restituisce una serie di variabili che hanno il nome delle chiavi dell'array. Quindi possiamo fare riferimento direttamente a $before_widget invece che a $args['before_widget'], questo al fine di semplificare un po' il nostro codice.

Il risultato finale, in un sito reale, sarà qualcosa simile a questo:

Our text widget on an actual site

Registrazione del Widget

Una volta che il widget è stato definito, ci ramane da effettuare la registrazione su Wordpress. In questo modo il widget sarà disponibile nel pannello dei widget nella bacheca di wordpress.

Il Codice Completo

Per facilitare l'utilizzo e l'installazione del widget da parte degli utenti finali, inseriamo in nostro widget all'interno di un plugin.

Questo ci permette anche organizzare meglio, in un unico file, il codice che andremo a creare in questa serie di articoli.

Ecco il codice completo:

Conclusione

In questo tutorial, abbiamo introdotto la serie – Creazione di Widget per wordpress attraverso l'utilizzo di varie API. Abbiamo visto nel dettaglio cosa sono i widget, come funzionano e come crearne uno.

Lo scopo di questo tutorial è quello di fornire un'introduzione scrupolosa alle Widget API e fornire una base che ci permetterà di creare gli altri widget della serie.

Nel prossimo tutorial creeremo un widget per la gestione dei post correlati. Nel frattempo potete lasciare un commento o fare una domanda nel form qui sotto.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.