Site icon Tosolini.info

WordPress: Come creare un Widget

Walter Tosolini

Quest’oggi vediamo come creare un widget per WordPress.

I Widget sono delle porzioni di codice che vengono mostrate solitamente nelle barre laterali e nel piè di pagina (footer), ma in realtà potrebbero essere utilizzate anche in modo più ampio,  ma non all’interno di un Post se non attraverso appositi plugin.

Perchè creare un Widget?

Perchè spesso possono esserci delle esigenze che i Widget di base forniti da WordPress non sono sufficienti. La possibilità poi di controllarne o aggiungere opzioni è un ulteriore plus offerto dal nostro CMS – Blog Engine preferito.

La prima cosa ovviamente è avere uno scopo per creare un Widget, e se siete qui è probabile che una idea già ce l’abbiate.
I Widget funzionano attraverso quattro funzioni logiche:

Ora ogni tema di wordpress può avere la sua organizzazione, in genere è consigliato dividere le funzionalità dei widget in singoli files. Quindi l’esempio che prenderemo in considerazione prevede che i widget saranno inseriti all’interno della cartella /includes/widgets e il nostro file si chiamerà nuovowidget.php.

Per prima cosa dovremo fare in modo che il file venga caricato nel tema attraverso PHP con la funzione require_once


require_once get_template_directory() . '/includes/widget/nuovowidget.php';

Ora nel file nuovowidget.php andremo ad aggiungere il codice per parti.

Inizializzazione:


/**
 * Aggiunge il Nuovo_Widget.
 */
class Nuovo_Widget extends WP_Widget {
 /**
* Registra il widget con WordPress.
*/
function __construct() {
parent::__construct(
'nuovo_widget', // ID univoco del widget
__( 'Nuovo Widget Titolo', 'nuovo_widget_domain' ), //nome aggregazione domain
array( 'description' => __( 'Descrivo il widget', 'nuovo_widget_domain' ), ) // Descrizione del widget
);
}

La prima parte vede la creazione di una nuova classe chiamata Nuovo_Widget all’interno della funzione core WP_Widget.
La seconda parte registra alcune parti univoche come l’id del widget e il cosiddetto domain.

Fronted:

Creiamo il frontend, ovvero cosa verrà visualizzato nel sito. Nel nostro caso per semplificare ci sarà un titolo e un campo testo.


    /**
     * Front-end display del widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Argumeni del Widget obbligatori .
     * @param array $instance Valori salvati nel database.
     */
    public function widget( $args, $instance ) {

                echo $args['before_widget'];
        if ( ! empty( $instance['title'] ) ) {
            echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
        }
                echo $instance['text'];
        echo $args['after_widget'];
    }

In questo i valori $args before_widget e after_widget  come before e after title sono parte del codice di WordPress e vanno a richiamare specifiche classi CSS che serviranno ad ottimizzare l’impaginazione. Nel caso del titolo una istanza if verifica se il titolo ha un valore e quindi mostrarlo, o non processare nulla. Infine viene richiamato il contenuto dalla variabile $instance (come per il titolo) con lo specifico array che estrapola il testo salvato sul DataBase.

Backend:

Creazione della parte che vedrà l’amministratore nella pagina dei widget.

<?php
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Valori salvati nel Database in precedenza.
*/
public function form( $instance ) {
$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'Nuovo Titolo', 'nuovo_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="titolowidget" 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>
<p>
<label for="<?php echo $this->get_field_id( 'text' ); ?>"><?php _e( 'Testo:' ); ?></label>
<textarea class="testolibero" id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>"><?php echo $instance['text']; ?></textarea>
</p>
<?php
}
?>

La porzione di codice mostra la creazione di una Form che servirà ad immettere i dati nel DataBase e allo stesso tempo leggerli qual’ora siano disponibili. La prima cosa che vediamo è appunto il richiamo della funzione di WordPress “form” che ne permette la creazione. Quindi chiederemo al database se nella variabile $instance esiste un array viceversa proporrà un testo predefinito in “Nuovo Titolo“. Vengono poi creati i campi di immissione per il titolo e per il testo.

Update e Salvataggio:

/**
 * @see WP_Widget::update()
 *
 * @param array $new_instance Valori inviati come salvati.
 * @param array $old_instance Valori salvati in precdenza nel DataBase.
 *
 * @return array Aggiornato, i dati vengono salvati.
 */
 public function update( $new_instance, $old_instance ) {
 $instance = array();
 $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
 $instance['text'] = $new_instance['text'];
 return $instance;
 }
 
} // Fine della classe Nuovo_Widget

La funzione update gestisce due variabili,  la nuova e vecchia istanza. $instance, come abbiamo visto dalle variabili in precedenza è un array. Vengono quindi processati gli valori di title e text della variabile ed aggiornati i record nel DataBase.
A questo punto il file nuovowidget.php è terminato, possiamo salvarlo appunto all’interno della cartella /includes/widget.

Registrazione del Widget:

Siamo alla fine del lavoro, ovvero la registrazione del Widget che lo farà apparire nel backend e frontend. Questa porzione di codice andrà immessa nella parte del tema dove vengono inizializzati i Widget, o nel caso non ve ne siano potete immetterlo dentro il file functions.php.

// registra Nuovo_Widget
function register_nuovo_widget() {
register_widget( 'Nuovo_Widget' );
}
add_action( 'widgets_init', 'register_nuovo_widget' );

Fate attenzione che Nuovo_Widget (con tanto di maiuscole e minuscoli rispettate) è poi null’altro che il nome della classe creata all’interno del file nuovowidget.php.

Maggiori informazioni presso il Codex Ufficiale.

Exit mobile version