Pré-requis pour cette astuce

  • Un serveur avec PHP et MySQL
  • Une installation de WordPress 2.8
  • Un éditeur de texte de votre choix
  • Des connaissances en templating WordPress serait un plus ;)

La nouveauté apportée par WordPress 2.8

J’en parlais déjà dans un article précédent, la version 2.8 de WordPress permet dorénavant d’utiliser un même widget sur plusieurs sidebars, chose qui n’était pas possible auparavant sans un minimum d’astuce.

Grâce à cette nouvelle option vous allez pouvoir déployer plusieurs sidebars différentes sur votre site, ainsi votre sidebar ne sera pas juste « décorative » (et composée d’un patchwork de widget en tout genre) mais pourra s’adapter à votre contenu et surtout au type de page qui est affichée (article, catégorie, page d’accueil, profil d’un auteur, etc.).

Ajouter les sidebars dans votre thème

Primo, pour pouvoir bénéficier de plusieurs sidebars il faut commencer par mettre les mains dans le moteur. Et pour cela, ça se passe dans le fichier « functions.php » de votre thème WordPress, ajoutez les lignes suivantes à la fin du fichier :

if(function_exists('register_sidebar')) {
	
    register_sidebar(array(
		'name' => 'Sidebar Home',
        'before_widget' => '<div id="%1$s" class="sidebar-item widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<div class="sidebar-title">',
        'after_title' => '</div>'
    ));

    register_sidebar(array(
		'name' => 'Sidebar Article',
        'before_widget' => '<div id="%1$s" class="sidebar-item widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<div class="sidebar-title">',
        'after_title' => '</div>'
    ));

    register_sidebar(array(
		'name' => 'Sidebar Auteur',
        'before_widget' => '<div id="%1$s" class="sidebar-item widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<div class="sidebar-title">',
        'after_title' => '</div>'
    ));

    register_sidebar(array(
		'name' => 'Sidebar par défaut',
        'before_widget' => '<div id="%1$s" class="sidebar-item widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<div class="sidebar-title">',
        'after_title' => '</div>'
    ));

}

Voilà, nous venons tout juste de déclarer 4 sidebars différentes ; c’est la fonction register_sidebar utilisée ici qui permet de déclarer une nouvelle sidebar. Elle reçoit en paramètre un tableau associatif pouvant contenir les attributs suivant :

  • name : le nom de la sidebar, il permettra de l’identifier par la suite, vous pouvez très bien mettre « sidebar1″ mais on ne perd rien à être explicite :P
  • before_widget : le code HTML qui sera inséré avant votre widget
  • after_widget : le code HTML qui sera inséré après votre widget
  • before_title : le code HTML qui sera inséré avant le titre de votre widget
  • after_title : le code HTML qui sera inséré après le titre de votre widget
Le nom que vous choisissez à son importance car il vous permettra d’identifier votre sidebar dans l’interface d’administration et de définir son affichage. Choisissez-le avec son et surtout éviter de le changer trop souvent

Si vous ne savez pas quoi mettre pour les 4 derniers paramètres, vous pouvez très bien les laisser vide, WordPress se chargera de mettre les valeurs par défaut. Cependant si votre thème ajoute des balises spécifiques, je vous conseille de reprendre la structuration définit par l’auteur de votre thème (cherchez dans le fichier « functions.php » si vous trouvez d’autres register_sidebar).

Voici comment WordPress utilise les paramètres que vous fournissez à la fonction register_sidebar pour construire le code HTML de vos widgets  :

wordpress-sidebar-construction-widget

Configurer les sidebars dans l’administration

Je passerai très rapidement sur l’utilisation de l’interface d’administration car WordPress a fait un grand pas en avant dans la gestion des widgets. Pour ajouter des widgets rendez-vous sur la page Apparance>Widgtets et glissez/déplacez les différents widgets jusqu’à vos sidebars. Avec le code précédent vous devriez obtenir ceci :

wordpress-sidebar-admin-interface

Contextualiser vos différentes sidebars

Maintenant que nos sidebars existent et disposent d’un contenu il va nous falloir les intégrer à votre thème. Pour ce faire, nous allons éditer un fichier qui porte bien son nom : « sidebar.php ». Ce fichier est utilisé par WordPress pour gérer l’affichage de toutes les sidebars de votre blog WordPress.

Pour rendre contextuel l’affichage de nos sidebars nous allons utiliser les fonctions de templating conditionnelles de WordPress, voici les plus courantes :

  • is_home() : permet de savoir si l’utilisateur se trouve sur la home,
  • is_article() : permet d’identifier si c’est un article qui est affiché,
  • is_category() : permet d’identifier si c’est une catégorie qui est affichée,
  • is_author() : permet d’identifier si c’est le profil d’un auteur qui est affiché,
  • etc.

Pour terminer notre exemple voici le code que l’on obtient dans notre fichier « sidebar.php » :

<div id="sidebar">
	<?php if(is_home()) : // page d'accueil ?>
		<?php dynamic_sidebar('Sidebar Home');  ?>
	<?php elseif(is_single()) : // page d'un article ?>
		<?php dynamic_sidebar('Sidebar Article'); ?>
	<?php elseif(is_author()) : // page d'un auteur ?>
		<?php dynamic_sidebar('Sidebar Auteur'); ?>
	<?php else : // les autres pages ?>
		<?php dynamic_sidebar('Sidebar par défaut'); ?>
	<?php endif; ?>
</div>

Pousser le concept encore plus loin…

L’utilisation contextuelle des sidebars s’avère très utile comme vous avez pu le remarquer car cela permet d’afficher un contenu précis sur des pages ciblées.

On pourrait aller encore plus loin dans l’utilisation des sidebars en mettant en place des sidebars « génériques » contenant un ensemble d’éléments utilisables sur toutes les pages (des pubs par exemple) auxquels viendraient s’ajouter les éléments spécifiques à la page en cours (la bio de l’auteur de l’article par exemple).

Voilà pour aujourd’hui, n’hésitez pas à poster un commentaire ici même si les explications n’étaient pas assez claires ou pour toute remarque, pertinente ou non ;)