I widget di WordPress sono piccoli blocchi di contenuti che è possibile trascinare e rilasciare in barre laterali, piè di pagina, o aree widget personalizzate — perfetto per visualizzare i messaggi recenti, informazioni di contatto, link sociali, annunci, o messaggi personalizzati. Mentre WordPress include molti widget di default, la creazione del proprio widget personalizzato consente di aggiungere funzionalità uniche su misura per le esigenze del tuo sito o del tuo cliente (ad esempio, una scatola personalizzata “Aggiornamenti più recenti”, saluto personalizzato, o contenuto dinamico). Nel 2026, con l'editing completo e temi di blocco diventando standard, widget personalizzati rimangono un modo potente per estendere le barre laterali e le aree widget legacy.
A Cope Business, costruiamo widget personalizzati per i clienti durante il nostro servizi tecnici di audit SEO per migliorare l'esperienza dell'utente, aggiungere elementi di marca, e migliorare il coinvolgimento senza fare affidamento su plugin di terze parti pesanti.
Questa guida passo-passo vi mostra come creare un semplice widget WordPress personalizzato da zero — nessun plugin richiesto. Costruiremo uno che visualizza un messaggio personalizzato con un titolo e un link facoltativo. È possibile espanderlo più tardi per funzioni più avanzate.
Perché creare un widget WordPress personalizzato?
- Funzionalità unica — Aggiungi esattamente ciò di cui hai bisogno (senza bloat da plugin di terze parti)
- Controllo completo — Stile e comportarsi esattamente come si desidera
- Leggero — Nessun plugin extra overhead → sito più veloce
- Riutilizzabile — Utilizzarlo su più siti o progetti client
- Opportunità di apprendimento — Ottimo modo per capire lo sviluppo di WordPress
Prerequisiti
- Un sito locale/staging WordPress (test sicuro!)
- Conoscenza PHP di base ( spiegheremo ogni riga)
- Un tema bambino (consigliato) o una cartella plugin personalizzata
- Accesso a wp-content (tramite FTP o hosting file manager)
Step-by-Step: Creazione del tuo primo widget personalizzato
Passo 1: Creare un Plugin personalizzato (Safest & Portable)
E 'meglio creare un piccolo plugin che aggiungere codice a funzioni.php (sorves modifiche tema).
- In /wp-content/plugins/, creare una nuova cartella:
- All'interno, creare un file: far-custom-widget.php
- Aggiungi questa intestazione:
PHP
<?php
/**
* Plugin Name: Cope Custom Widget
* Plugin URI: https://www.copebusiness.com
* Description: Adds a simple custom widget to WordPress
* Version: 1.0
* Author: Cope Business
* Author URI: https://www.copebusiness.com
* License: GPL2
*/Fase 2: Registra la classe Widget
Aggiungi questo codice sotto l'intestazione:
PHP
class Cope_Custom_Widget extends WP_Widget {
// Constructor
public function __construct() {
parent::__construct(
'cope_custom_widget', // Base ID
'Cope Custom Message Widget', // Name shown in widget area
array( 'description' => 'Displays a custom message with optional link.' )
);
}
// Front-end display of widget
public function widget( $args, $instance ) {
echo $args['before_widget'];
if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
}
echo '<div class="cope-custom-message">';
echo ! empty( $instance['message'] ) ? esc_html( $instance['message'] ) : 'Add your custom message here.';
if ( ! empty( $instance['link_url'] ) && ! empty( $instance['link_text'] ) ) {
echo ' <a href="' . esc_url( $instance['link_url'] ) . '">' . esc_html( $instance['link_text'] ) . '</a>';
}
echo '</div>';
echo $args['after_widget'];
}
// Back-end widget form
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : 'Custom Message';
$message = ! empty( $instance['message'] ) ? $instance['message'] : '';
$link_url = ! empty( $instance['link_url'] ) ? $instance['link_url'] : '';
$link_text = ! empty( $instance['link_text'] ) ? $instance['link_text'] : 'Learn More';
?>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">Title:</label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'message' ) ); ?>">Message:</label>
<textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'message' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'message' ) ); ?>" rows="5"><?php echo esc_textarea( $message ); ?></textarea>
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'link_url' ) ); ?>">Link URL:</label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'link_url' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'link_url' ) ); ?>" type="url" value="<?php echo esc_url( $link_url ); ?>">
</p>
<p>
<label for="<?php echo esc_attr( $this->get_field_id( 'link_text' ) ); ?>">Link Text:</label>
<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'link_text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'link_text' ) ); ?>" type="text" value="<?php echo esc_attr( $link_text ); ?>">
</p>
<?php
}
// Update widget values
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? sanitize_text_field( $new_instance['title'] ) : '';
$instance['message'] = ( ! empty( $new_instance['message'] ) ) ? sanitize_textarea_field( $new_instance['message'] ) : '';
$instance['link_url'] = ( ! empty( $new_instance['link_url'] ) ) ? esc_url_raw( $new_instance['link_url'] ) : '';
$instance['link_text'] = ( ! empty( $new_instance['link_text'] ) ) ? sanitize_text_field( $new_instance['link_text'] ) : '';
return $instance;
}
}Passo 3: Registrare il Widget
Aggiungi questo in basso:
PHP
function cope_register_custom_widget() {
register_widget( 'Cope_Custom_Widget' );
}
add_action( 'widgets_init', 'cope_register_custom_widget' );Passo 4: Attiva e prova
- Salva il file.
- Vai a Plugin → Attivare “Cope Custom Widget”.
- Vai a Aspetto > Widgets → Trascina “Cope Custom Message Widget” su una barra laterale.
- Compila il titolo, il messaggio e il link opzionale → Salva.
- Visita il tuo sito — appare il widget personalizzato!
Punti positivi: Controllo completo, nessun plugin extra, riutilizzabile.
Punti negativi: Richiede PHP di base; prova sulla messa in scena prima.
Metodo 2: Utilizzo di un Plugin (Faster for Non-Coders)
Se la codifica si sente schiacciante, utilizzare un plugin.
Plugin consigliato: Opzioni Widget (Free/Pro) o SiteOrigin Widgets Bundle
- Installazione Opzioni Widget (gratuito).
- Vai a Aspetto > Widgets.
- Aggiungi qualsiasi widget (Testo, HTML personalizzato, ecc.).
- Utilizzare opzioni Widget per stile, allineare, o aggiungere lezioni personalizzate.
- Per i widget avanzati: Install SitoOrigin Widgets Bundle (gratuito) → utilizzare widget pre-costruiti o creare quelli personalizzati.
Punti positivi: Nessun codice, controlli visivi, facile.
Punti negativi: Meno flessibile del codice personalizzato.
Migliori Pratiche per Widget personalizzati
- Utilizzare sempre un tema bambino o plugin personalizzato — mai modificare file tema direttamente.
- Smaltire tutti gli input (fatto nel codice di esempio).
- Prova su mobile — garantire widget sembra buono in barre laterali.
- Tenere leggero — evitare pesanti query all'interno di widget.
- Aggiungi CSS per lo styling (Apparenza > Personalizza > CSS addizionale).
Pensieri finali
Creare un widget WordPress personalizzato è un ottimo modo per aggiungere funzionalità uniche senza fare affidamento su plugin di terze parti pesanti. Iniziare con l'esempio di codice sopra — è semplice, sicuro e espandibile.
I widget personalizzati ti danno il pieno controllo e mantengono il tuo sito inclinato.
Hai bisogno di aiuto costruire widget personalizzati, ottimizzare la barra laterale, o migliorare le prestazioni del sito? Contatto Cope Business per una consulenza tecnica gratuita SEO — creeremo soluzioni su misura per migliorare il vostro sito WordPress esattamente il modo desiderato.
