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.
Personnaliser son blog en créant une sidebar personnalisée pour ses widgets
Personnaliser son blog en créant une sidebar personnalisée pour ses widgets

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 :

Une zone de widgets WordPress
Une zone de widgets WordPress

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

La zone de widgets dupliquée
La zone de widgets dupliquée

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.

Nom et description de la sidebar personnalisée
Nom et description de la sidebar personnalisée

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 !


Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

14 commentaires sur “Comment créer une zone de widgets sans plugin sur WordPress ?
  • yza

    Bonjour,
    Merci pour ce tuto ! C’est très bien expliqué.
    Je débute sous WordPress et en css.
    J’espère enfin réussir à faire ce que je veux : mettre ma sidebar sur toutes les pages du sites, y compris les pages statiques.
    Apparemment c’est simple à faire mais ça fait plusieurs semaines (entrecoupées) que je suis dessus et cette fichue sidebar se met toujours en dessous.
    J’aurai voulu utiliser la sidebar de mon thème Twenty seventeen.
    Si j’ai bien compris, il me suffit d’insérer le petit code donné plus haut au lieu du get_sidebar classique ?
    Merci d’avance pour votre réponse.
    bonne journée
    yza

    Répondre à yza
    • Marlène

      Bonjour Yza, pour ajouter une sidebar, c’est simple sur le principe car il suffit d’utiliser un code get_sidebar (pas besoin de suivre ce tutoriel puisque dans votre cas, on parle d’insérer une sidebar déjà existante, il n’y a pas de zone de widgets à créer)… et d’insérer ce code dans le fichier qui détermine l’affichage des pages (qui peut s’appeler page.php ou autrement selon le thème).

      Là où ça se complique, c’est quand le thème par défaut ne prévoit pas l’affichage d’une sidebar. Il peut comporter des instructions qui disent au contenu de la page d’occuper toute la largeur… et quand on insère une sidebar, il faut ensuite retravailler le code pour lui « faire de la place ».

      Répondre à Marlène
    • yza

      Bonjour Marlène,
      J’ai essayé en rajoutant le code et en modifiant la largeur du contenu. La barre latérale se met enfin à côté.
      Par contre, pour la page d’accueil statique, elle ne s’affiche pas du tout.
      Je m’explique :
      Quand la page d’accueil n’est pas « cochée » comme page d’accueil, la sidebar s’affiche. Par contre, si je la mets en page d’accueil dans la tableau de bord, plus de sidebar !
      Pourtant j’ai créé un template pour cette page… Je ne comprends pas trop pourquoi il ne prend pas mon modèle en compte dans ce cas précis.
      Je ne sais pas si mon explication est claire :o$
      Peut-être savez-vous pourquoi cela se produit ainsi ?
      Merci d’avance.
      Bonne journée
      Yza

      Répondre à yza
    • Marlène

      Bonjour Yza, pour la page d’accueil il y a plusieurs fichiers qui peuvent contrôler l’affichage selon le cas : index.php, home.php, front-page.php… Peut-être que c’est tout simplement que les modifications ont été effectuées dans le mauvais fichier.

      Répondre à Marlène
    • yza

      Bonsoir Marlène,
      En fait, j’ai repris le front-page.php et je l’ai renommé puis ai modifié le contenu.
      Je vais essayer en modifiant le front-page.php dans mon thème enfant dans ce cas.
      je vous tiens au courant :)

      Répondre à yza
    • Marlène

      Hello Yza, tu ne peux pas renommer comme tu le souhaites les fichiers d’un thème WordPress. Chaque fichier a un nom précis pour une bonne raison ;) Il y a une hiérarchie à respecter pour le bon fonctionnement du site.

      Répondre à Marlène
    • yza

      Bonjour Marlène,
      J’ai réussi à faire ce que je souhaite. Il y a quelques réajustements à faire au niveau css ou html mais c’est déjà beaucoup mieux qu’avant :)
      Maintenant je suis en train de m’amuser à supprimer le formulaire de recherche dans le cas où le lien catégorie ne renvoie rien (content-none.php). Ce n’est pas gagné à cause des imbrications de « div » et autres mais bon, j’expérimente :)
      J’ai déjà modifié le search.php dans lequel j’ai enlevé la sidebar car j’ai déjà une zone de recherche dans ma barre latérale.
      Peut-être est-il plus simple de créer une sidebar spécifique pour la page content-none.php ?
      Bonne journée
      yza

      Répondre à yza
    • Marlène

      Hello, sans connaître la façon dont le thème est structuré et me pencher dessus, difficile de dire quel fichier il est le plus pertinent de modifier ;)

      Répondre à Marlène
    • yza

      Bonjour, j’ai trouvé : c’est le fichier content-none.php qui se trouve dans un sous répertoire. Il est « appelé » par la page index.php.
      Le plus dur je trouve c’est de retrouver des « éléments » bien précis car il y en a partout !
      Mais bon, je résous mais problèmes de plus en plus rapidement :) Ça prouve que je progresse !
      Merci pour vos conseil et pour votre réactivité!
      Au plaisir de vous relire !
      yza

      Répondre à yza
  • Aline - Graphiste illustratrice

    ça c’est un tuto génial, merci!
    Cela m’aidera dans mon métier car une part de moi a envie de se mettre à créer des thèmes!

    Répondre à Aline
    • Marlène

      Ce serait très complémentaire avec tes compétences graphiques ! Ce n’est pas évident de trouver les deux aspects chez la même personne (l’intégration + l’univers visuel) !

      Répondre à Marlène
    • Aline - Graphiste illustratrice

      Oui! Pour l’instant, je propose la création de sites mais avec des thèmes pré-construits donc pas entièrement personnalisables…
      Je me demandais si tu avais déjà aussi écrit un tutoriel pour créer des emplacements de menus dans un thème WordPress? Ce serait vraiment chouette!
      Bon week-end à toi, Marlène ;)

      Répondre à Aline
    • Marlène

      Je ne crois pas l’avoir fait (pfiou, bientôt 3 ans de blogging et c’est déjà l’Alzheimer du « qu’est-ce que j’ai déjà écrit » ^^) mais tu as un tutoriel sur la création d’emplacements de menus chez WP Channel.

      Répondre à Marlène
    • Aline - Graphiste illustratrice

      Ah c’est super, exactement ce qu’il me fallait!
      Merci Marlène pour le lien de l’article et belle semaine à toi! =D

      Répondre à Aline


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.