Je continue tranquillement mon apprentissage de WordPress, en développant le thème. Au menu aujourd’hui, les Widgets, qui sont à l’interface (au thème), ce que les plugins sont au moteur de WordPress. Ils permettent à un utilisateur, de personnaliser son thème sans avoir besoin de se plonger dans le code PHP. Pour accueillir ces éléments, les thèmes doivent subir quelques transformations que je vous propose de voir maintenant.

Structure d’une sidebar statique

Une sidebar statique classique est composée de plusieurs blocs, chacun avec un titre, et des éléments organisés en liste.
Les blocs peuvent eux-mêmes faire partie d’une liste, comme dans l’exemple ci-dessous:

<ul id="sidebar">
    <li class="blogroll">
        <h2>Liste de liens</h2>
        <ul>
            <li><a href="url site 1">Site 1</a></li>
            <li><a href="url site 2">Site 2</a></li>
            <li><a href="url site 3">Site 3</a></li>
        </ul>
    </li>
    <li class="archives">
        <h2>Archives</h2>
        <ul>
            <li>Janvier 2008</li>
            <li>Février 2008</li>
            <li>Mars 2008</li>
        </ul>
    </li>
</ul>

ce qui donne a peu près le résultat suivant:

Sidebar statique

Ce code HTML est obtenu en plaçant les lignes suivantes dans le fichier sidebar.php:

<ul id="sidebar">
    <li class="blogroll">
        <?php 
            wp_list_bookmarks('title_li=Liste de liens&title_before=<h2>&title_after=</h2>'); 
        ?>
    </li>
    <li class="archives">
        <h2>Archives</h2>
        <?php 
              wp_get_archives('type=monthly&show_count=0'); 
         ?>
    </li>
</ul>

Ce code est simple, mais ne permet aucune modification du contenu de la barre latérale, sans éditer le fichier sidebar.php et mettre les mains dans le code PHP.

Structure d’une sidebar dynamique

Rendre dynamique le contenu d’une sidebar implique deux opérations:

• La transformation du fichier sidebar.php
• L’ajout de quelques lignes dans le fichier functions.php

Ces deux fichiers se trouvent dans le répertoire du thème que vous avez sélectionné.

Le fichier sidebar.php

La structure générale du fichier sidebar.php devient:

1
2
3

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) {
    /* lignes à exécuter si les widgets ne sont pas activés ou si aucun widget n'est sélectionné */
}

Si l’on reprend la barre latérale décrite dans le paragraphe précédent, nous obtenons:

<ul id="sidebar">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) { ?>
    <li class="blogroll">
	<?php wp_list_bookmarks('title_li=Liste de liens&title_before=<h2>&title_after=</h2>'); ?>
    </li>
    <li class="archives">
        <?php wp_get_archives('type=monthly&show_count=1'); ?>
    </li>
<?php } ?>
</ul>

Ce qui veut dire:

• si les widgets sont activés, la fonction PHP dynamic_sidebar affichera les widgets sélectionnés dans l’interface d’administration du site,
• si les widgets ne sont pas activés, les blocs Liste des liens et Archives seront affichés.

Le fichier functions.php

Le fichier functions.php doit contenir au minimum les lignes suivantes:

1
2
3
4

<?php
    if ( function_exists('register_sidebar') )
        register_sidebar();
?>

Premiers tests

Les deux modifications précédentes rendent complètement dynamique notre sidebar. Il reste maintenant à tester le résultat. Nous allons pour cela, aller dans l’interface d’administration pour choisir les éléments que nous souhaitons voir apparaître dans notre sidebar:

Panneau de configuration des widgets

Au niveau du site la sidebar devient:

Barre latérale dynamique

Personnalisation

Les modifications effectuées fonctionnent, mais avec quelques imperfections d’affichage.
Il est possible de personnaliser les widgets, grâce aux paramètres de la fonction register_sidebar(). La syntaxe est la suivante:

<?php $widget_option = array(
    'before_widget' => chaîne de caractère placée avant le widget,
    'after_widget'   => chaîne de caractère placée après le widget,
    'before_title'     => chaîne de caractère placée avant le titre,
    'after_title'       => chaîne de caractère placée après le titre
);
register_sidebar( $widget_options );
?>

Exemple:

1
2
3
4
5
6
7
8

<?php $widget_option = array(
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'   => '</li>',
    'before_title'     => '<h2 class="titre">',
    'after_title'       => '</h2>'
);
register_sidebar( $widget_options );
?>

Les sigles %1$s et %2$s seront remplacés, lors de l’exécution, par le nom du widget, et le nom de la fonction PHP appelée.

Dans notre cas, les paramètres sont simplement:

1
2
3
4
5
6
7
8
9
10

<?php 
   if ( function_exists('register_sidebar') ) {
        register_sidebar( array(
                'before_widget' => '',
                'after_widget' => '',
                'before_title' => '<h2>',
                'after_title' => '</h2>' ) 
        );
}
?>

Ce qui donne le résultat suivant:

Barre latérale dynamique

Les codes %1s et %2s ne fonctionnent malheureusement que pour before_widget et after_widget…

Plusieurs barres latérales

Tous les exemples présentés s’appliquent à une seule sidebar. Nous voyons cependant de plus en plus de sites arborer deux sidebars. Comment procéder dans ce cas?

Là encore, les modifications portent sur les deux fichiers sidebar.php et functions.php.

Fichier sidebar.php

Dans ce fichier, on utilise simplement un paramètre de la fonction dynamix_sidebar, qui permet de spécifier l’identifiant des sidebars (1,2, …n).

1
2
3
4
5
6
7
8
9
10
11
12

<div id="sidebar-left">
    <?php
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) { ?>
            Les widgets de la sidebar de gauche font s'afficher ici
    <?php } ?>
</div> 
<div id="sidebar-right">
    <?php
    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) { ?>
            Les widgets de la sidebar de droite vont s'afficher ici.
    <?php } ?>
</div>

L’identifiant spécifié est 1 pour la première sidebar, et 2 pour la seconde. Avec la version 2.5 de WordPress, il est possible de remplacer ces identifiants numériques par des noms.

Fichier functions.php

De la même façon, il suffit dans ce fichier, de déclarer deux sidebars au lieu d’une seule.

1
2
3
4
5
6

<?php
   if ( function_exists('register_sidebar') ) {
      register_sidebars(1, array(paramètre pour la sidebar de gauche));
      register_sidebars(2, array(paramètre pour la sidebar de droite));
   }
?>

Attention au “S”. Il ne s’agit de register_sidebars et non de register_sidebar.
Le tableau passé en paramètre est le même que celui évoqué précédemment, avec un élément supplémentaire: name

1
2
3
4
5
6
7

array(
	'name'          => Nom de la sidebar
        'before_widget' => chaîne de caractère placée avant le widget,
        'after_widget'  => chaîne de caractère placée après le widget,
        'before_title'  => chaîne de caractère placée avant le titre,
        'after_title'   => chaîne de caractère placée après le titre		
)

Avec les modifications précédentes, nous pouvons maintenant configurer nos deux sidebars dans l’interface d’administration.

Pourquoi uniquement la sidebar

Comme le suggère Bruno Bichet, avec son concept de WAR (widget Area), même si la documentation parle de sidebar, rien n’empêche d’utiliser les widgets ailleurs que dans les barres latérales.
Cette technique permettrait de rendre paramétrable l’entête, le pied de page, ou n’importe quel autre élément du thème.

Conclusion

Nous venons de voir comment rendre un thème compatible avec les widgets. Globalement, il faut modifier deux fichiers, en y ajoutant 4 lignes de PHP pour obtenir ce résultat ! J’expliquerai dans un prochain article, comment créer ses propres Widgets.

Références

• (en) Widgetizing Themes - Automatic,
• (fr) Bruno Bichet - La sidebar à la loupe, comprendre les widgets et déclarer une “WAR”
  - CSS4Design.
• (en) Plugins/WordPress Widgets - WordPress Codex

Articles de la même série

1. Développer avec WordPress (10 May)
2. WordPress: Les archives par mois et par année (18 Mar)
3. WordPress: Développer son propre thème (22 May)
4. WordPress: Traduire un thème (28 May)
5. Thème WordPress: La page erreur 404 (09 Jun)
6. WordPress 2.5.x: les shortcodes (14 Jun)
7. WordPress: Thèmes et Widgets (Cet article)
8. WordPress et les pièces jointes (01 Aug)
9. WordPress: Développer ses propres widgets (25 Aug)