Formation « Développer un thème WordPress sur mesure »

Les sidebars et les widgets

Lecture : 3 minutes • 9

Les widgets sont des éléments interactifs que l’on retrouve en général dans la barre latérale du blog, et permettant d’afficher des informations comme la liste des derniers articles, commentaires, catégories…

Que sont les Widgets et les sidebars ?

Les widgets sont des éléments dynamiques généralement présents dans le blog qui permettent, dans une barre latérale, d’afficher des informations complémentaires.

Un widget peut afficher la liste des derniers articles, des derniers commentaires, des catégories, une archive mensuelle, un texte arbitraire, une galerie, un flux RSS, un moteur de recherche…

Des extensions peuvent même ajouter les leurs, comme par exemple un formulaire d’abonnement à votre newsletter, vos derniers tweets ou encore vos derniers clichés Instagram…

Les widgets du blog Layout de Flywheel
Les widgets du blog Layout de Flywheel : abonnement, articles à la une, une image…

Dans WordPress, on place des widgets dans une zone que l’on appelle sidebar. Pour faire la liaison avec le cours précédent je dirais que :

  • Les menus vont dans des emplacements de menus ;
  • Les widgets vont dans des sidebars.

On va maintenant voir comment déclarer des sidebars, les afficher dans nos templates et y insérer des widgets.

Aparté: Les Widgets et Gutenberg

Les widgets natifs ont aujourd’hui été portés sous forme de blocs et disponibles dans Gutenberg. Depuis WordPress 5.9, la gestion des widgets est directement intégrée dans le nouvel éditeur de WordPress. Mais la méthode que l’on va voir fonctionnera toujours.

Déclarer une sidebar et l’afficher dans le template

Pour déclarer une sidebar, c’est aussi simple que de déclarer un menu ! Pour cela on dispose d’une fonction register_sidebar() à placer dans le functions.php :

PHP
functions.php

Il faut a minima indiquer son nom et son identifiant (ou slug). Le nom est celui qui apparaitra dans l’interface d’administration de WordPress, et l’ID sera utilisé pour appeler notre sidebar.

Pour afficher notre sidebar dans le blog, on va ouvrir archive.php et ajouter la fonction dynamic_sidebar() :

PHP
archive.php

Indiquez comme seul paramètre l’identifiant défini auparavant dans functions.php.

Autres paramètres pour déclarer une sidebar

Je vous ai montré le strict minimum pour déclarer une sidebar, mais il existe quelques autres paramètres qui peuvent se montrer intéressants.

Par défaut vous devez entourer votre sidebar d’un <ul> car chaque widget est écrit avec un <li>.

HTML

Si vous n’êtes pas fan de ce fonctionnement, vous pouvez modifier cela, ainsi que les noms de classes, et le niveau hiérarchique des titres :

PHP
functions.php

En premier lieu, je change les <li> par de simples <div> comme ça je peux m’affranchir du <ul> dans ma sidebar. J’en profite pour personnaliser leur classe. Le %2$s permet à WordPress d’insérer ses autres classes (une classe spécifique par type de widget).

Ensuite je retire le titre de niveau 2 <h2> pour mettre simplement un <p>. En terme de référencement naturel, il est inutile d’appliquer des hiérarchies de titres en dehors du contenu principal.

Pour en savoir plus sur les paramètres disponibles, consultez la documentation des sidebars.

Ajouter des Widgets à notre sidebar

Maintenant que notre sidebar est créée, on va aller y ajouter quelques Widgets. Pour cela rendez-vous dans Apparence > Widgets afin de faire votre sélection :

L'interface de gestion des widgets dans WordPress
Ajoutez des widgets dans votre sidebar en les faisant glisser

Le principe est simple : faites glisser le widget désiré dans la sidebar à droite, vous pourrez ensuite le configurer via quelques réglages. J’ajoute : une recherche, un texte « À propos du blog », une galerie, la liste des articles récents et les catégories.

À tout moment vous pouvez faire glisser les éléments afin de les réorganiser.

Voici le résultat, avec un peu de CSS :

Ma sidebar affiche les widgets que j'ai définis dans l'administration de WordPress
Ma sidebar affiche les widgets que j’ai définis dans l’administration de WordPress

Certaines extensions proposeront leurs propres widgets dans vos sidebars. Pensez toutefois à ne pas trop encombrer cette barre afin de ne pas surcharger votre page.

En fait, les blogs aux designs modernes ont même tendance à ne plus utiliser les sidebars et widgets !

Vous pouvez créer autant de sidebars que vous le souhaitez dans votre thème. Par exemple la sidebar des archives peut être différente de la sidebar des singles. De cette manière vous pourrez afficher des widgets différents. C’est ce que proposent de nombreux thèmes premium.

D’ailleurs bien souvent, leur footer fonctionne sous forme de sidebar, ce qui permet de gérer les différentes colonnes du pied de page plus facilement :

Le thème Salient et son footer
Le thème Salient propose plusieurs colonnes en pied de page

Certains thèmes proposent jusqu’à 4 sidebars différentes pour le pied de page (une par colonne) et d’autres une seule, dont les widgets sont affichés horizontalement.

De plus en plus, ce sont les Page Builders qui permettent de gérer la mise en forme du pied de page (on en reparlera plus tard dans cette formation).


Vous savez maintenant utiliser les sidebars de WordPress afin d’y ajouter vos widgets, et ajouter donc encore en interactivité !

9

Questions, réponses et commentaires

  1. Manon

    Le 7 décembre 2020

    Bonjour,
    Je souhaiterais créer une sidebar sur la page d’accueil, cependant je n’arrive pas à l’afficher ailleurs que dans la page pour les articles.
    Merci de votre réponse,
    Manon

    1. Maxime BJ

      Le 8 décembre 2020

      Est-ce que tu as bien en tête le template hierarchy ? Il faut afficher ta sidebar dans le fichier front-page.php du coup.

  2. Martin

    Le 31 décembre 2020

    Bonjour Maxime,
    J’ai réussi à créer ma sidebar avec les widget mais celle-ci apparait en pîed de page à la suite des articles dans archive.php. As-tu utilisé CSS pour positionner ta sidebar sur la droite de l’écran? Ou alors il y a t-il un moyen de la positionner via l’admin Apparence > widget? Merci de ta réponse.

    1. Maxime BJ

      Le 23 mars 2021

      C’est bien avec du CSS que tu vas positionner les éléments de ta page. Je ne détaille pas plus ce sujet-là car ce n’est pas l’objet de la formation et que je considère que ça fait partie des pré-requis. Tu peux aller sur MDN, leurs tutos HTML/CSS/JS sont super !

  3. Maxime BJ

    Le 23 mars 2021

    Si tu suis bien les étapes du tuto, tu auras ta sidebar, ensuite il te faudra un peu de CSS pour la positionner où tu veux.

  4. Mathieu

    Le 1 août 2021

    Bonjour Maxime,
    J’aimerais modifier les balises Hn de ma shop sidebar mais je n’y arrive pas avec la fonction register comment faire ?

    1. Maxime BJ

      Le 2 août 2021

      Il faut voir s’il existe un hook pour cela, sinon il faudra modifier les fichiers de templates en les mettant dans ton propre thème. Pour Woocommerce par exemple il faudra mettre un dossier ‘woocommerce’ à la racine de ton thème, et copier le template correspondant qui se trouve dans le dossier de l’extension : woocommerce/templates comme expliqué ici : https://docs.woocommerce.com/document/template-structure/

  5. Mélinda

    Le 8 février 2023

    Bonjour Maxime,

    J’ai le problème inverse, j’ai une sidebar qui revient sans cesse sur le site d’un client alors que :

    Disable widget avait été installé par la personne qui a créé le site.

    J’ai déjà supprimé le widget depuis Apparence.

    Dans l’éditeur de fichier j’ai également
    supprimé le nom de la sidebar dans toutes les lignes que j’ai trouvé

    Aujourd’hui, bim, elle est de retour…

    Dans apparence, j’ai vu que les widget était de retour ! Je les ai à nouveau supprimé.

    J’ai aussi remplacé par .

    Enfin, j’ai changé le modèle de page en le passant de “par défaut” à “elementor pleine page”

    J’espère que je serai tranquille, si non, je ne vois pas ce que je peux faire de plus.

    As-tu une idée sur ce problème ?

    Merci d’avance !

    1. Maxime BJ

      Le 8 février 2023

      Je ne vais pas pouvoir t’aider sur cette problématique. Sur Capitaine WP, j’enseigne la création de thèmes sur mesure, pour justement maitriser tous les aspects du thème. Ça exclue donc l’utilisation de constructeurs de pages tiers comme Elementor et la modification à chaud de fichiers en ligne.

      Si tu modifies les fichiers du thème ou de Elementor, tes modifications seront écrasées lors de la prochaine mise à jour. Ce n’est donc pas une solution viable.
      Pour régler ton problème, il faudra que tu vois d’abord qui est en charge de déclarer la sidebar. Est-ce Elementor Pro qui gère l’intégralité des modèles du site ? Ou alors y’a-t-il un thème comme Astra ? Il n’y a pas de réponse universelle : ça va dépendre des outils utilisés. Du coup il faudra que tu consultes les documentations correspondantes.
      Dans tous les cas, ce ne sera pas par le code que tu règleras le souci, mais par la bonne configuration via ton outil.

Laisser un commentaire