WordPress: Thèmes et Widgets

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
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
Panneau de configuration des widgets

Au niveau du site la sidebar devient:

Barre latérale dynamique
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
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

8 thoughts on “WordPress: Thèmes et Widgets”

  1. Bonjour,

    je voudrais que les liens de ma sidebar soient différents d’un page à l’autre.
    Par exemple, je voudrais que sur une page il n’y ait que 3 liens, et sur une autre page, je souhaiterais voir apparaitre des liens totalement différents.

    Comment puis-je faire? car pour le moment, j’ai les mêmes liens qui s’affichent sur chaque page, sachant que les pages ne parlent pas toutes de la même chose!

    Merci pour l’info!!

    Reb

  2. @starweb: Une méthode pourrait etre de creer deux sidebars, et de faire apparaitre l’une ou l’autre selon la page, en modifiant le fichier sidebar.php du theme. Pour la page d’accueil, un test du type is_home() suffit …

  3. Très bon article toutefois je cherche le moyen de faire apparaitre la sidebar normalement sauf pour la page d’accueil ou j’aimerai enlever un widget. Quelqu’un a une idée?

  4. Bonjour, je viens de lire cet article très intéressant, pour répondre à Rico, oui tu peux avoir plusieurs sidebar, par exemple une pour la page d’accueil et une ou plusieurs pour tes autres pages :
    if (function_exists(‘register_sidebar’))
    {
    register_sidebar(array(
    ‘name’ => ‘Home Sidebar’,
    ‘before_widget’ =>  »,
    ‘after_widget’ =>  »,
    ‘before_title’ =>  »,
    ‘after_title’ =>  »,
    ));

    register_sidebar(array(
    ‘name’ => ‘Page Sidebar’,
    ‘before_widget’ =>  »,
    ‘after_widget’ =>  »,
    ‘before_title’ =>  »,
    ‘after_title’ =>  »,
    ));
    }

  5. Je suis en conges en ce moment, donc pas trop dispo pour te repondre tres precisement. Desole.
    Pour resumer:
    – Il est possible de faire a peu pres ce que l’on veut, mais cela necessite un peu de code PHP,
    – Les widgets standards ne sont pas, pour la plupart, multi-instanciables, c’est-à-dire qu’il ne peut apparaître qu’une seule fois sur le blog. Mais l’API actuelle des widgets, et la future, permet de faire apparaître plusieurs fois le même widget avec des paramètres différents a chaque fois.

    Globalement deux strategies pour faire ce que tu souhaites:
    – soit faire plusieurs fichiers sidebar.php, et charger ces fichiers en fonction de conditions que tu fixes,
    – soit utiliser des widgets multi-instanciables, et gérer leurs conditions d’affichage.

    Dans les deux cas, il faut du code PHP.

  6. Merci,

    Il semble cependant qu’un widget utilisé pour une sidebar ne soit plus disponible pour être utilisé dans une autre. Il y a t-il alors plus simple que de déclarer une sidebar par widget ?

  7. Oui, tout a fait.
    Vous pouvez creer autant de Sidebar que vous voulez, puis dans le fichier sidebar.php, déclarer les sidebars en fonctions de conditions specifiques.
    Je ne peux pas repondre de facon plus detaillee pour l’instant, je n’ai pas les outils disponibles pour cela, mais je ferai certainement un petit article pour decrire la methode.

  8. Bonjour,

    Merci pour ce billet détaillé.
    J’aimerais savoir si il est possible de créer deux sidebar distinctes de manière à afficher des widgets différents en fonction de la page ou l’on se trouve.

    Par avance merci
    Rico

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *