16 Widget

Pubblicato il di

I widget sono strumenti molto utili sia per l’amministratore che per l’utente e di facile utilizzo. In genere vengono posizionati nella sidebar laterale, è quindi sidebar.php, dove deve essere visualizzata l’area del widget.

Il modo più semplice di farlo, creando il widget predefinito della sidebar in functions.php:

register_sidebar();

Il modo più corretto per registrare una sidebar, tuttavia, è quello di creare un hook a widgets_init, il che richiede che scriviate una funzione per register_sidebar() e poi la passiate all’hook, così:

add_action( 'widgets_init', 'smashing_register_sidebars' );

function smashing_register_sidebars() { 
// Registra le sidebar 
register_sidebar();
}

La funzione smashing_register_sidebars() verrà così associato a widgets_init, il che comporterà a sua volta l’esecuzione di register_sidebars().

Aggiungete poi il codice alla parte di sidebar.php dove devono essere visualizzati i widget.

Dovrebbe essere buona norma inserirlo all’interno dei tag <ul>:

<ul id="sidebar"> 
<?php dynamic_sidebar(); ?>
</ul>

Più aree di widget

Se desiderate due aree della sidebar, un’area per l’header e un’area per il footer pronte per i widget, aggiungete il codice riportato di seguito al file functions.php:

add_action( 'widgets_init', 'smashing_register_sidebars' );

function smashing_register_sidebars() {
    // La prima sidebar
    register_sidebar( array(
            'name' => 'First sidebar',
        'id' => 'first-sidebar',
        'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>'    ) );

    // La seconda sidebar
   register_sidebar( array(
           'name' => 'Second sidebar',
       'id' => 'second-sidebar',
       'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
       'after_widget' => '</li>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>'    ) );

   // Sidebar nell'header
  register_sidebar( array(
          'name' => 'Header widget area',
      'id' => 'header-sidebar',
      'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
      'after_widget' => '</li>',
      'before_title' => '<h3 class="widget-title">',
      'after_title' => '</h3>'    ) );

  // Sidebar nel footer
     register_sidebar( array(
             'name' => 'Footer widget area',
         'id' => 'footer-sidebar',
         'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
         'after_widget' => '</li>',
         'before_title' => '<h3 class="widget-title">',
         'after_title' => '</h3>'    ) );
}

Ora avremo le 4 sidebar nell’area widget del backend, dovremo inserire le parti corrispondenti alle sidebar da visualizzare nei vari template file in cui vogliamo visualizzarle.

Sarà necessaria solo l’aggiunta di un nome dell’area del widget al primo tag PHP per definire un’area:

<?php 
dynamic_sidebar( 'the-widget-area-ID' ); 
?>

L’area del footer potrebbe quindi essere simile a quanto riportato di seguito:

<?php 
dynamic_sidebar( 'footer-sidebar' ); 
?>

Personalizzare i widget

Talvolta potreste voler modificare l’output predefinito dei widget, per includerli per esempio nei tag div. Per effettuare questa operazione, registrateli in functions.php mediante un array:

<?php 
register_sidebar(array( 
'before_widget' => '', 
'after_widget' => '', 
'before_title' => '', 
'after_title' => '', ));
?>

Il codice di inclusione si trova all’interno di virgolette singole alla fine di ogni riga. Includete ora il widget in un tag <div> con la classe customwidget e racchiudete il titolo in un tag <div> con la classe customtitle

<?php 
register_sidebar(array( 
'before_widget' => '<div class="customwidget">', 
'after_widget' => '</div>', 
'before_title' => '<div class="customtitle"', 
'after_title' => '</div>', ));
?>