Le mot « widget » est un peu un mot barbare en informatique. Déjà, c’est un mot-valise : l’association de « window » et « gadget ». Et il peut désigner pleins de choses différentes. Du coup, on s’y perd. Mais il est une chose où l’on peut se mettre d’accord, c’est qu’un widget, ça a une seule fonctionnalité.
Widget WordPress = mini plugin
Chez WordPress, un Widget (notez la majuscule) c’est un module qui s’affiche dans votre sidebar. Enfin, je dis sidebar… mais il est tout à fait possible de créer 4 colonnes dans le footer pour accueillir des Widgets ! Le thème Twenty Ten le fait d’ailleurs. Ce qu’il faut comprendre, c’est que les Widgets sont intégrés à WordPress (et non au thème). Ce sont des fonctionnalités basiques que pouvez ajouter, trier, administrer.
Concrètement, un Widget est un bloc de code indépendant :
- un calendrier
- une liste d’archives mensuelles
- les derniers Posts
- les derniers commentaires
- un bloc de texte
- une blogoliste
- un formulaire de recherche
- une liste des Pages
- etc.
Et là vous vous dites « Archives mensuelles, formulaire de recherche, derniers Posts… On sait déjà faire tout ça !« . Et là je vous dis… oui. Mais nous, on passe par les fonctions PHP dans les templates, on est des fous !
Personnellement, j’ai rarement eu à utiliser les Widgets car je suis un développeur de thème. Du coup, toutes mes fonctionnalités passent par le thème et non par le panel d’aministration du WP avec ces Widgets prédéfinis. Mais ce qui est facile pour nous ne l’est pas forcément pour tous… Du coup, il faut que votre thème puisse accueillir des Widgets…
Rendre son thème Widget-ready
La première fois que j’ai voulu activer les Widgets pour mon thème, j’ai dû passer par la case où tout le monde passe la première fois… L’explication par Automattic (la boîte derrière WordPress) pour rendre votre thème Widget-ready. L’article n’est pas trop compliqué, mais un peu long pour pas grand chose. Du coup, je vais essayer de le résumer ici.
Activer les Widgets
Ouvrez functions.php et rajoutez :
if ( function_exists('register_sidebar') )
register_sidebar();
Il faut lire « Si la fonction register_sidebar existe, ben exécute-la ». Et vu qu’elle existe depuis WordPress 2.2…
Définir le code HTML des Widgets
Il y a un code HTML par défaut que WordPress génère pour ses Widgets. Un Widget est un <li> avec un id lié à sa fonctionnalité, une classe widget-container, un titre <h3> avec une classe « widget-title » et d’autre code HTML.
Par exemple, un Widget des derniers Posts donne :
<li id="recent-posts-3" class="widget-container widget_recent_entries">
<h3 class="widget-title">Recent Posts</h3>
<ul>
<li><a href="#" title="Twenty Ten">Twenty Ten now available with WordPress 3.0</a></li>
<li><a href="#" title="433">433</a></li>
<li><a href="#" title="Recent Developments">Recent Developments</a></li>
<li><a href="#" title="WYSIWYRG">WYSIWYRG</a></li>
<li><a href="#" title="Quebec">Quebec</a></li>
</ul>
</li>
La sidebar est alors un grand <ul> où chaque Widget est un <li>. Ce code peut vous convenir ou pas. Quoiqu’il en soit, on peut le modifier dans functions.php :
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h4 class="section">',
'after_title' => '</h4>',
));
Il faut donc passer un array (tableau) en paramètre à la fonction register_sidebar (qu’on avait déjà vu plus haut). Mes titres ne sont par exemple plus des <h2 class="widget-title"> mais des <h4 class="section">.
En ce qui concerne les Widgets eux-mêmes, ce sont devenus des <div>, avec deux zones variables : %1$s et %2$s. N’ayez crainte et faites un simple copier-coller.
On a donc les Widgets dans l’admin. Maintenant il faut les afficher
Afficher les Widgets dans votre sidebar
Ouvrez sidebar.php, et mettez là où vous voulez voir apparaître vos Widgets :
<?php dynamic_sidebar(); ?>
Vous pouvez mélanger Widgets et code PHP habituel, histoire d’avoir une partie fixe et une partie modulable.
Fournir une sidebar par défaut
Là, c’est pour le cas où votre thème widget-ready serait utilisé sur un WordPress qui lui n’est pas dôté de Widgets (un vieux WP du coup). Dans sidebar.php ça donne :
<div class="side">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<!-- Partie qui s'affichera uniquement si les Widgets ne sont pas disponibles -->
<!-- Mais qui affichera les Widgets si ils sont disponibles -->
<?php endif; ?>
</div>
Pourquoi des Widgets quand on peut mettre les mains dans le cambouis ?
Il faut penser aux autres. Un Widget c’est simple à administrer, mais chiant à mettre en place. Ou devrais-je dire : c’est chiant à mettre en place, mais simple à administrer.
Un autre inconvénient, c’est l’incapacité de modifier le code HTML généré. Donc si vous êtes pointilleux, ça peut être gênant, même si globalement, le code de WP est propre.
Enfin, il vous est tout à fait possible de créer vous-même vos Widgets WordPress, mais là, ce n’est plus de mon ressort…