Guida Completa ai Widget di WordPress: Come Usarli, Aggiungerli e Implementarli per Personalizzare il Vostro Sito

I widget di WordPress sono incredibilmente utili. Vi permettono di aggiungere ogni tipo di contenuto extra al vostro sito web al di fuori del corpo dell’articolo o della pagina stessa, incoraggiando gli utenti a ottenere informazioni, a seguire i link o a compiere altre azioni.

In questo post vi mostrerò tutto quello che dovete sapere sui widget di WordPress. Come aggiungerli al vostro sito, come creare aree widget in cui inserirli, come installare plugin che ve ne forniscano di più, come codificare i vostri widget e molto altro ancora.

Per prima cosa, iniziamo a identificare cosa si intende per widget WordPress.

Cosa Sono i Widget WordPress?

In WordPress, i widget sono snippet di contenuti che vivono al di fuori del flusso della pagina o del contenuto dei post.

I widget contengono informazioni, elementi di navigazione o media separati da un singolo post o pagina. Nella maggior parte dei casi, ogni widget viene visualizzato su ogni pagina del sito, ma è anche possibile registrare aree di widget per pagine specifiche come la homepage.

Per aggiungere un widget al vostro sito, è necessario aggiungerlo a un’area widget. Le aree widget sono create dal vostro tema perché si riferiscono al design e al layout del vostro sito e non alla funzionalità.

La maggior parte dei temi di WordPress hanno aree widget nella barra laterale e nel footer, anche se alcuni avranno più aree di widget in diversi posti, ad esempio sotto o sopra il contenuto o nell’intestazione.

La schermata qui sotto, presa da uno dei miei siti, mostra i widget nella barra laterale e nel footer.

WordPress include già una serie di widget precaricati che si possono utilizzare senza dover installare alcun plugin o scrivere codice. Ma è anche possibile aggiungere molti altri widget installando plugin o programmando il proprio.

Questi possono coprire una vasta gamma di tipi di contenuti, come i media, i feed dei social media, la navigazione, la ricerca, le mappe e molto altro ancora. Sono davvero poche le cose che vorreste vedere sul vostro sito e per le quali non si riesca a trovare un widget. In realtà, la sfida più grande è spesso scegliere tra tutte le opzioni e non esagerare.

Quando Usare i Widget WordPress

Dovreste usare un widget ogni volta che volete aggiungere contenuti extra ad una o più pagine del vostro sito (e quando dico pagina, includo post, archivi ecc.), ma questi non fanno parte del contenuto di quella pagina. Sono particolarmente utili per i contenuti che volete mostrare in ogni pagina del sito, come ad esempio un elenco dei vostroi ultimi post, un carrello della spesa, o un pulsante di call to action.

Pensate a quanti utenti avranno bisogno di accedere a ciascun widget e a quanto sia importante la posizione in cui lo volete mettere. I widget nella barra laterale saranno più prominenti di quelli nel footer, che alcuni utenti potrebbero anche non vedere.

Quindi un widget per i post più recenti o un widget per la call to action potrebbe vedersi meglio nella barra laterale, dove le persone hanno più possibilità di interagire, mentre un feed dei social media potrebbe andare tranquillamento nel footer.

Se il vostro tema ha anche aree di widget speciali per la homepage, potreste volerli utilizzare per la navigazione nelle varie sezioni del vostro sito, per gli elenchi di contenuti rilevanti o in formato media come un video di benvenuto al sito.

11 Esempi di Widget in WordPress

Il modo migliore per comprendere le possibilità offerte dai widget di WordPress è quello di vedere alcuni esempi. Diamo un’occhiata a undici tipi di widget che vedrete spesso sui siti WordPress.

1. Recent Posts

Il widget Recent Posts è forse il più usato nei blog.

Permette di visualizzare un elenco dei vostri post più recenti nella barra laterale o nel footer di ogni pagina del vostro sito, aumentando la possibilità che la gente navighi nel sito e legga un certo numero di post.

Il widget Recent Posts è preinstallato in WordPress. Permette di impostare il numero di articoli che desiderate mostrare e l’intestazione da dare al widget.

Se desiderate aggiungere funzionalità extra, potete installare un plugin per un widget alternativo come WordPress Popular Posts, che visualizza i contenuti più popolari. In alternativa, il widget Advanced Random Posts si aggiorna ogni volta che l’utente visita una nuova schermata.

2. Recent Comments

Volete mostrare ai visitatori quanto sia vivace il vostro sito e quanto il vostro pubblico interagisca con i vostri contenuti?

Il widget Recent Comments (commenti recenti) mostra gli ultimi commenti sul vostro sito, dando ai visitatori l’opportunità di navigare direttamente verso quei commenti e partecipare alla discussione.

Il widget Recent Comments è già incluso in WordPress. Anche in questo caso, se desiderate aggiungere funzionalità aggiuntive potete installare un plugin per i commenti di terze parti, come il widget WP Social Comments, che consente alle persone di commentare utilizzando il proprio account Facebook: ottimo per l’engagement sui social media.

3. Call To Action

Un grande uso di un widget è quello di incoraggiare le persone a effettuare un’azione sulla pagina, e lo si può fare grazie a un widget “call to action”.

Il vostro widget può essere un semplice pulsante, oppure potete creare qualcosa di più personalizzato utilizzando un widget di testo o un widget HTML, o anche un widget immagine: tutti sono preinstallati su WordPress.

Su uno dei miei siti ho creato un widget call to action che incoraggia le persone ad iscriversi alla mia mailing list. Questo usa il widget HTML integrato in cui ho incluso un’immagine, del testo e un pulsante che ho codificato in HTML.

4. Widget di Navigazione

Potete anche usare i widget per incoraggiare le persone a navigare nel vostro sito.

Ci sono alcune opzioni per questo: i widget Categories, il widget Tag Cloud e il Navigation Menu.

Il widget Navigation Menu consente di creare un menu di navigazione personalizzato e il menu di navigazione principale del vostro sito, per poi aggiungerlo a un’area del widget.

Potete anche aggiungere il vostro menu di navigazione principale a un’area di widget, anche se questo funzionerà solo se avete un piccolo menu di navigazione.

L’aggiunta di un menu di navigazione nel footer del vostro sito incoraggerà le persone che raggiungono la fine di un post a navigare nel vostro sito. È particolarmente utile per gli utenti di telefonia mobile che potrebbero dover scorrere molto per tornare al menu di navigazione principale dopo aver raggiunto la fine di un post.

In alternativa, è possibile utilizzare il widget integrato Categories per visualizzare un elenco delle categorie del vostro sito, oppure il widget Tag Cloud per facilitare l’accesso agli archivi dei tag.

5. Media

L’aggiunta di media alla vostra barra laterale o al vostro footer darà vita al vostro sito e agli utenti qualcosa da guardare o con cui interagire.

Potete usare il widget integrato Image per visualizzare qualsiasi immagine nella vostra barra laterale o nel vostro footer, trasformando anche quell’immagine in un link.

In alternativa, il widget Video vi permette di trasmettere video in streaming da YouTube o Vimeo direttamente nell’area widget del vostro sito. Questo è particolarmente utile se il vostro sito dispone di aree widget speciali per la homepage, ma può anche essere utile nel footer per attirare l’attenzione delle persone quando arrivano alla fine di un post.

6. Social Media

Se volete coinvolgere le persone che visitano il vostro sito web tramite i social media, aggiungendo il vostro feed dei social media alla barra laterale o al footer del vostro sito, mostrerete alle persone che siete attivi sui social media e le incoraggerete a mettere un like o a seguirvi.

Un modo per accedere ai widget dei social media per le più grandi piattaforme (Facebook, Twitter, Instagram) è installare il plugin Jetpack, che include tutti questi e molti altri.

In alternativa, tutte le piattaforme dei social media hanno i propri plugin, disponibili gratuitamente tramite la directory dei plugin. È anche possibile trovare plugin di terze parti che consentono di personalizzare il modo in cui si visualizza il feed dei social media.

7. Carrello

Se state gestendo un negozio di ecommerce sul vostro sito usando un plugin come WooCommerce, è una buona idea includere un widget per il carrello in modo che gli utenti possano facilmente navigare verso il loro carrello ovunque si trovino nel negozio.

Potreste inserirlo nella barra laterale dove le persone potranno facilmente vederlo, o nell’intestazione per una maggiore visibilità, sempre che il vostro tema includa un’area widget.

I plugin di ecommerce come WooCommerce includono i widget del carrello della spesa e altri widget di ecommerce come parte del plugin: una volta che avete aggiunto l’ecommerce al vostro sito, li troverete automaticamente aggiunti alla schermata Widgets.

8. Widget di Contatto

Se volete che le persone vi contattino, facciano domande o si iscrivano a una mailing list, potete aggiungere un modulo di contatto alla vostra barra laterale.

Non c’è un widget per i moduli incluso in WordPress, ma potete usare dei plugin per questo, come Contact Form 7 gratuito o i Gravity Forms premium (che sono molto più potenti).

9. Widget Mappa

Se la vostra azienda ha sede in un luogo fisico e volete che le persone siano in grado di trovarvi facilmente, l’aggiunta di un widget per le mappe al vostro sito vi aiuterà.

Ci sono diversi plugin gratuiti per i widget di Google Maps che potete utilizzare, come WP Google Maps.

In alternativa, se non volete installare un plugin, potete prendere il codice embed da Google Maps e aggiungerlo a un widget HTML.

10. Widget di Accesso

Se state gestendo un sito di affiliazione, un widget per il login farà sì che le persone accedano al vostro sito senza dover andare in una pagina di login separata.

Il Meta widget che viene fornito con WordPress include un link di login, ma anche altre cose che potreste non volere, quindi vi consiglio di usare un plugin separato per questo, scaricandolo dalla directory dei plugin.

Il widget Login with Ajax include un modulo di login nel vostro widget, il che significa che le persone possono accedere al vostro sito da qualsiasi pagina.

11. Widget di Ricerca

Un widget davvero semplice ma incredibilmente utile è il widget di ricerca, già precaricato su WordPress.

Aggiungetelo alla vostra barra laterale o all’intestazione e renderete più facile per le persone trovare le cose sul vostro sito.

Se volete aumentare la potenza del vostro widget di ricerca, potete installare il widget gratuito WP Google Search, che utilizza la ricerca Google.

Come Aggiungere Widget al Vostro Sito WordPress

Una volta deciso di che tipo di widget avete bisogno per il vostro sito WordPress, è il momento di installarli.

Non siate tentati di aggiungerne troppi. Più ce ne sono, meno è probabile che gli utenti li notino. Concentratevi invece su due o tre widget chiave per la barra laterale. Potete aggiungerne altri nel footer, dove sono comunque meno importanti.

E se avete delle aree widget extra nel vostro tema, decidete quali widget inserire. Assicuratevi che si adattino al layout e al design del vostro sito.

Ci sono tre modi per aggiungere widget:

• Utilizzare i widget già presenti in WordPress.
• Aggiungere un widget di terze parti dalla directory dei plugin.
• Acquistare un plugin premium che include un widget.

Trovare i Widget Per il Vostro Sito WordPress

C’è una vasta gamma di widget disponibili, per cui può essere difficile scegliere quale installare. Diamo un’occhiata alle opzioni e poi esaminiamo come potreste scegliere quella migliore per voi.

Widget Preinstallati in WordPress

Se uno dei widget preinstallati fa ciò di cui avete bisogno, allora usatelo. Non solo vi farà risparmiare tempo ma ridurrà anche il codice in esecuzione sul vostro sito.

I widget preinstallati sono:

• Archivi: link agli archivi per mese, pensato per i blog ma ormai un po’ datato.
• Calendario: un calendario dei vostri post, anche in questo caso adatto ai blog (ma non così comune di questi tempi).
• HTML personalizzato: il massimo della flessibilità, aggiungete qualsiasi contenuto digitando o incollando nell’HTML (come i moduli di Google). Evitatelo se non siete a vostro agio con la codifica.
• Immagine: visualizza un’immagine della vostra libreria media.
• Menu di navigazione: mostra il menu di navigazione principale o un menu separato da voi creato.
• Commenti recenti: un elenco di commenti recenti con i relativi link.
• Tag Cloud: un elenco di tag in formato cloud, con link ai relativi archivi.
• Video: inserimento di un video da YouTube o da qualsiasi altro servizio di streaming.
• Audio: per incorporare un podcast, un lettore audio, una canzone o altri clip audio (Lettura suggerita: come avviare un podcast utilizzando WordPress).
• Categorie: un elenco delle categorie del vostro blog, con link alle pagine dell’archivio.
• Galleria: più avanzata del widget delle immagini, visualizza una galleria di immagini.
• Meta: metadati come link di login e feed RSS. Una sbornia dei primi tempi di WordPress ora non più molto utile.
• Pagine: mostra un elenco delle pagine del vostro sito con i link.
• Messaggi recenti: mostra un elenco dei vostri messaggi più recenti per incoraggiare le persone a leggerli.
• Ricerca: una semplice casella di ricerca.
• Testo: qualsiasi testo che vi serva aggiungere, come ad esempio informazioni sul sito.

Aggiunta di Widget Con un Plugin

La directory dei plugin di WordPress contiene migliaia di plugin gratuiti per i widget che amplieranno la vostra scelta.

Oltre a questo, molti altri plugin includono anche widget; pensate a certi plugin per l’ecommerce che forniscono un widget per il carrello e altre funzionalità.

Se nella directory dei plugin non trovate quello di cui avete bisogno, potreste decidere di installare un plugin premium. A volte questi offriranno più funzioni o un’interfaccia più intuitiva. Altre volte troverete le stesse caratteristiche in un plugin gratuito, quindi fate una buona ricerca nella directory dei plugin prima di optare per la soluzione a pagamento.

Come Trovare il Widget Giusto per il Vostro Sito

Per trovare il widget WordPress adatto a voi, seguite questi consigli:

1. Identificate esattamente ciò che vi serve dal widget. Quali funzionalità deve avere e come volete che sia? Deve essere collegato ad API di terze parti?
2. Controllate i widget integrati per vedere se ce n’è uno che soddisfi le vostre esigenze. Provatene uno qualsiasi: se ne trovate uno adatto, è fantastico, in caso contrario…
3. Controllate la directory dei plugin, alla quale potete accedere tramite Plugins > Add New. Provate a cercare più di un termine per trovare il plugin giusto per voi, e cercate con e senza la parola ‘widget’. A volte un plugin che non è focalizzato sui widget includerà comunque un widget come parte di un insieme più ampio di funzionalità.
4. Se non riuscite a trovare nulla di adatto tra i plugin gratuiti, cercate un plugin premium. Chiedete consigli ad altri utenti WordPress e guardate le recensioni prima di sceglierne uno.

Qualunque sia il widget che sceglierete, dovetei testarlo per verificare che funzioni come volete. Se state acquistando un plugin premium, vi consiglio di acquistarne uno con garanzia di rimborso o un periodo di prova gratuito nel caso in cui non sia adatto a voi.

Come Aggiungere Widget alla Barra Laterale e al Footer in WordPress

Ora che avete scelto il vostro widget, è il momento di aggiungerlo al vostro sito.

Potete aggiungere widget a qualsiasi area widget attiva fornita dal vostro tema. Se il vostro tema non ha un’area widget nella posizione desiderata, provate a cercare un tema alternativo.

Più avanti in questo post vi mostrerò come codificare la vostra area widget.

Ci sono due modi per aggiungere widget al vostro sito:

• Utilizzando il Customizer. Andate su Appearance > Customizer > Widget nel menu di amministrazione, o Customize > Widget dalla barra di amministrazione nella parte superiore dello schermo.
• Tramite la schermata di amministrazione dei widget. Andate su Appearance > Widget nel menu di amministrazione, o dalla barra di amministrazione, fate clic su Customize > Widgets.

Vi mostrerò a breve come usare entrambi i metodi, ma prima di tutto diamo un’occhiata alle aree dei widget e a come vengono inclusi nel tema.

I Widget Non Sono Solo Per la Sidebar

A seconda del tema di WordPress che state usando, potreste trovare aree di widget in posizioni diverse.

La maggior parte dei temi hanno aree widget nella barra laterale e nel piè di pagina. Ma alcuni li hanno anche in altri posti, come sotto o sopra il contenuto o nell’intestazione.

Se andate alla schermata delle impostazioni dei widget nell’amministrazione di WordPress, potrete vedere tutte le aree dei widget nel vostro tema.

Io uso un tema con più aree di widget. Potete vedere nella schermata sottostante che ci sono aree di widget sopra e sotto il contenuto, nell’intestazione, sotto il footer principale.

Se desiderate aggiungere widget in altri luoghi del sito, ha senso trovare un tema che abbia più aree di widget. Il modo migliore per farlo è quello di utilizzare un tema framework.

Un buon esempio di un widget in un punto del vostro tema che non è la barra laterale o il footer è quello di aggiungere una barra di ricerca nell’intestazione come ho fatto su uno dei miei siti web.

Aree e Temi del Widget

Le aree del widget sono codificate nei file dei template dei temi, così come il file delle funzioni dei temi.

Qui potete vedere il codice che ho usato nel mio file delle funzioni del tema per aggiungere un’area di widget che andrà nell’intestazione.

register_sidebar( array(
 'name' => __( 'In Header Widget Area', 'rmccollin' ),
 'id' => 'in-header-widget-area',
 'description' => __( 'A widget area located to the right hand side of the header, next to the site title and description.', 'rmccollin' ),
 'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h3 class="widget-title">',
 'after_title' => '</h3>',
) );

Ed ecco il codice nel mio file header.php che aggiunge quell’area di widget al posto giusto nel tema.

if ( is_active_sidebar( 'in-header-widget-area' ) ) { ?>

 <aside class="in-header widget-area right" role="complementary">
  <?php dynamic_sidebar( 'in-header-widget-area' ); ?>
 </aside>

<?php }

Se desiderate aggiungere ulteriori aree di widget nel tema, dovrete usare lo stesso tipo di codice. Più tardi nel corso di questo post vi mostrerò come farlo.

Non dimenticate che se il vostro tema non ha tutte le aree di widget che vorreste, potete sempre fare una di queste due cose:

• Trovate un tema che includa aree di widget nella posizione desiderata.
• Codificate la nuova area widget nel vostro tema o in un tema child.

Una volta che avrete aree di widget in tutte le posizioni desiderate del vostro tema, potete iniziare ad aggiungere dei widget.

Come Utilizzare la Schermata Widget Per Aggiungere Widget

Ci sono due modi per aggiungere widget al vostro sito WordPress. Il primo è quello di utilizzare la schermata Widget nell’amministrazione di WordPress.

Fate clic su Appearance > Widget e vedrete la schermata dei widget.

Per aggiungere un widget si possono fare due cose:

• Trascinarlo dall’elenco dei widget a sinistra nella relativa area dei widget.
• Fare clic sul widget che volete aggiungere e vedrete un elenco di posizioni in cui potete aggiungerlo. Selezionate l’area del widget che desiderate e fate clic sul pulsante Add widget.

Potrebbe essere necessario modificare il punto in cui il widget è posizionato all’interno dell’area del widget.

Potete aggiungere tutti i widget che desiderate a ciascuna area di widget, ma senza esagerare. Potete trascinarli all’interno dell’area dei widget per ottenere il giusto ordine. Potete anche trascinarli da un’area di widget all’altra se decidete che non vi piace il loro aspetto.

Potete anche usare la tastiera per aggiungere widget usando la schermata Widget, così se non avete accesso a un mouse potete comunque lavorare senza problemi.

Aggiunta e Modifica di Widget in Modalità Accessibilità

Se non potete usare un mouse, la schermata Widget è accessibile da tastiera.

Per prima cosa, mettete lo schermo in modalità accessibilità facendo clic sul link Enable accessibility mode in alto a destra dello schermo.

Lo schermo cambierà per riflettere il fatto che siete in modalità di accessibilità.

È quindi possibile navigare tra gli elementi dello schermo utilizzando il tasto Tab della tastiera e premere Invio per selezionare un elemento e agire su di esso. È possibile sia tabulare su un widget, premere Return sul link Add e poi scegliere dove desiderate aggiungerlo oppure tabulare nell’area del widget e premere Return sul link Edit.

Come Utilizzare il WordPress Customizer Per Aggiungere Widget

Utilizzare il Customizer per aggiungere widget al posto della schermata dei widget significa che potete vedere i vostri widget mentre li aggiungete. In questo modo è più facile vedere l’aspetto dei widget e spostarli tra le aree dei widget, se lo desiderate.

Nel menu di amministrazione, fate clic su Appearance > Customize. In alternativa, dalla barra di amministrazione nella parte superiore dello schermo del sito live (supponendo di aver effettuato l’accesso), basta fare clic su Customize. Questo aprirà il Customizer.

Ora fate clic sull’opzione Widget e vedrete un elenco di tutte le aree dei widget nel vostro tema. Fate clic sull’area dei widget in cui volete aggiungere un widget e poi sul pulsante Add a widget.

In questo modo otterrete un elenco di tutti i widget disponibili per il vostro sito. Questo include tutti i widget incorporati in WordPress più eventuali widget che avete aggiunto tramite i plugin.

Scegliete il widget che volete aggiungere a quell’area di widget e lo vedrete nella schermata di anteprima sul lato destro.

Potete riordinare i widget trascinandoli su e giù sul lato sinistro o facendo clic sul link Reorder sotto l’elenco dei widget e poi facendo clic sulle frecce per spostarli su e giù.

Una volta terminata l’aggiunta di widget tramite il Customizer non dimenticate di fare clic sul pulsante Publish in alto a sinistra in modo da salvare le vostre modifiche. Se lasciate il Customizer senza farlo, non vedrete nessuna delle vostre modifiche sul sito live.

Una volta aggiunti i vostri widget, date un’occhiata e controllate come si adattano al design della vostra pagina. Se avete aggiunto troppe aree di widget, le cose potrebbero sembrare un po’ disordinate. Sarà necessario rimuoverne alcuni o spostarli da un’area di widget all’altra.

È davvero facile farlo nella schermata Widget, dove potete trascinare i widget tra le aree dei widget.

Come Aggiungere un Widget a una Pagina Specifica

Alcuni temi includono aree di widget che sono solo per pagine specifiche, come la homepage. Ma cosa succede se volete aggiungere un widget a una sola pagina del vostro sito?

Potete farlo nel post e nell’editor di pagine di Gutenberg.

Aggiungete un nuovo blocco nel modo consueto e poi selezionate il tipo di blocco Widgets.

Potete quindi scegliere tra molti dei widget che avete abilitato per il vostro sito e aggiungerlo al contenuto del vostro post o della vostra pagina. È davvero utile se volete aggiungere un widget per il modulo, un widget per la call to action o un elenco dei vostri ultimi post.

Come Modificare i Widget

Una volta aggiunti i widget al vostro sito, potete modificarli. I singoli widget avranno delle impostazioni a cui accedere tramite la schermata Widget o il Customizer (non importa quale di questi metodi avete usato per aggiungere il widget).

Alcuni widget non includono alcuna impostazione, ma altri ad esempio includono quella per il titolo del widget o per il numero di post visualizzati. Alcuni sono più complicati e richiedono l’impostazione del widget in una pagina di impostazioni separata. Controllate la documentazione di chi sviluppa il vostro plugin.

Le opzioni di cui disponete per la modifica dei plugin dei widget includono:

• Modifica delle impostazioni del plugin.
• Spostamento del widget da un’area di widget all’altra.
• Rimozione del widget. Avete due opzioni per questo, che esamineremo a breve.

Per modificare le impostazioni del widget, cercatelo nella schermata dei widget o nel Customizer e modificate semplicemente le opzioni fornite.

Per spostare il widget da un’area all’altra, aprite la schermata dei widget e trascinatela da un’area all’altra. In modalità di accessibilità, spostatevi sulla freccia a destra del widget e selezionate una delle opzioni.

Eliminare i Widget

Per eliminare un widget nella schermata Widget, cercate quello che vi interessa e fate clic sul link di rimozione in basso a sinistra della casella di impostazione dei widget.

Per eliminare un widget nel Customizer, cercate il widget nell’area apposita. Fate clic sulla freccia a destra del nome del widget e poi sul link Remove in basso a sinistra delle impostazioni del widget.

È anche possibile rimuovere un widget da un’area di widget, ma renderlo comunque disponibile per l’uso in un secondo momento attraverso la schermata Widget.

Scorrere fino all’area Inactive Widgets verso il basso dello schermo. Trascinate i widget in quest’area per rimuoverli dall’area dei widget, ma manteneteli come bozze con le loro impostazioni correnti. Se in futuro doveste cambiare idea, potete sempre trascinarli di nuovo in un’area widget.

Se cambiate tema e questo include diverse aree di widget, qualsiasi widget che non rientri nelle aree di widget del nuovo tema verrà automaticamente spostato nell’elenco dei widget inattivi.

Come Aggiungere una Nuova Area Widget al Vostro Tema

Se il vostro tema non ha aree di widget nella posizione desiderata, potete sempre aggiungere il vostro. Per farlo aggiungete due snippet di codice.

Aggiungiamo un’area widget sotto il contenuto.

Creazione dell’Area Widget nel File delle Funzioni del Tema

Il primo passo è quello di impostare l’area dei widget utilizzando la funzione register_widget().

Se utilizzate un tema WordPress di terze parti (ecco una selezione dei migliori), dovete creare prima di tutto un tema child. Il motivo è che se aggiornate il tema in futuro, tutte le modifiche andranno perse.

Se lavorate con il vostro tema personalizzato, potete semplicemente modificarlo.

Iniziate aprendo il file functions.php del vostro tema. In fondo al file, aggiungete questo codice.

function kinsta_register_widgets() {
 
 register_sidebar( array(
  'name' => __( 'After Content Widget Area', 'kinsta' ),
  'id' => 'after-content-widget-area',
  'description' => __( 'Widget area after the content', 'kinsta' ),
  'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',

 ) );

}

add_action( 'widgets_init', 'kinsta_register_widgets' );

Ora salvate il file functions.php. Se andate alla vostra schermata Widgets o al Customizer, troverete la nuova area widget pronta per l’aggiunta del widget.

Ma se lo fate, in realtà non appariranno sulla pagina. Questo perché è necessario aggiungere del codice al file di template del tema.

Aggiunta del Widget ad un File Template del Tema

La prima cosa da fare è scoprire quale file template di tema è necessario utilizzare.

• Se state aggiungendo una barra laterale extra, allora dovrete aggiungere questo codice al vostro file sidebar.php.
• Se aggiungete l’area del widget prima o dopo il contenuto, sarà necessario aggiungerlo a qualsiasi file di template di tema che ne produca il contenuto.
• Se state aggiungendo un’area widget all’intestazione, dovrete aggiungere il codice al file header.php.
• Se la vostra nuova area widget è solo per una pagina del vostro sito o per un tipo di contenuto, dovrete usare la gerarchia dei template di WordPress per capire esattamente di quale file template avete bisogno per usarlo/crearlo e poi modificarlo. Così, se per esempio volete aggiungere aree di widget alla vostra homepage, dovrete creare un file front-page.php e aggiungervi la vostra area widget.

Una volta identificato il file di template da modificare e dove inserire il codice per l’area dei widget, aggiungete il seguente snippet. Nel caso di un’area widget dopo il contenuto, lo aggiungiamo ai file post.php e page.php nel nostro tema:

if ( is_active_sidebar( 'after-content-widget-area' ) ) { ?>

 aside class="after-content widget-area full-width" role="complementary">
  <?php dynamic_sidebar( 'after-content-widget-area' ); ?>
 </aside>

<?php }

Ora salvate il vostro o i vostri file modello.

Ora salvate il vostro o i vostri file template.

Notate che il vostro codice sarà diverso dal mio a seconda di come avete chiamato la vostra area di widget e di quali elementi volete inserirvi. Generalmente uso un elemento aside perché secondo me sono progettati per le barre laterali e le aree dei widget.

Suggerimento pro: Se spostate la fine del vostro elemento contenitore per il contenuto all’inizio della barra laterale e/o del file nel footer, allora potete aggiungerlo lì e vi basterà farlo una sola volta.

Ora, se date un’occhiata al vostro sito, scoprirete che tutti i widget che avete aggiunto alle vostre aree di widget appariranno nel posto giusto. Se non sono nel posto giusto, tornate indietro e modificate i vostri file di template, assicurandovi che il codice sia nel punto in cui lo desiderate. Potreste anche aver bisogno di modificare il vostro CSS per ottenere l’aspetto che volete.

Come Codificare i Widget Utilizzando l’API dei Widget

Così ora sapete come scegliere i widget per il vostro sito, come aggiungerli al vostro sito e come registrare nuove barre laterali o aree per i widget. Il passo successivo è imparare a creare un widget WordPress.

A volte, potreste scoprire che non c’è un plugin disponibile per creare un widget uguale a quello che volete sul vostro sito. Questo significa che dovrete codificarlo voi stessi.

In questo esempio, vi mostrerò come codificare un widget di call to action molto semplice.

Panoramica delle API dei Widget

L’API Widgets in WordPress include tutto il codice necessario per la registrazione, la creazione e i widget di codice. L’API dei widget include:

• Classi per costruire nuovi widget.
• Funzioni per registrare i widget e oscurarli sul vostro sito.
• Funzioni per cancellare la registrazione dei widget, per esempio da un tema parent.

Qui useremo una classe per costruire un widget. Il primo passo è quello di creare un plugin per contenere il widget.

Creare un Plugin Per il Vostro Widget WordPress

Per creare il vostro widget, dovrete codificare un plugin. Non aggiungete il codice per un nuovo widget al vostro tema, perché i widget riguardano la funzionalità e non la visualizzazione. Se in futuro cambierete il vostro tema, vorrete comunque poter accedere a quel widget.

Iniziate creando un plugin vuoto. Create una cartella plugin nella vostra directory wp-content/plugins e aggiungete un file vuoto. Dategli un nome appropriato. Aprite quel file e aggiungete questo codice.

<?php
/**
 * Plugin Name: Kinsta Call to Action Widget
 * Plugin URI: https://rachelmccollin.com
 * Description: A simple call to action widget.
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: https://rachelmccollin.co.uk
 */

Dovrete modificare l’URI dell’autore e il plugin URI al vostro. Questo creerà per voi un plugin che potrete attivare tramite la schermata Plugins.

Ma se lo attivate, non succederà nulla. Dovrete aggiungere del codice al vostro plugin.

Creare una Classe per il Widget

Il codice per il widget va all’interno di una classe. Aggiungetelo dopo.

class kinsta_Cta_Widget extends WP_Widget {

}

Creare la Funzione Construct

La prima cosa che va all’interno della classe è la funzione del costruttore per creare il widget. Aggiungetela all’interno delle parentesi graffe della classe.

//widget constructor function

function __construct() {

 $widget_options = array (
  'classname' => 'kinsta_cta_widget',
  'description' => 'Add a call to action box with your own text and link.'
 );

 parent::__construct( 'kinsta_cta_widget', 'Call to Action', $widget_options );

}

Così iniziate a costruire il widget.

Creare il Modulo per l’Output del Widget

Successivamente, abbiamo bisogno di un modulo che sarà utilizzato dalla schermata Widget e dal Customizer per creare il widget. Aggiungete questo, sempre all’interno delle parentesi graffe.

//function to output the widget form

function form( $instance ) {

 $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
 $link = ! empty( $instance['link'] ) ? $instance['link'] : 'Your link here';
 $text = ! empty( $instance['text'] ) ? $instance['text'] : 'Your text here';
?>

<p>
 <label for="<?php echo $this->get_field_id( 'title'); ?>">Title:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $title ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'text'); ?>">Text in the call to action box:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" value="<?php echo esc_attr( $text ); ?>" /></p>

<p>
 <label for="<?php echo $this->get_field_id( 'link'); ?>">Your link:</label>
 <input class="widefat" type="text" id="<?php echo $this->get_field_id( 'link' ); ?>" name="<?php echo $this->get_field_name( 'link' ); ?>" value="<?php echo esc_attr( $link ); ?>" /></p>

<?php }

Questo fornisce agli utenti un modulo che possono utilizzare per aggiungere testo e un link alla casella di call to action.

Creare la Funzione per Salvare il Widget

Ora è necessario salvare tutto ciò che è stato inserito in quel modulo. Aggiungete questo.

//function to define the data saved by the widget

function update( $new_instance, $old_instance ) {
 $instance = $old_instance;
 $instance['title'] = strip_tags( $new_instance['title'] );
 $instance['text'] = strip_tags( $new_instance['text'] );
 $instance['link'] = strip_tags( $new_instance['link'] );
 return $instance;          

}

In questo modo i dati inseriti dagli utenti vengono salvati nelle impostazioni dei widget.

Creare la Funzione per l’Output del Widget

Ora è necessario aggiungere il codice che permetterà la comparsa del widget sul sito. Anche in questo caso, aggiungete questo all’interno delle parentesi:

//function to display the widget in the site

function widget( $args, $instance ) {
 //define variables
 $title = apply_filters( 'widget_title', $instance['title'] );
 $text = $instance['text'];
 $link = $instance['link'];

 //output code
 echo $args['before_widget'];
 ?>

 <div class="cta">
  <?php if ( ! empty( $title ) ) {
 echo $args['before_title'] . $title . $args['after_title'];
 };
  echo '<a href="' . $link . '">' . $text . '</a>';
  ?>
 </div>

 <?php
 echo $args['after_widget'];

}

Registrare il Widget

Ora che avete scritto la vostra classe, è il momento di registrare il widget WordPress in modo che funzioni. Aggiungete questo codice al di fuori della classe.

//function to register the widget
function kinsta_register_cta_widget() {

 register_widget( 'kinsta_Cta_Widget' );
  
}
add_action( 'widgets_init', 'kinsta_register_cta_widget' );

Ora salvate il vostro file plugin. Andate alla schermata Widget e vedrete il widget pronto all’uso.

Se lo aggiungete a un’area di widget e poi aggiungete un testo e un link ad esso, verrà pubblicato nel sito live.

Potrebbe non avere un bell’aspetto in questo momento. Giocate un po’ con il CSS per renderlo più elegante.

Aggiungere CSS al Widget

Per aggiungere CSS al plugin, è necessario creare un foglio di stile e inserirlo nel plugin. Aggiungerlo al file del plugin prima della classe.

function kinsta_widget_enqueue_styles() {

 wp_register_style( 'widget_cta_css', plugins_url( 'css/style.css', __FILE__ ) );
 wp_enqueue_style( 'widget_cta_css' );

}
add_action( 'wp_enqueue_scripts', 'kinsta_widget_enqueue_styles' );

Ora è necessario aggiungere un file style.css all’interno della cartella del plugin e aggiungere qualsiasi stile. Lascio a voi la scelta!

Ora avete un semplice pulsante di call to action che potete aggiungere a qualsiasi area widget del vostro sito. Se lo aggiungete alla barra laterale, per esempio, le persone potranno utilizzarlo per accedere alla vostra pagina di iscrizione da qualsiasi punto del sito.

Potete creare widget più complessi con impostazioni e opzioni extra, ma questo vi dà un’idea di come iniziare a creare il vostro widget.

Se volete vedere il mio codice per questo plugin, incluso lo stile, potete trovarlo su Github. Se state iniziando con il codice, ecco una guida approfondita su git vs GitHub e come iniziare con entrambi.

Riepilogo

I widget sono una delle caratteristiche WordPress che preferisco. Possono dare vita al vostro sito web e aiutarvi a ottenere più iscrizioni o a convertire più visitatori in clienti. Potete aggiungere i widget di WordPress a qualsiasi area widget esistente nel vostro tema, ma potete anche aggiungere aree di widget extra e avere molteplici widget in luoghi diversi della pagina.

Ci sono anche moltissimi posti in cui trovare i widget. WordPress contiene già un certo numero preinstallati di widget, ma potete anche installarne altri tramite plugin. E non è tutto: se vi sentite a vostro agio, potete anche codificare i vostri widget utilizzando l’API Widgets.

Ora è il vostro turno: come utilizzate i widget di WordPress sul vostro sito? E quanti ne avete nel vostro sito?