Come creare un widget WordPress personalizzato

Vuoi creare i tuoi widget personalizzati in WordPress? I widget ti consentono di aggiungere elementi non contenuti in una barra laterale o in qualsiasi area predisposta per i widget del tuo sito web.


Puoi utilizzare i widget per aggiungere banner, pubblicità, moduli di iscrizione alla newsletter e altri elementi sul tuo sito web.

In questo articolo, ti mostreremo come creare un widget WordPress personalizzato, passo dopo passo.

Creazione di un widget WordPress personalizzato

Nota: Questo tutorial è per utenti WordPress fai-da-te che stanno imparando lo sviluppo e la codifica di WordPress.

Che cos’è un widget WordPress?

I widget di WordPress contengono parti di codice che puoi aggiungere alle barre laterali del tuo sito Web o alle aree pronte per i widget.

Pensali come moduli che puoi usare per aggiungere diversi elementi usando una semplice interfaccia drag and drop.

Per impostazione predefinita, WordPress viene fornito con un set standard di widget che è possibile utilizzare con qualsiasi tema WordPress. Consulta la nostra guida per principianti su come aggiungere e utilizzare i widget in WordPress.

Aggiunta di widget in WordPress

WordPress consente inoltre agli sviluppatori di creare i propri widget personalizzati.

Molti temi e plugin premium di WordPress sono dotati di widget personalizzati che puoi aggiungere alle barre laterali.

Ad esempio, puoi aggiungere un modulo di contatto, un modulo di accesso personalizzato o una galleria fotografica a una barra laterale senza scrivere alcun codice.

Detto questo, vediamo come creare facilmente i tuoi widget personalizzati in WordPress.

Tutorial video

Iscriviti a WPBeginner

Se preferisci istruzioni scritte, continua a leggere.

Creazione di un widget personalizzato in WordPress

Se stai imparando la codifica WordPress, avrai bisogno di un ambiente di sviluppo locale. Puoi installare WordPress sul tuo computer (Mac o Windows).

Esistono diversi modi per aggiungere il codice del widget personalizzato in WordPress.

Idealmente, puoi creare un plug-in specifico per il sito e incollare qui il codice del tuo widget.

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 plug-in Snippet di codice che ti consente di aggiungere facilmente codice personalizzato al tuo sito Web WordPress.

In questo tutorial, creeremo un semplice widget che saluta i visitatori. L’obiettivo qui è familiarizzare con la classe del widget WordPress.

Iniziamo.

Creazione di un widget WordPress di base

WordPress viene fornito con una classe Widget WordPress integrata. Ogni nuovo widget WordPress estende la classe del widget WordPress.

Esistono 18 metodi menzionati nel manuale dello sviluppatore di WordPress che possono essere utilizzati con la classe Widget WP.

Tuttavia, per il bene 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 è dove definiamo l’output generato dal widget.
  • modulo: questa parte del codice è dove creiamo il modulo con le opzioni del widget per il backend.
  • aggiornamento: questa è la parte in cui salviamo le opzioni del widget nel database.

Studiamo il seguente codice in cui abbiamo utilizzato questi quattro metodi all’interno della classe WP_Widget.

// Creazione del widget
la classe wpb_widget estende WP_Widget {

// La parte costruttiva
funzione __construct () {

}

// Creazione del front-end del widget
widget di funzione pubblica ($ args, $ instance) {

}

// Creazione del backend del widget
modulo di funzione pubblica ($ instance) {

}

// Aggiornamento del widget sostituendo vecchie istanze con nuove
aggiornamento della funzione pubblica ($ new_instance, $ old_instance) {

}

// La classe wpb_widget termina qui
}

Il pezzo finale del codice è dove registreremo effettivamente il widget e lo cariceremo all’interno di WordPress.

funzione wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

Ora mettiamo insieme tutto questo per creare un widget WordPress di base.

Puoi copiare e incollare il seguente codice nel tuo plugin personalizzato o nel file Functions.php del tema.

// Creazione del widget
la classe wpb_widget estende WP_Widget {

funzione __construct () {
parent :: __ construct (

// ID base del tuo widget
‘Wpb_widget’,

// Il nome del widget verrà visualizzato nell’interfaccia utente
__ (‘WPBeginner Widget’, ‘wpb_widget_domain’),

// Descrizione del widget
array (‘description’ => __ (‘Widget di esempio basato su WPBeginner Tutorial’, ‘wpb_widget_domain’),)
);
}

// Creazione del front-end del widget

widget di funzione pubblica ($ args, $ instance) {
$ title = apply_filters (‘widget_title’, $ instance [‘title’]);

// gli argomenti widget prima e dopo sono definiti da temi
echo $ args [‘before_widget’];
if (! vuoto ($ title))
echo $ args [‘before_title’]. $ title. $ args [ ‘after_title’];

// Qui è dove si esegue il codice e si visualizza l’output
echo __ (‘Hello, World!’, ‘wpb_widget_domain’);
echo $ args [‘after_widget’];
}

// Backend widget
modulo di funzione pubblica ($ instance) {
if (isset ($ instance [‘title’])) {
$ title = $ instance [‘title’];
}
altro {
$ title = __ (‘Nuovo titolo’, ‘wpb_widget_domain’);
}
// Modulo di amministrazione del widget
?>

<?php _e (‘Title:’); ?>

<?php
}

// Aggiornamento del widget sostituendo vecchie istanze con nuove
aggiornamento della funzione pubblica ($ new_instance, $ old_instance) {
$ instance = array ();
$ instance [‘title’] = (! empty ($ new_instance [‘title’]))? strip_tags ($ new_instance [‘title’]): ”;
restituisce $ instance;
}

// La classe wpb_widget termina qui
}

// Registra e carica il widget
funzione wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

Dopo aver aggiunto il codice devi andare a Aspetto »Widget pagina. Noterai il nuovo widget WPBeginner nell’elenco dei widget disponibili. Devi trascinare questo widget su una barra laterale.

Widget Demo

Questo widget ha solo un campo modulo da compilare, puoi aggiungere il tuo testo e fare clic sul pulsante Salva per memorizzare le modifiche.

Ora puoi visitare il tuo sito Web per vederlo in azione.

Anteprima del widget personalizzato

Ora studiamo di nuovo il codice.

Innanzitutto abbiamo registrato “wpb_widget” e caricato il nostro widget personalizzato. Successivamente abbiamo definito cosa fa quel widget e come visualizzare il back-end 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 wpb_text_domain?

WordPress utilizza gettext per gestire la traduzione e la localizzazione. Questo wpb_text_domain e __e dice a gettext di rendere disponibile una stringa per la traduzione. Scopri come trovare temi WordPress pronti per la traduzione.

Se stai creando un widget personalizzato per il tuo tema, puoi sostituire wpb_text_domain con il dominio di testo del tuo tema.

Speriamo che questo articolo ti abbia aiutato a imparare come creare facilmente un widget WordPress personalizzato. Potresti anche voler vedere il nostro elenco dei widget WordPress più utili per il tuo sito.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map