Les widgets de la sidebar sont des petits blocs personnalisables qui ont un rôle bien défini, par exemple afficher un calendrier, la liste des derniers commentaires ou encore une publicité...

Ces widgets s'affichent dans la sidebar de votre thème, et ils sont entièrement paramétrables dans la partie administration de Wordpress, dans le menu Apparence > Widgets.

Dans ce chapitre, nous allons voir comment fonctionnent les Widgets techniquement, et faire pour rendre un thème "Widgetisable" (i.e. compatible avec les Widgets).

Fonctionnement de la sidebar

Comme le header et le footer, la sidebar peut être incluse dans le thème en appelant la fonction (en l'occurrence c'est un template tag) get_sidebar().

Placez donc un appel à cette fonction dans le footer par exemple (fichier footer.php), comme le footer est appelé sur toutes les pages par les autres templates (index.php, single.php), alors notre sidebar aussi sera affichée sur toutes les pages du blog.

</div><!-- Fin du contenu -->

<!-- début sidebar -->
<?php get_sidebar(); ?>
<!-- fin sidebar -->

<!-- clear pour éviter les problèmes de chevauchement des blocs -->
<div style="clear: both;">

Quand Wordpress rencontre cette fonction, il va d'abord chercher un fichier nommé sidebar.php dans le répertoire de votre thème (wp-content/themes/finalclap_ex2/sidebar.php).

S'il le trouve, il va l'inclure, ça vous permet de personnaliser la sidebar de manière statique (en écrivant du code HTML et PHP dedans, mais l'utilisateur ne peut pas modifier ce qu'affiche la sidebar sans modifier le fichier sidebar.php).

Par contre s'il ne la trouve pas, Wordpress va regardé si vous avec déclaré une sidebar, et si tel est effectivement le cas, alors Wordpress va afficher la sidebar par défaut, qui contient tous les widgets que vous avez définis dans la partie administration.

Et comment on fait pour déclarer une sidebar ?

Et bien on va tout simplement le faire dans le fichier functions.php (le même que nous avons utilisé dans le chapitre précédent pour personnaliser la boucle), qui est prévu à cet effet.

Le code pour déclarer une sidebar est extrêmement simple, il tient en une seule ligne :

// Déclaration de la sidebar pour pouvoir afficher les widgets
if ( function_exists('register_sidebar') ) register_sidebar();

le test function_exists n'est même pas indispensable, il sert simplement à éviter l'apparition d'une erreur sur les très anciennes versions de Wordpress (avant 2.2) où cette fonction n'existait pas, pour la bonne et simple raison que les widgets non plus n'existaient pas... (c'est pour la rétro compatibilité).

Mais à quoi sert le fichier sidebar.php alors ?

Le fichier sidebar.php n'est donc pas indispensable pour afficher une sidebar, mais il est très utile dans le cas où vous souhaitez utiliser les widgets et définir un affichage par défaut (s'il n'y a aucun widget par exemple, etc...)

Il nous faut donc un moyen pour dire à Wordpress d'afficher les widgets dans notre fichier sidebar.php, et ce moyen c'est la fonction dynamic_sidebar.

Quand vous l'appelez, cette fonction affiche tout simplement le code HTML de la sidebar, qui se présente sous la forme d'une liste de <li>, chaque <li> correspondant à un widget, et doté de plein de classes CSS vous permettant de donner une apparence différente à chaque Widget !

Voici le code de base d'une sidebar dynamique avec prise en charge du mode "par défaut" :

<?php
/**
 * @package WordPress
 * @subpackage Tuto_Wordpress_Finalclap
 */
?>
<!-- DEBUT sidebar -->
<div id="sidebar" role="complementary">
<ul>
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
		<p>Aucun widget défini, ceci est le code HTML de la sidebar par défaut.</p>
	<?php endif; ?>
</ul>
</div>
<!-- FIN sidebar -->

Sachez aussi que vous pouvez très bien avoir plus d'une sidebar personnalisablesur votre thème, pour cela il faut toutes les déclarer avec la fonction register_sidebar() qui prend des paramètres spécifiques pour cette application, je vous invite à consulter le Codex pour plus d'infos là-dessus, ou de poser votre question sur le forum PHP.

CSS, sidebar & widgets

On a maintenant la sidebar qui s'affiche, reste encore à la mettre en forme en utilisant la feuille de style CSS (fichier style.css).

Comme je vous l'ai dit, chaque widget est contenu dans un tag <li>, donc nous allons simplement définir quelques règles CSS pour afficher les <li> les uns en dessous des autres, à la verticale (display:block;), et masquer le widget "moteur de recherche" :

/*
 *	=======
 *	SIDEBAR
 *	=======
**/
#sidebar{
	float:right;
	width:300px;
	background:rgba(100,100,100,0.05);
	-moz-border-radius:0 0 50px 0;
	border-radius:0 0 50px 0;
}
#sidebar img{max-width:263px; border:6px solid #e1e1e1;}
#sidebar a:hover{text-decoration:none; color:black;}

#sidebar ul{
	list-style:none;
	margin:0;
	padding:0;
}

#sidebar li{
	padding:10px 12px;
}

#sidebar h2{
	margin:5px 0 8px;
}

#sidebar .widget_search label{
	display:none;
}

#sidebar li ul{
	list-style:none;
	margin-left:10px;
}

#sidebar li ul li{padding:0 0 4px;}
#sidebar li ul li a{color:#555;}

Allez donc jeter un oeil sur cette page : lettre liquide.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.