Come creare un widget WordPress personalizzato

Vuoi creare i tuoi widget personalizzati in WordPress? I widget ti consentono di trascinare e rilasciare elementi in qualsiasi barra laterale o area predisposta per i widget del tuo sito web. In questa guida ti mostreremo come creare un widget WordPress personalizzato facilmente.

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 su come aggiungere e utilizzare i widget in WordPress .

WordPress consente inoltre agli sviluppatori di creare i propri widget personalizzati. Molti temi e plugin di WordPress sono dotati di widget personalizzati che è possibile aggiungere alle barre laterali.

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

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

Come aggiungere un widget personalizzato in WordPress

Prima di iniziare, sarebbe meglio creare un plug-in specifico per il sito in cui incollare il codice del widget di questo tutorial.

Puoi anche incollare il codice nel file Functions.php del tuo tema . Tuttavia, sarà disponibile solo quando quel particolare tema è attivo.

In questo tutorial, creeremo un semplice widget che saluta i visitatori. Dai un’occhiata a questo codice e incollalo nel tuo plug-in specifico per il sito per vederlo in azione.

// Register and load the widget
function bfast_load_widget() {
    register_widget( 'bfast_widget' );
}
add_action( 'widgets_init', 'bfast_load_widget' );
 
// Creating the widget 
class bfast_widget extends BFast_Widget {
 
function __construct() {
parent::__construct(
 
// Base ID of your widget
'bfast_widget', 
 
// Widget name will appear in UI
__('BFast Widget', 'bfast_widget_domain'), 
 
// Widget description
array( 'description' => __( 'Sample widget based on BFast Tutorial', 'bfast_widget_domain' ), ) 
);
}
 
// 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!', 'bfast_widget_domain' );
echo $args['after_widget'];
}
         
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'bfast_widget_domain' );
}
// Widget admin form
?>

Ora studiamo di nuovo il codice.

Innanzitutto abbiamo registrato “bfast_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 bfast_widget_domain?

WordPress utilizza gettext per gestire la traduzione e la localizzazione. Questo bfast_widget_domaindice a gettext di rendere disponibile una stringa per la traduzione.

Se stai creando un widget personalizzato per il tuo tema, puoi sostituire bfast_widget_domaincon il nome del tuo sito (miosito_widget_domain).

E’ tutto! Speriamo che questo articolo ti abbia aiutato a imparare come creare un widget WordPress personalizzato facilmente.

Related Posts