Personalizzare un sito WordPress con i Widget

Personalizzare un sito WordPress con i Widget

Nell’articolo di questa settimana conosceremo i Widget, componenti che ci permettono di inserire contenuti dinamici all’interno del nostro sito in modo pulito e agevole.

Utilizzare i Widget

Il pannello di amministrazione di WordPress ci mette a disposizione un pannello visuale di drag&drop per collocare i Widget dove desideriamo, sotto Aspetto → Widget.

Widget WordPress
Wordpress possiede già diversi Widget che saranno resi disponibili in qualsiasi tema che avremo scelto di utilizzare nel nostro sito (ecco una guida dettagliata che descrive il ruolo di ciascun widget). Le barre laterali (sidebar), al contrario, dipenderanno dal tema installato, variando di numero e posizionamento all’interno del sito. Per utilizzare un widget, ci basterà trascinarlo all’interno della sidebar prescelta per renderlo immediatamente attivo.

Alcuni di voi potrebbero essersi domandati: “Come posso sapere dove appariranno i Widget all’interno del mio sito?” Questo comportamento è determinato a livello di codice all’interno del nostro tema con la seguente chiamata:

<?php dynamic_sidebar($index); ?>

Dove $index (opzionale) è il nome o l’id della sidebar.
Ci tengo a chiarire che le sidebar possono essere in qualunque punto del nostro sito e non necessariamente in una sidebar laterale (come potrebbe fuorviarci il nome). Possiamo quindi averle in header, footer o anche in post e pagine.

Creazione e posizionamento di una sidebar

A volte le sidebar messe a disposizione dal nostro tema potrebbero non essere sufficienti. Non disperiamo! Creare una nuova sidebar richiede pochi e semplici passaggi. Entriamo nel file del tema functions.php e sfruttiamo la funzione:

<?php register_sidebars($n, $args); ?>

Dove $n (opzionale) rappresenta il numero di sidebar da creare e args (opzionale) alcuni argomenti contraddistintivi. Un esempio d’uso potrebbe essere:

<?php    register_sidebar( array(
        'name' => 'La mia sidebar',
        'id' => 'mia-sidebar',
        'description' => 'Una nuova sidebar per i miei widget',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );
?>

Dove before/after widget è il codice markup che sarà messo prima e dopo ai widget inseriti e before/after title al titolo inserito. I primi tre argomenti sono autoesplicativi.
Se l’operazione è andata a buon fine, vedremo comparire la sidebar all’interno del pannello di amministrazione, pronta all’uso.

Ora che abbiamo creato la nostra sidebar, dobbiamo decidere dove posizionarla. Per farlo inseriamo il seguente codice all’interno del file scelto:

<?php     if ( !(is_active_sidebar( 'La mia sidebar' )) ); ?>
//Fallback
<?php endif; ?>

Dove in fallback possiamo inserire del contenuto di markup a nostro piacimento nel caso in cui la nostra sidebar non contenga widget.

Creare un Widget

Il web è ricco di risorse utili ed esistono numerosi Widget messi a disposizione dalla community che potrebbero fare al caso nostro. Talvolta però potremmo preferire la creazione un Widget fatto su misura per le nostre esigenze.

Se i contenuti che desideriamo inserire sono statici e preferiamo evitare la creazione da zero di un Widget, potremmo direttamente sfruttare il Widget di Testo messo a disposizione da WordPress, che ci consente di inserire del contenuto HTML libero. Possiamo poi dare uno stile al nostro widget grazie al markup che WordPress inserisce automaticamente, con un id univoco.

Se desideriamo invece creare un Widget dinamico, dovremo ricorrere alla creazione di un plugin. Utilizzando la programmazione ad oggetti (compatibile dalle versioni >= 2.8) lo scheletro che lo compone sarà:

<?php
class Mio_Widget extends WP_Widget {

    public function __construct() {
        // Setta i parametri base del widget (nome, descrizione, id, ecc..)
    }

    public function form( $parametri ) {
        // Permette la creazione di form per salvare informazioni nel database
    }

    public function update( $nuovi_parametri, $vecchi_parametri) {
        // Processa i parametri da salvare nel database
    }

    public function widget( $args, $parametri ) {
        // stampa il contenuto del widget
    }

}
register_widget( 'Mio_Widget' );
?>

A titolo di esempio, creiamo un semplicissimo widget che stampa “Hello World”.

  • Creare il file del plugin
    Entriamo nella cartella /wp-content/plugins/ del nostro sito e creiamo la directory hello-world. Inseriamo al suo interno il file hello-world.php.
  • Inserire l’informazione del plugin
    Nel file creato, inseriamo l’header del plugin per far si che WordPress lo riconosca:

    <?php
    /*
    Plugin Name:Hello world
    Plugin URI: https://blog.artera.net
    Description:Il mio primo plugin
    Version: 1.0
    Author: blog artera
    Author URI: https://blog.artera.net
    */
    ?>
  • Attivare il plugin
    Salviamo il file e entriamo nella voce Plugin dal pannello di amministrazione. Scorriamo la lista e attiviamo il plugin appena creato.

    Attivazione Plugin WordPress

  • Attivare il widget
    Per far ora comparire il widget nel pannello di amministrazione dei Widget, creiamo una nuova nuova classe che estende quella di default di WordPress nel nostro file, e attiviamola come segue:

    <?php
    class Hello_World_Widget extends WP_Widget {
    
    }
    
    add_action('widgets_init', create_function('', 'return register_widget("Hello_World_Widget");'));
    ?>
  • Inserire i parametri base del widget
    All’interno della classe appena creata, inseriamo la funzione per settare i parametri principali del widget:

    <?php     public function __construct() {
            parent::__construct(
                 'hello_widget', // ID
                'Hello Widget', // Nome
                array( 'description' => 'Un widget che saluta' )
            );
        }
    
    ?>
  • Creazione dell’output “Hello World”
    Inseriamo la funzione widget sempre all’interno della nostra classe

    <?
        public function widget( $args, $parametri ) {
    
            echo __( 'Hello, World!');
    
        }
    ?>
  • Codice completo dell’esempio:

    <?php
    /*
    Plugin Name:Hello world
    Plugin URI: https://blog.artera.net
    Description:Il mio primo plugin
    Version: 1.0
    Author: blog artera
    Author URI: https://blog.artera.net
    */
    ?>
    
    <?php
    
    class Hello_World_Widget extends WP_Widget {
    
        public function __construct() {
            parent::__construct(
                 'hello_widget', // ID
                'Hello Widget', // Nome
                array( 'description' => 'Un widget che saluta' )
            );
        }
    
        public function widget( $args, $parametri ) {
            echo __( 'Hello, World!');
        }
    
    }
    
    add_action('widgets_init', create_function('', 'return register_widget("Hello_World_Widget");'));   
    ?>

    Se tutto è andato a buon fine, torniamo nel menu Widget dal pannello di controllo e troveremo il nostro widget appena creato.. pronto a salutare il mondo!

    Hello Widget
    Trasciniamolo nella sidebar desiderata per vederlo in azione. Ben fatto!