Cosa sono i widget in WordPress
I widget sono blocchi di contenuto dinamico che possono essere aggiunti alle aree widget del tema: sidebar, footer, header e qualsiasi altra zona registrata. Dal 2018 con l’introduzione di Gutenberg, WordPress ha unificato l’esperienza dei widget con il Block Widgets Editor, permettendo di usare qualsiasi blocco Gutenberg come widget. Tuttavia, creare widget personalizzati con codice offre flessibilità e controllo che i blocchi da soli non sempre garantiscono.
Prima di Gutenberg, i widget erano l’unico modo per aggiungere contenuti dinamici alle sidebar. Oggi convivono due approcci: i widget classici (basati sulla classe WP_Widget) e i blocchi Gutenberg (che possono essere registrati come widget). In questo articolo ci concentriamo sui widget personalizzati classici, ancora molto utilizzati in temi che non supportano completamente FSE.
Registrare aree widget nel tema
Prima di creare un widget personalizzato, devi assicurarti che il tema registri le aree widget. La registrazione avviene in functions.php usando la funzione register_sidebar(). Ecco un esempio tipico:
register_sidebar( array( 'name' => 'Sidebar Principale', 'id' => 'sidebar-1', 'description' => 'Sidebar principale del sito', 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
Puoi registrare multiple aree widget: una sidebar principale, un footer a tre colonne, una sezione sopra il contenuto e un’area widget nella pagina contatti. Ogni area ha un ID univoco che userai nel template e nei widget personalizzati.
Creare un widget personalizzato con WP_Widget
I widget personalizzati si creano estendendo la classe WP_Widget. La struttura base richiede quattro metodi: __construct() per definire ID, titolo e descrizione; widget() per visualizzare il contenuto nel frontend; form() per il pannello di amministrazione; update() per salvare le impostazioni.
Ecco uno scheletro minimo da inserire in functions.php o meglio in un plugin dedicato:
class Widget_Ultimi_Articoli extends WP_Widget { public function __construct() { parent::__construct( 'widget_ultimi_articoli', 'Ultimi Articoli', array( 'description' => 'Mostra gli ultimi articoli pubblicati' ) ); } public function widget( $args, $instance ) { echo $args['before_widget']; // contenuto del widget echo $args['after_widget']; } public function form( $instance ) { // campi del form amministrativo } public function update( $new_instance, $old_instance ) { // sanitizzazione e salvataggio } } add_action( 'widgets_init', function() { register_widget( 'Widget_Ultimi_Articoli' ); } );
Il metodo form: campi di amministrazione
Il metodo form() genera il pannello di amministrazione del widget. Qui l’utente configura le opzioni: titolo, numero di elementi da mostrare, categoria da filtrare, ordine di visualizzazione. Ogni campo deve essere sanitizzato prima del salvataggio. Usa get_field_id() e get_field_name() per generare name e ID univoci dei campi.
Esempio pratico: un widget “Contatti” con campi per indirizzo, telefono, email e link alla mappa. Il form include input di testo, textarea e un checkbox per mostrare/nascondere l’icona. Per una migliore UX, raggruppa i campi con fieldset e usa descrizioni brevi sotto ogni input.
Il metodo widget: visualizzazione frontend
Il metodo widget() è il cuore del widget: recupera le impostazioni salvate con $instance, esegue query WordPress (WP_Query per articoli, get_terms per categorie) e produce l’output HTML. La struttura standard prevede l’uso di $args['before_widget'] e $args['after_widget'] per rispettare il markup del tema.
Per un widget “Articoli Correlati”, usa wp_get_post_tags() per trovare tag in comune e WP_Query con tag__in per recuperare i post correlati. Limita i risultati a 3-5 elementi per non appesantire la sidebar. Aggiungi la miniatura del post con the_post_thumbnail('thumbnail') e la data di pubblicazione.
Il metodo update: salvataggio e sanitizzazione
Il metodo update() riceve i nuovi dati dal form e deve restituire l’array sanitizzato. Usa strip_tags() per i campi testo, intval() per i numeri e wp_kses() per i campi che possono contenere HTML consentito. Non salvare mai dati non sanitizzati: è una vulnerabilità XSS in attesa di manifestarsi.
Best practice per i widget
Inserisci i widget in un plugin dedicato, non in functions.php del tema, per preservarli quando cambi tema. Usa prefissi unici nei nomi delle classi per evitare conflitti. Supporta l’internazionalizzazione con __() e _e(). Ottimizza le query: un widget che esegue query pesanti rallenta l’intero sito. Usa wp_cache_get() e wp_cache_set() per memorizzare nella cache i risultati delle query frequenti.
Testa il widget su più temi per verificare la compatibilità. Alcuni temi usano markup personalizzati per i widget che potrebbero rompere il layout. Documenta il widget con commenti nel codice e, se lo distribuisci, includi un readme.txt secondo gli standard WordPress.
Widget classici vs Blocchi Gutenberg
Con l’introduzione del Block Widget Editor in WordPress 5.8, i widget classici convivono con i blocchi Gutenberg. I blocchi sono il futuro: offrono editing visivo, riutilizzabilità e maggiore flessibilità. Tuttavia, i widget classici restano validi per funzionalità che richiedono logica PHP complessa, come query dinamiche, integrazione con API esterne o elaborazione dati lato server.
Se stai iniziando un nuovo progetto, valuta l’approccio ibrido: blocchi Gutenberg per contenuti statici e widget personalizzati per funzionalità dinamiche. Quando possibile, trasforma i widget più semplici in blocchi: la transizione è facilitata dal fatto che entrambi condividono concetti simili (costruttore, rendering, salvataggio).
Conclusioni
Creare widget personalizzati per WordPress è un’abilità preziosa per qualsiasi sviluppatore. I widget offrono flessibilità, riutilizzabilità e controllo che i blocchi Gutenberg non sempre possono eguagliare. Seguendo le best practice di sicurezza, performance e compatibilità, i tuoi widget funzioneranno perfettamente su qualsiasi tema WordPress. Che tu scelga l’approccio classico o il nuovo sistema a blocchi, la conoscenza della classe WP_Widget resta fondamentale nel toolkit dello sviluppatore WordPress.