Depuis la sortie de la version 2.2 de Wordpress, la quasi totalité des thèmes sont widget ready, ce qui signifie que vous pouvez ajouter des gadgets à votre blog directement depuis l’interface d’administration, et donc sans avoir à mettre les mains dans le code. Pour rappel, cette fonctionnalité permet d’organiser facilement la sidebar de votre thème (ou le footer) grâce à un système de glisser-déposer très astucieux. Toutefois, si vous souhaitez créer votre propre thème — ou personnaliser un thème qui n’est pas widget ready — vous devrez effectuer quelques manipulations fort simples pour rendre vos sidebars et vos footers « widgetisables ». Cet article vous explique la marche à suivre.
Pour widgetiser un thème WordPress, il convient de procéder en deux étapes :
1. Création du template functions.php
Situé dans le répertoire de votre thème, le fichier functions.php permet d’ajouter différentes options et paramètres à votre thème. Puisqu’il n’est pas obligatoire, il se peut que vous deviez en créer un, avant de poursuivre. Si votre thème en possède déjà un, ouvrez-le puis copiez-collez le code ci-dessous dans le fichier.
<?php if ( function_exists('register_sidebar') ) register_sidebar(); ?>
Si vous avez plus d’une colonne dans votre sidebar, précisez le nombre de colonnes dans le code. Par exemple, si vous avez deux colonnes, vous devez avoir le code suivant:
<?php if ( function_exists('register_sidebar') ) register_sidebar(2); ?>
Pour améliorer la mise en page de votre sidebar, utilisez le code ci-dessous :
<?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'sidebar 1', 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '
', )); ?>
Sous le nom de la sidebar (ici sidebar 1) s’affiche la structure du widget. En utilisant les sélecteurs de classes (.widget et .widgettitle) il est possible de personnaliser la présentation de votre sidebar grâce à la feuille de style. Bien évidemment, vous pouvez modifier les noms de ces classes et d’adapter la structure de vos widgets en fonction de vos besoins.
- ‘before_widget’ et ‘after_widget’ : permettent d’encadrer votre sidebar d’une balise div pour la styliser ;
- ‘before_title’ et ‘after_title’ : permettent d’appliquer un style aux différents intitulés de vos widgets (archives, catégories, articles récents, articles populaires…).
Vous avez également la possibilité de créer plusieurs sidebars. Par exemple pour en créer deux, dupliquez le premier code et modifiez le nom de la deuxième sidebar.
<?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'sidebar 1', 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '
', )); if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'sidebar 2', 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '
', )); ?>
Sauvegardez votre fichier, puis rendez-vous sur le panneau d’administration, à la section Widgets (Apparence > Widgets). Là vous devriez voir apparaître votre nouvelle sidebar. Mais avant d’y ajouter les widgets de votre choix, vous devrez effectuer une dernière manipulation, tout aussi simple.
2. Modifications du modèle sidebar.php
Nous allons donc ajouter quelques lignes de code dans le fichier de modèle sidebar.php pour permettre aux widgets de s’afficher correctement. La plupart des thèmes possèdent un div nommé « sidebar » (<div id= »sidebar »>). Placez le code suivant à l’intérieur de ce div :
<ul><?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> ICI CONTENU DE LA SIDEBAR <?php endif; ?> </ul>
Enregistrez votre fichier sidebar.php. Votre thème est maintenant prêt à prendre en charge les widgets WordPress. Pour les activer, rendez-vous dans l’administration de votre blog et sélectionnez ceux de votre choix ; ils sont disponibles dans la partie gauche de la page Widgets (Apparence > Widgets).