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\u00e0 e controllo che i blocchi da soli non sempre garantiscono.<\/p>\n
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.<\/p>\n
Prima di creare un widget personalizzato, devi assicurarti che il tema registri le aree widget. La registrazione avviene in 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.<\/p>\n I widget personalizzati si creano estendendo la classe Ecco uno scheletro minimo da inserire in Il metodo 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.<\/p>\n Il metodo Per un widget “Articoli Correlati”, usa Il metodo 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 Testa il widget su pi\u00f9 temi per verificare la compatibilit\u00e0. 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.<\/p>\n 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\u00e0 e maggiore flessibilit\u00e0. Tuttavia, i widget classici restano validi per funzionalit\u00e0 che richiedono logica PHP complessa, come query dinamiche, integrazione con API esterne o elaborazione dati lato server.<\/p>\n Se stai iniziando un nuovo progetto, valuta l’approccio ibrido: blocchi Gutenberg per contenuti statici e widget personalizzati per funzionalit\u00e0 dinamiche. Quando possibile, trasforma i widget pi\u00f9 semplici in blocchi: la transizione \u00e8 facilitata dal fatto che entrambi condividono concetti simili (costruttore, rendering, salvataggio).<\/p>\n Creare widget personalizzati per WordPress \u00e8 un’abilit\u00e0 preziosa per qualsiasi sviluppatore. I widget offrono flessibilit\u00e0, riutilizzabilit\u00e0 e controllo che i blocchi Gutenberg non sempre possono eguagliare. Seguendo le best practice di sicurezza, performance e compatibilit\u00e0, 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.<\/p>\n","protected":false},"excerpt":{"rendered":" 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. […]<\/p>\n","protected":false},"author":1,"featured_media":2034,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"Studio Immens Blog","visibility_scope":"both","ai_summary":"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 Widge...","ai_intent":"informative","ai_related_resources":"","ai_priority":5,"ai_entity_type":"Article","ai_is_based_on":"https:\/\/blog.studioimmens.com\/widget-personalizzati-per-wordpress\/","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"Widget, personalizzati, per, WordPress","footnotes":""},"categories":[133],"tags":[],"ai_visibility":[],"class_list":["post-1933","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1933","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1933"}],"version-history":[{"count":0,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1933\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/2034"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1933"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1933"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1933"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1933"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}functions.php<\/code> usando la funzione register_sidebar()<\/code>. Ecco un esempio tipico:<\/p>\nregister_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>' ) );<\/code><\/p>\nCreare un widget personalizzato con WP_Widget<\/h2>\n
WP_Widget<\/code>. La struttura base richiede quattro metodi: __construct()<\/code> per definire ID, titolo e descrizione; widget()<\/code> per visualizzare il contenuto nel frontend; form()<\/code> per il pannello di amministrazione; update()<\/code> per salvare le impostazioni.<\/p>\nfunctions.php<\/code> o meglio in un plugin dedicato:<\/p>\nclass 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' ); } );<\/code><\/p>\nIl metodo form: campi di amministrazione<\/h2>\n
form()<\/code> 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()<\/code> e get_field_name()<\/code> per generare name e ID univoci dei campi.<\/p>\nIl metodo widget: visualizzazione frontend<\/h2>\n
widget()<\/code> \u00e8 il cuore del widget: recupera le impostazioni salvate con $instance<\/code>, 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']<\/code> e $args['after_widget']<\/code> per rispettare il markup del tema.<\/p>\nwp_get_post_tags()<\/code> per trovare tag in comune e WP_Query<\/code> con tag__in<\/code> 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')<\/code> e la data di pubblicazione.<\/p>\nIl metodo update: salvataggio e sanitizzazione<\/h2>\n
update()<\/code> riceve i nuovi dati dal form e deve restituire l’array sanitizzato. Usa strip_tags()<\/code> per i campi testo, intval()<\/code> per i numeri e wp_kses()<\/code> per i campi che possono contenere HTML consentito. Non salvare mai dati non sanitizzati: \u00e8 una vulnerabilit\u00e0 XSS in attesa di manifestarsi.<\/p>\nBest practice per i widget<\/h2>\n
__()<\/code> e _e()<\/code>. Ottimizza le query: un widget che esegue query pesanti rallenta l’intero sito. Usa wp_cache_get()<\/code> e wp_cache_set()<\/code> per memorizzare nella cache i risultati delle query frequenti.<\/p>\nWidget classici vs Blocchi Gutenberg<\/h2>\n
Conclusioni<\/h2>\n