In questo tutorial impareremo come creare un widget personalizzato che restituisca le informazioni sulla tua attività, come il nome ufficiale, l’indirizzo, il numero di telefono e l’e-mail. Ma faremo un ulteriore passo avanti emettendolo con microdati o markup dello schema, che consentirà ai motori di ricerca di comprendere i tuoi contenuti.
I widget sono blocchi dinamici che possono essere inseriti nelle aree disponibili del tuo tema. Di solito il tuo tema dovrebbe avere almeno una barra laterale e una o più aree nel piè di pagina. Avere le informazioni sulla tua attività come widget nel piè di pagina è comune e piuttosto intelligente, poiché il piè di pagina appare su tutte le pagine del tuo sito.
I microdati sono attributi HTML aggiuntivi che spiegano cosa contiene un tag HTML specifico in modo che una macchina possa capire cosa sono (ad esempio nome dell’azienda, numero di telefono, indirizzo dell’azienda, indirizzo e-mail dell’azienda, ecc.). Ciò consente ai motori di ricerca come Google di estrarre informazioni sulla tua attività dal tuo HTML.
Cosa creeremo
Il nostro widget produrrà informazioni utilizzando lo schema di microdati LocalBusiness, perfetto per un’organizzazione o un’azienda. Sta a te decidere quali proprietà desideri produrre, fai semplicemente clic sul collegamento sopra per leggere tutte le possibili proprietà all’interno di LocalBusiness (comprese quelle ereditate). La tua azienda o il tuo paese potrebbero preferire diversi tipi di informazioni.
Il widget di questo tutorial produrrà le seguenti informazioni facoltative:
- Ragione Sociale (Proprietà Microdati:
legalName) - Partita IVA o numero organizzazione (Proprietà Microdati:
vatID) - Indirizzo postale (tag microdati:
PostalAddresscon proprietà perstreetAddress,postalCode, eaddressLocality) - Indirizzo e-mail dell’azienda (Proprietà Microdati:
email) - Numero di telefono (Proprietà Microdati:
telephone)
Questo tutorial non ti guiderà attraverso lo stile del widget, poiché dovrebbe essere abbastanza semplice. In frontend il nostro widget apparirà come un normale widget di testo. Ma ovviamente, sotto il cofano, ha un markup dello schema che aiuta Google.
Le basi della creazione di un widget personalizzato
Puoi inserire il tuo codice nel tuo tema functions.phpo creare un plug-in personalizzato. Ricorda solo che se lo mantieni in un plug-in, perderai il widget quando disattivi il plug-in; e allo stesso modo tenerlo nel tema ti farà perdere il widget se passi a un altro tema. In questo esempio aggiungerò il codice nel file functions.php.
La creazione di un widget viene eseguita con codice PHP orientato agli oggetti. Scrivi una classe PHP che estende la classe widget di WordPress e la inizializzi chiamando register_widget()e fornendo il nome della tua classe. In questo tutorial ho chiamato la mia classe di widget LocalBusiness.
Iniziamo chiamando register_widget()all’interno di una funzione agganciata all’azione widgets_init.
add_action('widgets_init', function() {
register_widget('LocalBusiness');
});Esaminiamo rapidamente lo scheletro di una classe widget personalizzata:
class LocalBusiness extends WP_Widget {
// Initialize your widget in the class constructor
public function __construct() { }
// Responsible for outputting the widget in frontend
public function widget($args, $instance) { }
// Responsible for outputting the widget settings in admin
public function form($instance) { }
// Responsible for saving settings in admin
public function update($new_instance, $old_instance) { }
}Come puoi vedere dall’alto, avrai bisogno di quattro funzioni all’interno della tua classe. Esaminiamo ogni funzione una per una e riempiamole.
Creazione di un widget per i microdati di LocalBusiness
Il punto più logico da cui iniziare è nel costruttore, che è responsabile della configurazione del widget.
La funzione __construct()
All’interno del costruttore è necessario impostare alcune variabili, come il nome del widget, e chiamare la funzione di costruzione del genitore (la classe genitore è quella che estendi; WP_Widget). Maggiori informazioni sulle possibili opzioni nel costruttore qui. Fornirò un ID di base, un titolo e una descrizione, in questo modo:
Puoi fare di più nel __constructmetodo, come accodare gli script o definire più impostazioni del widget. Ma quanto sopra è di solito sufficiente nella maggior parte dei casi.
La funzione form()
Il passaggio successivo è la creazione di tutte le impostazioni e gli input accettati dal widget in admin. Per inviare le impostazioni all’amministratore del widget utilizziamo la funzione form()che ti fornisce un parametro; un array che contiene tutte le opzioni del widget eventualmente salvate. È importante produrre l’impostazione salvata corrispondente in tutti i tuoi input in modo che i dati vengano conservati. (Vedremo come salvare le impostazioni nel passaggio successivo).
C’è molto da tenere traccia nella funzione del modulo, quindi aggiungiamo prima un input, per il nome legale, e assicurati di capire cosa dobbiamo fare:
Prima di tutto il codice sopra emette alcuni wrapper e classi HTML nella forma in cui WordPress emette i moduli dei loro widget: lo facciamo in modo che il modulo abbia un bell’aspetto.
Ci sono due funzioni con cui devi familiarizzare; get_field_id()ed get_field_name()entrambe sono funzioni all’interno WP_Widget(motivo per cui chiami " $this->" davanti – mentre $thissi riferisce all’istanza della classe). Le funzioni restituiscono l’ID e il nome di un campo fornito, rispettivamente, da utilizzare nei tuoi input ide nameattributi. È molto importante per non dimenticare di aggiungere un nameattributo al tuo input, altrimenti non ne otterrai mai il valore durante il salvataggio.
E infine emettiamo il valore salvato corrente in relazione valueal nostro input facendo riferimento all’argomento passato $instance. Senza farlo per il tuo valore, l’input non verrà mai popolato con ciò che è salvato nel database e apparirà ogni volta vuoto, il che può confondere gli utenti.
Se desideri input di moduli diversi, come caselle di controllo o menu a discesa, dovresti essere in grado di aggiungerli facilmente seguendo le regole sopra menzionate. Aggiungiamo il resto delle nostre impostazioni del widget. Sono tutti input di testo, quindi è lo stesso codice ripetuto sopra, tranne i loro ID campo. Il nostro form()metodo finisce per assomigliare a questo:
Se aggiungi il tuo widget in un’area widget disponibile, dovrebbe apparire così:
La funzione update()
La update()funzione è responsabile del salvataggio effettivo dei valori immessi in admin. Sfortunatamente WordPress non lo fa automaticamente per te. In questa funzione sono forniti due parametri; di solito chiamato $new_instancee $old_instance. All’interno del primo parametro, $new_instancetroverai tutti i valori che sono stati inviati, e nel secondo, $old_instancetroverai i valori che sono attualmente salvati nel database. Ciò ti consente di fare alcuni confronti intelligenti, se necessario.
Di solito dovresti semplicemente creare un nuovo array di tutte le impostazioni del tuo widget e salvare tutto ciò che è impostato all’interno $new_instance. Ci occupiamo anche di un po’ di sanificazione. Alla fine restituiamo semplicemente questo array, che dirà a WordPress cosa salvare.
// Responsible for saving settings in admin
public function update($new_instance, $old_instance) {
$instance = [];
$instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';
$instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';
$instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';
$instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';
$instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';
$instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';
$instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';
return $instance;
}Ora puoi testare il tuo widget se lo desideri e verificare che i valori immessi vengano salvati. E se ti ricordi di impostare valuecorrettamente l’attributo in form(), quando salvi e premi Aggiorna, i valori dovrebbero essere mantenuti. Grande! Ora passiamo all’ultimo, e certamente il più divertente, passaggio: produrre il bit del frontend.
La funzione widget()
La widget()funzione è responsabile dell’output del tuo widget nel frontend. Otterremo due argomenti per la funzione; in primo luogo un array con alcune informazioni utili come i wrapper dell’area del widget definiti del tema e, in secondo luogo, i valori di impostazione del widget salvati.
L’output del tuo widget dovrebbe sempre iniziare con l’eco $args['before_widget']e finire sempre con l’eco $args['after_widget']. Questo assicura che il tuo widget venga racchiuso negli stessi wrapper HTML del widget come definito dal tema. Lungo le stesse tracce, puoi fare eco $args['before_title']e $args['after_title']generare involucri HTML corretti attorno al titolo del widget. Non abbiamo un vero titolo del widget di per sé, ma includeremo il nome legale dell’azienda come titolo del widget.
Altrimenti puoi ottenere i tuoi valori salvati facendo riferimento al secondo argomento, $instance, con i nomi delle tue chiavi impostati in form()e update(). È buona norma emettere solo le impostazioni che sono state impostate e ignorare quelle vuote.
Poiché stiamo anche emettendo microdati, dobbiamo aggiungere le proprietà corrispondenti seguendo le regole di schema.org.
Sta a te decidere come vuoi produrre il tuo widget; potresti probabilmente considerare l’aggiunta di più wrapper HTML per uno stile più semplice.
Personalizza l’output, aggiungi un po’ di stile e il gioco è fatto!
Cordiali saluti: il tuo widget riceverà il nome della classe di wrapping " widget_<base ID>" (l’ID di base è quello che hai fornito nel costruttore). Nel nostro caso il nostro widget otterrà la classe " widget_local_business". Questo potrebbe aiutarti ad aggiungere uno stile mirato.
Conclusione e codice finale
In questo tutorial abbiamo imparato come creare un widget personalizzato e come eseguire il rendering di un output formattato in microdati dalle sue impostazioni. Dovresti essere in grado di creare i tuoi widget, seguendo le basi di una classe di widget!
Per riferimento, ecco il codice completo, tutto insieme.