Creare widget WordPress in pochi semplici passi

Vediamo come creare widget WordPress in pochi semplici passi seguendo alcune linee guida. In questo esempio realizzeremo un widget pubblicitario (ADV).

Avete mai pensato di espandere le funzionalità del vostro tema tramite l’implementazione di nuovi widget “su misura”?. Sono sicuro di si. In questo articolo analizzeremo la struttura portante del coding di un widget di WP e andremo a creare, come esempio concreto, un widget per gestire l’inserimento di pubblicità.

Struttura di un widget WordPress

Un widget di WP è composto da quattro sezioni logiche principali:

• Inizializzazione
• Gestione Frontend
• Gestione Backend
• Update/Salvataggio
• Loading e registrazione del widget

Per avere separato il flusso di codice dei widget da quello del functions.php il mio consiglio è quello di creare un file widget.php da posizionare in qualche sudirectory del tema per poi richiamarlo tramite un semplice include all’interno del functions di WordPress. Ecco come fare:

– Crea un file inc/widget.php

– Collega il file appena creato nel functions.php usando questo codice:

require get_template_directory() . '/inc/widget.php';

Inizializzazione

La prima cosa da fare è inizializzare ed estendere la classe di base che si occupa di gestire l’ecosistema dei widget in WordPress ovvero la classe chiamata WP_Widget.

class adv_widget extends WP_Widget {

function __construct() {
	parent::__construct(
	// Base ID of your widget
	'adv_widget', 

	// Nome
	__('Targetweb - Pubblicità', 'adv_widget_domain'), 

	// Descrizione
	array( 'description' => __( 'Widget per aggiungere pubblicita sul tuo sito by Riccardo Mel - Targetweb.it', 'adv_widget_domain' ), ) 
	);
}//Construct

Come vedete dal codice diamo un ID – Titolo e Descrizione del nostro Widget che compariranno nella lista dei widget disponibili. E’ importante specificare un ID e dominio differenti per ogni elemento che create (adv_widget e adv_widget_domain).

Frontend

Una volta inizializzato diciamo a WordPress cosa deve visualizzare una volta che il widget è stato messo all’interno di una posizione sidebar. Nel nostro caso oltre al classico titolo, facciamo stampare a schermo il codice dell’advertising.

// Widget front-end
public function widget( $args, $instance ) {

//Variabili Widget
$title = apply_filters( 'widget_title', $instance['title'] );
$adv = apply_filters( 'widget_adv', $instance['adv'] );

//before e after sono obbligatori
echo $args['before_widget'];

	//Titolo 
	if ( ! empty( $title ) )
	echo $args['before_title'] . $title . $args['after_title'];

	//Visualizzo codice adv
	echo $instance['adv'];

echo $args['after_widget'];
}

Backend

Subito dopo la fase di frontend, andiamo a specificare quali sono le variabili che deve usare il widget, e predisponiamo il form che ci consentirà di aggiornare e aggiungere il codice pubblicitario e il titolo. Con la variabile defaults andiamo a impostare dei valori di base che vengono inseriti appena l’amministratore del sito posiziona e attiva un widget nella sidebar.

// Widget Backend 
public function form( $instance ) {

   /* Impostazioni di default del widget */
   $defaults = array(
            'title' => 'ADV',
            'adv' =>  'Codice'
        );

    $instance = wp_parse_args( (array) $instance, $defaults );

// Widget admin form
?>

    <p style="margin-bottom:2px;" for="<?php echo $this->get_field_id( 'title' ); ?>"> Titolo:</p>
    <input type="text" style="width:100%;" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" />
    <br />

    <p style="margin-bottom:2px;" for="<?php echo $this->get_field_id( 'adv' ); ?>">Codice:</p>
    <textarea style="width:100%; height:60px;" id="<?php echo $this->get_field_id( 'adv' ); ?>" name="<?php echo $this->get_field_name( 'adv' ); ?>"><?php echo $instance['adv']; ?></textarea>

    <hr />

<?php 
}//Fine Form

Update

Con la fase di update diciamo a WordPress quali sono le variabili da aggiornare una volta che si clicca su “Salva”. Nel nostro esempio avremo ovviamente titolo e codice adv. La funzione update deve avere obbligatoriamente $new_instance (nuovi elementi) e $old_instance (vecchi elementi da modificare) per poter funzionare correttamente.

// Widget Update
	public function update( $new_instance, $old_instance ) {

	    $instance = $old_instance;

	    $instance['title'] = strip_tags( $new_instance['title'] );

	    $instance['adv'] =  $new_instance['adv'];

	    return $instance;

	}

} // Class

NOTA: in questo esempio ho eliminato lo strip_tags nell’elaborazione della variabile adv in quanto potremmo decidere di posizionarci anche un codice HTML come un immagine.

Registrazione Widget

L’ultimo step per la creazione di un widget WordPress è la registrazione del widget che di fatto lo fa comparire e lo rende disponibile all’interno del nostro sito (Sia Backend che Frontend).

// Registra e Carica Widget nel backend WP
function adv_load_widget() {
	register_widget( 'adv_widget' );
}
add_action( 'widgets_init', 'adv_load_widget' );

Esempio concreto: creiamo un widget advertising

Ecco il codice completo per la creazione del Widget per WordPress. A fine articolo troverete anche la possibilità di scaricare questo esempio per poterlo usare sui vostri progetti.

//Widget ADV by Riccardo Mel - targetweb.it

class adv_widget extends WP_Widget {

function __construct() {
	parent::__construct(
	// Base ID of your widget
	'adv_widget', 

	// Widget name will appear in UI
	__('Targetweb - Pubblicità', 'adv_widget_domain'), 

	// Widget description
	array( 'description' => __( 'Widget per aggiungere pubblicita sul tuo sito by Riccardo Mel - Targetweb.it', 'adv_widget_domain' ), ) 
	);
}//Construct

// Widget front-end
public function widget( $args, $instance ) {

//Variabili Widget
$title = apply_filters( 'widget_title', $instance['title'] );
$adv = apply_filters( 'widget_adv', $instance['adv'] );

//before e after sono obbligatori
echo $args['before_widget'];

	//Titolo 
	if ( ! empty( $title ) )
	echo $args['before_title'] . $title . $args['after_title'];

	//Visualizzo codice adv
	echo $instance['adv'];

echo $args['after_widget'];
}

// Widget Backend 
public function form( $instance ) {

   /* Impostazioni di default del widget */
   $defaults = array(
            'title' => 'ADV',
            'adv' =>  'Codice'
        );

    $instance = wp_parse_args( (array) $instance, $defaults );

// Widget admin form
?>

    <p style="margin-bottom:2px;" for="<?php echo $this->get_field_id( 'title' ); ?>"> Titolo:</p>
    <input type="text" style="width:100%;" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" />
 	<br />

    <p style="margin-bottom:2px;" for="<?php echo $this->get_field_id( 'adv' ); ?>">Codice:</p>
    <textarea style="width:100%; height:60px;" id="<?php echo $this->get_field_id( 'adv' ); ?>" name="<?php echo $this->get_field_name( 'adv' ); ?>"><?php echo $instance['adv']; ?></textarea>

 	<hr />

<?php 
}

	// Widget Update
	public function update( $new_instance, $old_instance ) {

	    $instance = $old_instance;

	    $instance['title'] = strip_tags( $new_instance['title'] );

	    $instance['adv'] =  $new_instance['adv'];

	    return $instance;

	}

} // Class 

// Registra e Carica Widget nel backend WP
function adv_load_widget() {
	register_widget( 'adv_widget' );
}
add_action( 'widgets_init', 'adv_load_widget' );

Conclusioni e download

Visita la nostra sezione dedicata a Tutorial e risorse WordPress!

[symple_divider style=”solid” margin_top=”20px” margin_bottom=”20px”]

[symple_column size=”one-half” position=”first”]

Targetweb ti è utile? Offrimi un Caffè e sostieni questo progetto!

Importo minimo della donazione per il download: 1€ -  Il pacchetto download include:

• Widget Pubblicità WordPress
• Istruzioni

Per scaricare il file inserisci la tua email paypal e digita l'importo della donazione (minimo 1€)

▼  

 

Continue

[/symple_column]

[symple_column size=”one-half” position=”last”]

Non vuoi donare niente? 🙁 Scarica comunque condividendo questo articolo sui tuoi social preferiti:

[viral-download file1=”http://www.targetweb.it/download/2014/WidgetADVTargetweb.zip” name1=”Scarica lo script!” url=”http://www.targetweb.it/creare-widget-wordpress-pochi-semplici-passi/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#Wordpress – Widget Advertising FREE” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

[/symple_column]

[symple_divider style=”solid” margin_top=”20px” margin_bottom=”20px”]

Questo articolo ti è stato utile? Condividilo sui tuoi social network preferiti oppure commenta l’articolo qui sotto!