Come creare un widget WordPress personalizzato (passo dopo passo)

I widget consentono di aggiungere elementi non contenutistici in una barra laterale o in qualsiasi area predisposta per i widget sul vostro sito WordPress. Potete usarli per aggiungere banner, pubblicità, moduli di iscrizione alla newsletter e altri elementi al vostro sito web.

È anche possibile creare un widget personalizzato per incorporare funzioni uniche con un tocco personalizzato, come i feed dei media, i post recenti o i tag HTML.

Noi di WPBeginner utilizziamo widget personalizzati per visualizzare diversi tipi di contenuti nella barra laterale del nostro sito web. In questo articolo vi mostreremo come creare un widget personalizzato per WordPress, passo dopo passo.

Nota: questa esercitazione è rivolta agli utenti di WordPress fai da te che stanno imparando lo sviluppo e la codifica di WordPress.

Che cos’è un widget di WordPress?

I widget di WordPress contengono pezzi di codice che possono essere aggiunti alle barre laterali del vostro sito web o alle aree predisposte per i widget.

Considerateli come moduli che potete utilizzare per aggiungere diversi elementi e funzionalità al vostro sito.

Per impostazione predefinita, WordPress viene fornito con un set standard di widget che è possibile utilizzare con qualsiasi tema WordPress. Per maggiori dettagli, consultate 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 e plugin premium di WordPress sono dotati di widget personalizzati da aggiungere alle barre laterali.

Ad esempio, è possibile aggiungere a una barra laterale un modulo di contatto, un modulo di accesso personalizzato, una galleria fotografica, un modulo di iscrizione a una mailing list e altro ancora, senza dover scrivere alcun codice.

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

Prima di creare un widget personalizzato in WordPress

Se state imparando la codifica di WordPress, avrete bisogno di un ambiente di sviluppo locale. Questo vi dà la libertà di imparare e testare le cose senza la preoccupazione che il vostro sito sia attivo.

È possibile installare WordPress in locale su Mac utilizzando MAMP o su Windows utilizzando WAMP.

Se avete già un sito live, potete spostarlo su un host locale. Per maggiori dettagli, consultate la nostra guida su come spostare un sito WordPress live su un server locale.

Successivamente, ci sono diversi modi per aggiungere il codice del widget personalizzato in WordPress.

L’ideale sarebbe creare un plugin specifico per il sito e incollarvi il codice del widget. In questo modo si può add-onare a WordPress del codice che non dipende dal tema di WordPress.

È anche possibile incollare il codice nel file functions.php del proprio tema. Tuttavia, sarà disponibile solo quando quel particolare tema è attivo.

Un altro strumento che si può utilizzare è il plugin WPCode, che consente di aggiungere facilmente codice personalizzato al sito web.

In questo tutorial, creeremo un semplice widget che si limita ad accogliere i visitatori. L’obiettivo è quello di familiarizzare con la classe dei widget di WordPress.

Pronti? Iniziamo.

Creare un widget di base di WordPress

WordPress è dotato di una classe WordPress Widget integrata. Ogni nuovo widget di WordPress estende la classe WordPress Widget.

Nel manuale dello sviluppatore di WordPress sono menzionati 19 metodi che possono essere utilizzati con la classe WP Widget.

Tuttavia, ai fini di questa esercitazione, ci concentreremo sui seguenti metodi.

• __construct() : Questa è la parte in cui si creano l’ID del widget, il titolo e la descrizione.
• widget: qui si definisce l’output generato dal widget.
• form : In questa parte del codice si crea il modulo con le opzioni del widget per il backend.
• update: questa è la parte in cui si salvano le opzioni del widget nel database.

Per creare un widget personalizzato, è possibile copiare e incollare il seguente frammento di codice nel 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 vostro sito WordPress è utilizzare WPCode. È il miglior plugin per snippet di codice che aiuta a gestire e inserire snippet di codice sul sito senza rischiare di rompere nulla.

Per prima cosa, dovrete installare e attivare il plugin WPCode sul vostro sito. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.

Dopo l’attivazione, potete andare su Code Snippets ” + Add Snippet dal pannello di amministrazione di WordPress. Da qui, selezionate l’opzione “Aggiungi il tuo codice personalizzato (nuovo snippet)”.

Successivamente, è possibile incollare il codice del widget personalizzato nell’area Anteprima codice.

È inoltre necessario fare clic sul menu a discesa “Tipo di codice” e selezionare l’opzione “Snippet PHP”.

Successivamente, è possibile scorrere verso il basso e selezionare il metodo di inserimento del codice.

WPCode consente di scegliere dove eseguire il codice. Per questa esercitazione, è possibile utilizzare le opzioni predefinite ed eseguirlo ovunque.

Una volta terminato, è possibile scorrere indietro fino all’inizio per salvare lo snippet.

Per attivare lo snippet, è sufficiente fare clic sull’attivazione/disattiva.

Per saperne di più, consultate la nostra guida su come add-on il codice personalizzato al vostro sito WordPress.

Dopo aver aggiunto il codice a WordPress, è necessario andare alla pagina Aspetto ” Widget nel pannello di amministrazione di WordPress.

Quindi, fare clic sull’icona “Più” per aggiungere un blocco, cercare “WPBeginner Widget” e selezionare il nuovo widget.

Questo widget ha un solo campo modulo da compilare.

È possibile aggiungere il testo e fare clic sul pulsante “Aggiorna” per memorizzare le modifiche.

Ora è possibile visitare il proprio sito web WordPress per vedere il widget personalizzato in azione.

Ecco un esempio di come appare sul nostro sito demo.

Aggiunta di un widget personalizzato nell’editor classico di WordPress

Se si utilizza l’editor di widget classico per aggiungere nuovi widget al sito, il processo sarà simile.

Nell’elenco dei widget disponibili sarà presente un nuovo widget chiamato “WPBeginner Widget”. È necessario trascinare e rilasciare questo widget nella barra laterale.

Quindi, inserire un titolo e fare clic su “Salva” per salvare le impostazioni del widget.

Il nuovo widget personalizzato sarà ora attivo sul vostro sito web.

Ora studiamo di nuovo il codice.

Per prima cosa, abbiamo registrato ‘wpb_widget’ e caricato il nostro widget personalizzato. Dopodiché, abbiamo definito cosa fa il 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 potreste voler chiedere. Per esempio, qual è lo scopo del dominio di testo?

WordPress utilizza “gettext” per gestire la traduzione e la localizzazione. Questo dominio di testo e _e indicano a ‘gettext’ di rendere disponibile una stringa per la traduzione. Per saperne di più, consultate la nostra guida su come trovare temi WordPress pronti per la traduzione.

Se si sta creando un widget personalizzato per il tema, si può sostituire textdomain con il dominio di testo del tema.

In alternativa, è possibile utilizzare un plugin per la traduzione di WordPress per tradurre facilmente WordPress e creare un sito WordPress multilingue.

Bonus: aggiungere stili personalizzati ai widget di WordPress

Una volta creato un widget di WordPress, è possibile aggiungervi stili personalizzati. Questo può migliorare l’aspetto del sito web, mantenere la coerenza e attirare l’attenzione su informazioni importanti.

Per farlo, visitare la pagina Aspetto ” Widget e aggiungere il widget che si desidera personalizzare. A questo punto, nel pannello di blocco sulla destra, si vedranno alcune opzioni per modificarne i colori e la tipografia.

Tuttavia, se il widget non visualizza questa opzione, è possibile personalizzarlo aggiungendo classi CSS dopo aver aperto la scheda “Avanzate”.

A questo punto, è possibile aggiungere CSS personalizzati al tema di WordPress, mirando a quella particolare classe CSS.

A tale scopo, si deve andare alla pagina Aspetto ” Personalizza e passare alla scheda CSS aggiuntivi. Qui si vedrà l’anteprima del sito web con una boxed in cui aggiungere le regole CSS.

È ora possibile utilizzare CSS personalizzati per personalizzare l’aspetto del widget. Per maggiori dettagli, consultate il nostro tutorial su come add-on di stili personalizzati ai widget di WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come creare facilmente un widget personalizzato per WordPress. Potreste anche consultare la nostra guida su come disabilitare i blocchi di widget in WordPress e il nostro tutorial su come rimuovere i widget inattivi in WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.