Comment créer une zone de widgets sans plugin sur WordPress ?

Sur WordPress, les widgets vous permettent d'ajouter facilement du contenu ou des fonctionnalités à des endroits spécifiques de votre thème. Vous pouvez par exemple afficher des liens vers vos réseaux sociaux dans la sidebar de votre blog, mettre un menu dans le pied de page de votre blog, un texte de présentation, une publicité…

Quand vous installez un thème WordPress, il existe des zones de widgets définies par défaut. Par exemple, vous allez avoir une colonne sur le côté du blog et une ou plusieurs zones en pied de page. Mais comment faire si ces zones par défaut ne suffisent pas et que vous voulez mettre des widgets à un endroit qui n'est pas prévu par votre thème ?

Dans cet article, je vous propose de découvrir comment créer une sidebar personnalisée sans utiliser de plugin, pour pouvoir ajouter des widgets à l'endroit où vous le souhaitez.

La création d'un nouvel emplacement pour vos widgets WordPress se déroule en deux étapes :

• Dans un premier temps, nous devons nommer la sidebar personnalisée à créer et définir ses caractéristiques ;
• Dans un second temps, il faudra insérer ce nouvel emplacement dans le thème WordPress à l'endroit de votre choix.

Comment créer une sidebar personnalisée ?

Ça se passe dans le fichier functions.php de votre thème WordPress (ou du thème enfant que vous utilisez si vous avez opté pour la création d'un thème enfant). Ce fichier se trouve dans le dossier wp-content > themes > nomdevotretheme, vous y accédez à l'aide d'un client FTP comme FileZilla ou WinSCP par exemple (plus de conseils pour modifier le fichier functions.php ici).

Nous allons y ajouter un morceau de code qui va permettre d'informer WordPress de l'existence d'une nouvelle zone de widgets. Cette zone apparaîtra alors dans l'administration de votre blog via le menu Apparence > Widgets.

Ouvrez votre fichier functions.php et recherchez dedans le mot register_sidebar.

Si vous trouvez le code register_sidebar

Si ce code est présent, ça veut dire que votre thème WordPress prévoit déjà certaines zones de widgets. Dans ce cas, repérez une partie qui commence par register_sidebar( et trouvez à quel endroit cette parenthèse se ferme (si vous utilisez un éditeur de texte comme Notepad++, il suffit de cliquer sur la parenthèse d'ouverture pour que la parenthèse de fermeture soit affichée en gras et en rouge). Vous obtenez une zone qui ressemble à ça :

Vous pouvez alors dupliquer cette zone juste après le point-virgule.

Ensuite, dans la partie fraîchement copiée, remplacez certains paramètres :

• Name - A la place de "Sidebar du blog web" dans mon exemple ci-dessus, indiquez le nom qui décrira votre zone de widgets dans l'administration de WordPress.
• Id - A la place de "blog-sidebar" dans mon exemple, choisissez un identifiant unique, en minuscules, sans caractères spéciaux et sans espace, que nous utiliserons tout à l'heure.
• Description - A la place de "Sidebar sur le côté du blog web", indiquez une description qui apparaîtra dans l'administration de votre blog.

Voici par exemple comment apparaissent le nom et la description de ma zone de widgets quand on les voit dans le menu Apparence > Widgets de WordPress.

Les autres parties du code sont facultatives et permettent d'aller plus loin dans la personnalisation visuelle de vos widgets. Les lignes "before_widget" et "after_widget" définissent les balises qui apparaissent avant et après le widget, les balises "before_title" et "after_title" sont quant à elles celles qui encadrent le titre du widget. On peut ainsi par la suite leur attribuer un style propre.

Si le code register_sidebar n'existe pas

C'est assez rare mais il arrive que certains thèmes WordPress ne comportent aucun widget. Dans ce cas, le code à insérer dans le fichier functions.php sera un peu plus complet que précédemment.

function notux_widgets_init() {	
	// Mon widget sur mesure
		register_sidebar( array(
			'name'			=> __( 'Nom de ma zone de widgets', 'dossierdevotretheme' ),
			'id'			=> 'zone-widgets-1',
			'description'	=> __( 'Description de la zone de widgets.', ''dossierdevotretheme' ),
			'before_widget'	=> '<div id="%1$s" class="widget %2$s">',
			'after_widget'	=> '</div>',
			'before_title'	=> '<div class="widget-title th3">',
			'after_title'	=> '</div>',
		) );
}
add_action( 'widgets_init', 'notux_widgets_init' );

Pensez à personnaliser les différents paramètres (name, id, description, dossier de votre thème).

Si le nom de votre zone de widgets ou la description comporte une apostrophe, pensez à mettre un antislash avant, sinon vous rencontrerez une erreur. Ecrivez par exemple "C\'est la zone en bas du blog" et pas "C'est la zone en bas du blog".

Insérer la nouvelle zone de widgets dans le thème WordPress

Là, ça va être à vous de prendre une décision en fonction de l'endroit où vous souhaitez faire apparaître votre nouvelle zone de widgets. Imaginons que je souhaite la placer dans le pied de page du site. Ce pied de page est contrôlé par le fichier footer.php du thème WordPress.

Si vous souhaitez créer une zone de widgets dans le header du site, il faudra l'insérer dans le fichier header.php et ainsi de suite.

Voici le code à insérer à l'endroit où vous voulez que les widgets apparaissent :

<?php
if( is_active_sidebar( 'zone-widgets-1' ) ):
dynamic_sidebar( 'zone-widgets-1' );
endif;
?>

Ce code est simple à comprendre : s'il existe des widgets dans la zone intitulée "zone-widgets-1" que l'on a créée, alors il faut les afficher. A la place de "zone-widgets-1", indiquez l'id que vous avez choisi à l'étape 1.

Il suffit d'insérer ce code à l'endroit où vous souhaitez afficher vos widgets puis d'ajouter des widgets à votre nouvel emplacement (via le menu Apparence > Widgets de WordPress).

Personnaliser ses zones de widgets

En fonction de votre maîtrise du code, vous pouvez bien sûr personnaliser l'apparence de vos widgets en ajoutant quelques lignes dans la feuille de style CSS de votre blog (par exemple, pour modifier l'apparence du titre du widget).

Vous pouvez également ajouter des conditions pour afficher un widget seulement sur une page précise du blog. Ça peut être pratique quand on souhaite créer deux sidebars différentes en fonction de la catégorie dans laquelle on se trouve.

Par exemple, un blog qui parle de cuisine et de déco voudra peut-être afficher les recettes de cuisine les plus populaires dans la sidebar quand on se trouve dans la rubrique cuisine et des liens vers des boutiques de déco quand on se trouve dans la rubrique déco.

Dans ce cas, vous créez dans le fichier functions.php deux zones de widgets portant chacune un identifiant (id) clair, par exemple sidebar-deco et sidebar-cuisine. Ensuite, à l'endroit où vous souhaitez faire apparaître cette sidebar dans votre thème, vous insérez un code de ce type :

<?php if (in_category(X)) { ?>
	<?php if( is_active_sidebar( 'sidebar-deco' ) ):
	dynamic_sidebar( 'sidebar-deco' );
	endif;	
	?>
<?php } else { ?>
	<?php if( is_active_sidebar( 'sidebar-cuisine' ) ):
	dynamic_sidebar( 'sidebar-cuisine' );
	endif;
	?>
<?php } ?>

Si on est dans la catégorie X (remplacez X par l'identifiant chiffré de la catégorie qui vous intéresse), alors on regarde si la sidebar "sidebar-deco" contient des widgets et si c'est le cas on l'affiche. Sinon (else), on affiche la sidebar cuisine.

C'est la méthode que j'utilise sur mon blog pour créer facilement de nouvelles zones de widgets sans avoir recours à un plugin supplémentaire. Sachez toutefois qu'il existe des plugins pour personnaliser facilement ses zones de widgets sans mettre les mains dans le code, comme Custom Sidebars ou encore Content Aware Sidebars. Je ne les ai pas testés mais ils sont bien notés par leurs utilisateurs à l'heure où j'écris cet article !