I widgets sono elementi del sito, come l’elenco delle categorie, i tagclouds, gli ultimi post inseriti e altro ancora, che possono essere inseriti attraverso la sezione Aspetto > Widgets della dashboard di WordPress. Inoltre, è possibile installare dei plugin che aggiungono altri widget a quelli predefiniti.

I widget sono visualizzati in genere nella sidebar ma con opportune modifiche si può visualizzare il widget in qualsiasi parte del tema.

Per far si che il tema supporti i widget è necessario compiere due operazioni:

  1. registrare il widget nel file functions.php
  2. definire l’area del widget in un file template del tema

L’area predefinita

WordPress prevede la presenza di un’area predefinita dei widget che può essere visualizzata in qualsiasi posizione del tema attraverso la funzione dynamic_sidebar(). Nell’esempio, l’area dei widget è definita nel modello sidebar.php del tema, ma potrebbe essere spostata in qualsiasi altro file modello (header, footer, …).

<aside>
<h2>Sidebar</h2>
<ul>
<?php dynamic_sidebar(); ?>
<?php wp_meta(); ?>
</ul>
</aside>

La funzione dynamic_sidebar() è posizionata all’interno di un elemento ul perché, se non viene specificato diversamente, WordPress rappresenta ciascun widget all’interno di un elemento li.

La definizione dell’area dei widget non è sufficiente per gestire i widget attraverso la sezione Aspetto >Widgets che, se attivata, mostrerebbe il seguente messaggio di errore.

Messaggio di errore se i widget non sono abilitati nel tema

Messaggio di errore se i widget non sono abilitati nel tema

Per inserire i widget, attraverso il pannello di amministrazione, è necessario registrare l’area dei widget, inserendo nel file functions.php la funzione register_sidebar().

<?php
       // ...
       register_sidebar();
?>

Ora sarà possibile gestire i widget con la sezione Aspetto >Widgets del pannello di amministrazione di WordPress.

Utilizzare più aree dei widget

Per definire più aree dei widget si può utilizzare la funzione register_sidebar(), nel file functions.php, indicando il nome e l’id di ciascun’area.

// ...
register_sidebar(array(
       'name'=>'Sidebarleft',
       'id'=>'sidebar-1',
));
 
register_sidebar(array(
       'name'=>'SidebarFooter',
       'id'=>'sidebar-2',         
));

Dopo aver registrato le aree dei widget utilizzare la funzione dynamic_sidebar() indicando come argomento l’id della sidebar da visualizzare.

<aside>
<h2>Sidebar</h2>
<ul>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php wp_meta(); ?>
</ul>
</aside>

In questo esempio la sidebar-1 viene inserita nel file sidebar.php.

In alternativa si può utilizzare anche la funzione register_sidebars() per creare più aree dei widget con una sola istruzione:

register_sidebars(2 [,$array]);

Nell’esempio, vengono create 2 aree dei widget indicate come primo argomento mentre, come secondo argomento, è possibile specificare un array con cui si definiscono le caratteristiche delle singole aree (vedi oltre).

In questo caso l’identificatore della sidebar viene automaticamente attribuito da WordPress nel formato sidebar-1 e sidebar-2.
Quando si definiscono nel tema più aree dei widget si dovrebbe utilizzare la funzione condizionale is_active_sidebar() per verificare che l’area contenga dei widget da visualizzare (cioè sia attiva) altrimenti si inserirà nel documento un elemento ul senza contenuti.

<aside>
 <h2>Sidebar</h2>
 <?php if (is_active_sidebar('Sidebar-1')) : ?>
 <ul id="sidebar">
 <?php dynamic_sidebar( 'Sidebar-1' ); ?>
 <?php wp_meta(); ?>
 </ul>
 <?php endif; ?>
 </aside>

Utilizzando il codice dell’esempio precedente l’area dei widget viene visualizzata solo se è attiva, cioè se contiene uno o più widget.

Modificare la marcatura

La funzione dynamic_sidebar() visualizza i widget nell’ordine in cui si trovano in ciascun’area come definito nell’area Aspetto >Widgets.

La funzione register_sidebar() consente di definire alcune caratteristiche dei widget, tra cui: l’elemento che contiene il widget (nell’esempio section) e l’elemento da usare per il titolo (nell’esempio h3).

// ...
 register_sidebar(array(
 'name'=>'Sidebarleft',
 'id'=>'sidebar-1',
 'before_widget' => '<section id="%1$s" class="widget %2$s">',
 'after_widget'  => '</section>',
 'before_title' => '<h3 class="title">',
 'after_title' => '</h3>'
 ));

Se si utilizza l’esempio precedente è necessario rimuovere l’elemento ul nell’area del widget che perciò diventerà come quella mostrata nell’esempio seguente.

<aside>
 <h2>Sidebar</h2>
 <?php if (is_active_sidebar( 'sidebar-1' ) ) : ?>
 <?php dynamic_sidebar( 'sidebar-1' ); ?>
 <?php endif; ?>
 <?php wp_meta(); ?>
 </aside>

Per altre informazioni consultare la documentazione ufficiale di WordPress per la funzione dynamic_sidebar().