I widget ti consentono di aggiungere elementi non di contenuto a una barra laterale o a qualsiasi area pronta per i widget sul tuo sito WordPress. Puoi usarli per aggiungere banner, pubblicità, moduli di iscrizione alla newsletter e altri elementi al tuo sito web.
Puoi anche creare un widget personalizzato per incorporare funzioni uniche con un tocco personalizzato come feed dei social media, post recenti o tag HTML.
Su WPBeginner, utilizziamo widget personalizzati per visualizzare diversi tipi di contenuto nella barra laterale del nostro sito web. E in questo articolo, ti mostreremo come creare un widget WordPress personalizzato, passo dopo passo.
Nota: Questo tutorial è per gli utenti WordPress fai-da-te che stanno imparando lo sviluppo e la programmazione di WordPress.
Cos'è un widget WordPress?
I widget di WordPress contengono pezzi di codice che puoi aggiungere alle barre laterali o alle aree pronte per i widget del tuo sito web.
Pensali come moduli che puoi utilizzare per aggiungere diversi elementi e funzionalità al tuo sito.
Per impostazione predefinita, WordPress viene fornito con un set standard di widget che puoi utilizzare con qualsiasi tema WordPress. Per maggiori dettagli, consulta la nostra guida per principianti su come aggiungere e utilizzare i widget in WordPress.
WordPress consente anche agli sviluppatori di creare i propri widget personalizzati.
Molti temi WordPress e plugin premium sono dotati dei propri widget personalizzati che puoi aggiungere alle tue barre laterali.
Ad esempio, puoi aggiungere un modulo di contatto, un modulo di accesso personalizzato, una galleria fotografica, un modulo di iscrizione alla lista email e altro ancora a una barra laterale senza scrivere codice.
Detto questo, vediamo come puoi creare facilmente i tuoi widget personalizzati in WordPress.
Prima di creare un widget personalizzato in WordPress
Se stai imparando a programmare in WordPress, avrai bisogno di un ambiente di sviluppo locale. Questo ti dà la libertà di imparare e testare le cose senza preoccuparti che il tuo sito sia online.
Puoi installare WordPress localmente su Mac usando MAMP o Windows usando WAMP.
Se hai già un sito live, puoi spostarlo su un host locale. Per maggiori dettagli, consulta la nostra guida su come spostare un sito WordPress live su un server locale.
Dopodiché, ci sono diversi modi per aggiungere il tuo codice widget personalizzato in WordPress.
Idealmente, puoi creare un plugin specifico per il sito e incollare lì il tuo codice widget. Questo ti consente di aggiungere codice a WordPress che non dipende dal tuo tema WordPress.
Puoi anche incollare il codice nel file functions.php del tuo tema. Tuttavia, sarà disponibile solo quando quel particolare tema è attivo.
Un altro strumento che puoi utilizzare è il plugin WPCode che ti consente di aggiungere facilmente codice personalizzato al tuo sito web.
In questo tutorial, creeremo un semplice widget che saluta i visitatori. L'obiettivo qui è familiarizzare con la classe widget di WordPress.
Pronto? Iniziamo.
Creazione di un widget WordPress di base
WordPress viene fornito con una classe Widget di WordPress integrata. Ogni nuovo widget di WordPress estende la classe widget di WordPress.
Ci sono 19 metodi menzionati nell'handbook per sviluppatori di WordPress che possono essere utilizzati con la classe WP Widget.
Tuttavia, ai fini di questo tutorial, ci concentreremo sui seguenti metodi.
- __construct() : Questa è la parte in cui creiamo l'ID del widget, il titolo e la descrizione.
- widget : Qui definiamo l'output generato dal widget.
- form : Questa parte del codice è dove creiamo il modulo con le opzioni del widget per il backend.
- update: Questa è la parte in cui salviamo le opzioni del widget nel database.
Per creare un widget personalizzato, puoi copiare e incollare il seguente snippet di codice nel tuo file functions.php o in WPCode (consigliato):
<?php
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__( 'WPBeginner Widget', 'textdomain' ),
// Widget description
[
'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
]
);
}
// Creating widget front-end
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
// This is where you run the code and display the output
echo __( 'Hello, World!', 'textdomain' );
echo $args['after_widget'];
}
// Widget Settings Form
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = __( 'New title', 'textdomain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">
<?php _e( 'Title:', 'textdomain' ); ?>
</label>
<input
class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>"
name="<?php echo $this->get_field_name( 'title' ); ?>"
type="text"
value="<?php echo esc_attr( $title ); ?>"
/>
</p>
<?php
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
// Class wpb_widget ends here
}
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
Il modo più semplice per aggiungere codice personalizzato al tuo sito WordPress è utilizzare WPCode. È il miglior plugin per snippet di codice che aiuta a gestire e inserire snippet di codice sul tuo sito senza rischiare di danneggiare nulla.
Innanzitutto, dovrai installare e attivare il plugin WPCode sul tuo sito. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin di WordPress.
Dopo l'attivazione, puoi accedere a Code Snippets » + Add Snippet dal pannello di amministrazione di WordPress. Da qui, seleziona l'opzione 'Add Your Custom Code (New Snippet)'.
Successivamente, puoi incollare il codice del widget personalizzato nell'area Code Preview.
Dovrai anche fare clic sul menu a discesa 'Code Type' e selezionare l'opzione 'PHP Snippet'.
Successivamente, puoi scorrere verso il basso e selezionare il metodo di inserimento per il tuo codice.
WPCode ti consente di scegliere dove eseguire il codice. Per questo tutorial, puoi utilizzare le opzioni predefinite ed eseguirlo ovunque.
Una volta fatto, puoi scorrere di nuovo verso l'alto per salvare lo snippet.
Per attivare lo snippet, fai semplicemente clic sull'interruttore su 'Active'.
Per saperne di più, consulta la nostra guida su come aggiungere codice personalizzato al tuo sito WordPress.
Dopo aver aggiunto il codice a WordPress, devi accedere alla pagina Aspetto » Widget nel tuo pannello di amministrazione di WordPress.
Quindi, fai clic sull'icona 'Più' per aggiungere un blocco, cerca 'Widget WPBeginner' e seleziona il nuovo widget.
Questo widget ha un solo campo da compilare.
Puoi aggiungere il tuo testo e fare clic sul pulsante 'Aggiorna' per salvare le modifiche.
Ora puoi visitare il tuo sito web WordPress per vedere il widget personalizzato in azione.
Ecco un esempio di come appare sul nostro sito demo.
Aggiungere un widget personalizzato nell'editor classico di WordPress
Se stai utilizzando l'editor di widget classico per aggiungere nuovi widget al tuo sito, il processo sarà simile.
Ci sarà un nuovo widget chiamato 'Widget WPBeginner' nell'elenco dei widget disponibili. Devi trascinare e rilasciare questo widget nella tua barra laterale.
Quindi, inserisci un titolo e fai clic su 'Salva' per salvare le impostazioni del tuo widget.
Il tuo nuovo widget personalizzato sarà ora attivo sul tuo sito web.
Ora, studiamo di nuovo il codice.
Innanzitutto, abbiamo registrato 'wpb_widget' e caricato il nostro widget personalizzato. Dopodiché, abbiamo definito cosa fa quel widget e come visualizzare il backend del widget.
Infine, abbiamo definito come gestire le modifiche apportate al widget.
Ora, ci sono alcune cose che potresti voler chiedere. Ad esempio, qual è lo scopo di textdomain?
WordPress utilizza 'gettext' per gestire la traduzione e la localizzazione. Questo textdomain e _e indicano a 'gettext' di rendere una stringa disponibile per la traduzione. Per saperne di più, consulta la nostra guida su come trovare temi WordPress pronti per la traduzione.
Se stai creando un widget personalizzato per il tuo tema, puoi sostituire textdomain con il text domain del tuo tema.
In alternativa, puoi utilizzare un plugin di traduzione per WordPress per tradurre facilmente WordPress e creare un sito WordPress multilingue.
Bonus: Aggiungi stili personalizzati ai tuoi widget WordPress
Una volta creato un widget WordPress, puoi anche aggiungere stili personalizzati. Questo può migliorare l'aspetto del tuo sito web, mantenere la coerenza e attirare l'attenzione su informazioni importanti.
Per fare ciò, visita la pagina Aspetto » Widget e aggiungi il widget che desideri personalizzare. Ora vedrai alcune opzioni per cambiarne i colori e la tipografia nel pannello a blocchi sulla destra.
Tuttavia, se il widget non visualizza tale opzione, puoi personalizzarlo aggiungendo classi CSS dopo aver espanso la scheda 'Avanzate'.
Ora, puoi aggiungere CSS personalizzato al tuo tema WordPress che si rivolge a quella particolare classe CSS.
Per fare ciò, vai alla pagina Aspetto » Personalizza e passa alla scheda CSS aggiuntivo. Qui vedrai un'anteprima del tuo sito web con una casella per aggiungere le tue regole CSS.
Ora puoi usare CSS personalizzato per personalizzare l'aspetto del tuo widget. Per maggiori dettagli, consulta il nostro tutorial su come aggiungere stili personalizzati ai tuoi widget di WordPress.
Speriamo che questo articolo ti abbia aiutato a imparare come creare facilmente un widget WordPress personalizzato. Potresti anche voler consultare la nostra guida su come disabilitare i blocchi widget in WordPress e il nostro tutorial su come rimuovere i widget inattivi in WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Dan
La stringa 'wpb_text_domain' non è presente nel codice di esempio. Suppongo che il codice di esempio sia stato aggiornato e il testo dell'articolo no?
Inoltre, per confermare, 'wpb_text_domain' è effettivamente 'web_widget_domain' dal codice di esempio?
Grazie in anticipo per qualsiasi feedback.
Supporto WPBeginner
Grazie per averlo segnalato, aggiorneremo questo articolo e chiariremo meglio.
Amministratore
marwan
ciao,
posso mettere il codice come classe.php separata e non in functions.php
Karel Hanton
Grazie per l'ottimo tutorial. Ho aggiunto il codice al mio plugin di test e funziona perfettamente come descritto – vedo il Widget nell'elenco Aspetto » Widget e posso aggiungerlo alla Sidebar.
Ma non vedo il nuovo Widget nell'elenco dell'editor di pagina. Mi manca qualcosa, c'è bisogno di un'altra registrazione o impostazioni?
Grazie ancora per l'aiuto.
Aldo
Questo ora viene visualizzato come un "Widget Legacy" in Wordpress. Esiste un nuovo modo per creare widget?
JP
questo è fantastico, un semplice esempio di copia e incolla era esattamente quello che stavo cercando. Grazie!
Supporto WPBeginner
You’re welcome
Amministratore
Banu
Ho creato un plugin CRUD e devo usarlo in una pagina, potresti guidarmi su come usarlo in una pagina?
Supporto WPBeginner
Dipenderebbe da come hai configurato il plugin; per averlo su una pagina potresti usare uno shortcode per la visualizzazione front-end o esaminare l'API delle opzioni se volessi visualizzarlo sul lato amministrativo di un sito.
Amministratore
Kishan
Come posso creare più di 1 widget personalizzato?
E inoltre, come posso impostare altri campi come radio, checkbox, dropdown, testo nel widget?
Supporto WPBeginner
Dovresti sostituire wpb_widget con il nome che vuoi dare al tuo nuovo widget e poi il codice dipenderebbe da cosa vorresti aggiungere specificamente. Se dai un'occhiata al codex di WordPress puoi vedere i diversi codici disponibili.
Amministratore
Carmen
Ciao!
Attualmente, sto sviluppando un plugin e ho bisogno di creare un widget per consentire all'utente di aggiungere una funzionalità specifica al suo sito.
Ho copiato il codice del tuo widget in un file e ho salvato il file nella directory del mio plugin. Ho usato add_action e do_action nel file principale del mio plugin per caricarlo, ma ancora non funziona. Puoi aiutarmi, per favore?
Grazie!
Supporto WPBeginner
Purtroppo, dipenderebbe molto da come è configurato il tuo plugin; potresti voler assicurarti che entrambe le sezioni di questo codice vengano caricate affinché il widget venga aggiunto e visualizzato.
Amministratore
Maximilian K.
Una domanda veloce, cosa succede se voglio creare widget in cui posso anche inserire altri widget? Come colonne bootstrap vuote 6-3-3 ad esempio, e in ogni colonna posso inserire widget come immagine, testo, ultimi post ecc.
Esiste un comando / parola chiave per segnalare che c'è spazio per altri widget in questo widget...
perché sono un po' confuso riguardo al mio tema creato e a come funziona WP... vedi, sono un principiante ^^
Ho già inserito informazioni generali come il titolo della pagina, ho creato aree widget nel mio footer in modo da poterci inserire menu, link correlati ecc. Ha funzionato.
Ma ora sono confuso su come posso realizzare i miei contenuti in WordPress come li ho progettati prima. Forse alcune parole chiave sono utili per leggere di più su di esse.
Supporto WPBeginner
Ciò richiederebbe più personalizzazione di quanto trattiamo in questo articolo, potresti dover approfondire come creare una sidebar per il codice che puoi utilizzare: https://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
Amministratore
Lars
Ottimo tutorial! Ha funzionato perfettamente.
Supporto WPBeginner
Glad our tutorial could help
Amministratore
Watson Anikwai
Come si ottiene un campo di tipo post personalizzato dal database di WordPress e si utilizza un widget per visualizzarlo sul front-end?
vicky
non riesco ad aggiungere due widget personalizzati.. il secondo widget non viene visualizzato...
cosa dovrei fare???.. per favore aiutami
Ahad Bhatti
Molto comprensibile e utile. Grazie.
Belitza Gomez
Ciao, vorrei sapere dove posso trovare nella sezione widget disponibili il "menu personalizzato". Non compare e non sono riuscito ad aggiungere una pagina al footer tramite questo widget.
grazie per il tuo aiuto!!!!
Samdoxer
Ciao, come posso mostrare un logo al posto del testo? Sarebbe sufficiente sostituire l'URL del logo con il testo.
Grazie in anticipo.
Supporto WPBeginner
Si prega di consultare le impostazioni del tema o visitare la pagina Aspetto » Personalizza nell'area di amministrazione. Lì troverai un'opzione per caricare l'immagine del tuo logo.
Amministratore
Gary Foster
Cosa è venuto prima il widget o l'app?
Un widget deve essere registrato? Se sì, come per favore?
Come proteggi al meglio la tua idea di un widget o di un'app?
Grazie a tutti
shelley
Queste istruzioni hanno funzionato benissimo per creare il mio widget personalizzato. Non riesco però a capire come cambiare la dimensione del font a 60px. Sono riuscito ad aggiungere CSS alle opzioni del tema Divi che hanno centrato il testo e aggiunto un bordo. Ma come cambio lo stile del font per favore? Aggiungere "font-size:60px" non funziona. Voglio che il font sia grande, come un tagline che scorre sulla pagina. Grazie.
Ahmad Farhan
Very helpfull. tankyou
Eyad
Grazie mille per i tuoi tutorial
Luigi Briganti
Ciao! Spero tu possa aiutarmi.
Ho creato un tipo di post personalizzato che mostra l'orario di un negozio. Naturalmente, puoi creare quanti orari vuoi, ma la mia necessità è mostrare un dato orario nella barra laterale del sito web.
A tal scopo ho creato un widget che cicla i post dell'orario mostrando solo 1 (cioè il primo, dato che li ho ordinati in ordine ASC). Questa è una soluzione temporanea, solo per vedere se il widget funziona e in effetti funziona.
Quello che voglio davvero fare è mostrare nel backend un elenco a discesa di tutti i post appartenenti al tipo di post "timetable" in modo da poter scegliere quello di cui ho bisogno quando ne ho bisogno e mostrarlo nel frontend. Come posso fare?
Grazie se puoi/vuoi aiutare.
Anees Ijaz
Grazie amico per avermi fatto risparmiare tempo..
Kevin
Adoro questo post, mi ha aiutato molto spesso! Grazie!