Widgets WordPress avec Gutenberg: le Guide Complet

Chaque mise à jour majeure de WordPress est l’occasion de voir des évolutions importantes du CMS et aujourd’hui nous allons voir ensemble comment l’éditeur de blocs Gutenberg est venu s’inviter dans la construction des widgets WordPress.

On vous le dit, on vous le répète, WordPress est en pleine transformation depuis quelques années avec l’arrivée de Gutenberg dans l’écosystème du CMS le plus utilisé sur le Web ! WordPress se dirige doucement mais surement, vers le Full Site Editing (FSE), une révolution qui permettra nativement, sans plugin, de construire un site de A à Z en se fondant sur le principe des blocs Gutenberg.

L’intégration de Gutenberg dans la création des Widgets WordPress est un exemple de plus de ce que les équipes d’Automattic sont en train de mettre en place. Dans cet article nous allons donc faire un tour des nouvelles fonctionnalités dans les Widgets WordPress.

Qu’est-ce qu’un Widget WordPress ?

Les Widgets sont des petits modules de contenu, que l’on va retrouver depuis l’administration WordPress dans l’onglet Apparence > Widgets.

Jusqu’aux dernières mises à jour WordPress, les Widgets se construisaient par de simples glisser-déposer de modules préexistants et ne pouvaient s’insérer que dans des zones spécifiques d’un site WordPress comme la barre latérale (sidebar) ou le pied de page (footer).

Aujourd’hui, les nouveaux widgets sont beaucoup plus personnalisables : on les construit à l’aide de blocs issus de l’éditeur Gutenberg et on peut les intégrer n’importe où sur son site WordPress.

S’il est toujours possible de conserver l’ancienne version des Widgets, nous vous encourageons à passer le cap et à vous familiariser avec la nouvelle version. Voyons ensemble de quoi il s’agit.

Qu’est-ce qu’une zone de widget

Vous le savez surement, mais il est toujours bon de le rappeler, les zones de Widgets sont des espaces prédéterminés par votre thème. C’est le designer du thème qui définit le nombre de zones de widget disponibles pour les utilisateurs.

Par exemple, le thème Twenty Twenty One ne propose qu’une seule zone de widget (le footer uniquement). D’autres thèmes proposent une grande quantité de zones de widget (Generate Press par exemple offre 10 zones de widget différentes).

Les différentes zones de widget

Les zones de widgets correspondent à des endroits précis d’une page et selon les paramètres de votre thème, vous pourrez (ou pas) avoir accès aux espaces suivants pour insérer des widgets :

• colonne de droite (sidebar)
• colonne de gauche
• pied de page divisé en colonnes (footer)
• barre de pied de page (en dessous du pied de page)
• barre du haut (au-dessus du menu)
• entête (header)
• etc.

L’apparence des zones de widget

L’apparence des zones de widget sera différente en fonction de votre thème et des configurations qu’il va vous offrir pour personnaliser l’apparence de ces zones. En revanche, la localisation des zones de widget sera identique sur tous les sites comme suivant :

Au final, quel que soit le thème, le principe reste le même, vous insérez un widget dans la zone choisie depuis l’administration WordPress et le widget s’affiche à l’endroit voulu sur le site.

L’accès aux zones de widgets dans l’administration WordPress

Ici nous allons voir ensemble les changements qui ont été opérés pour tous ceux qui utilisent un thème “normal”, “classique”, “traditionnel”, “comme avant”, … bref pour ceux n’utilisent pas la version bêta du Full Site Editing (et donc le thème Twenty Twenty Two).

Pour configurer les zones de widgets, et donc décider des widgets qui apparaitront dans chaque zone, il existe deux accès différents : par l’onglet “Widgets” du tableau de bord ou en utilisant l’outil de personnalisation.

Accéder aux zones de widgets depuis le tableau de bord

Depuis la tableau de bord WordPress, cliquer sur Apparence > Widget pour accéder à la configuration des zones de widget.

Dans la page qui s’ouvre, vous verrez alors apparaitre les différentes zones de widget que vous propose votre thème.

Vous remarquerez qu’il y a une zone supplémentaire appelée “Widgets désactivés” située en bas de page. C’est une espèce de zone de widgets invisible où vous pouvez faire glisser des blocs de widget que vous souhaitez sortir de l’affichage de votre site, mais dont vous souhaitez conserver les réglages pour une utilisation ultérieure si besoin.

Exemple avec le thème Twenty Twenty One

Voici un exemple avec le thème par défaut Twenty Twenty One qui ne propose qu’une seule zone de widget (pied de page ou footer).

Exemple avec le thème Generate Press

Voici un exemple avec le thème Generate Press qui propose un grand nombre de zones de widget !

Accéder aux zones de widgets depuis la fonction “Personnalisation”

Il est également possible de gérer les zones de widgets depuis l’outil de personnalisation de WordPress. Là encore, chaque thème va offrir des paramétrages différents, mais tous proposeront un onglet Widget par défaut où l’on va retrouver les zones et la possibilité d’y insérer des widgets.

• Pour accéder à l’outil de personnaliser, il suffit de se rendre dans l’onglet Apparence > Personnaliser.

• Une fois dans l’outil de personnalisation, cliquer sur l’onglet “Widgets”

Exemple avec le thème Twenty Twenty One

Vous ouvrez alors un onglet dans lequel apparaitront les zones de widget disponibles avec votre thème. Ici nous utilisons le thème Twenty Twenty One qui n’offre qu’une seule zone de widget en pied de page.

Exemple avec le thème Generate Press

Dans le cas du thème Generate Press on retrouvera les zones de widgets qui auront été activées dans les paramètres du thème.

Nous avons vu comme accéder aux zones de widgets dans WordPress, voyons maintenant comment ajouter des blocs à l’intérieur de ces zones pour les afficher sur notre site.

Ajouter du contenu dans une zone de widget

Après avoir vu comment accéder aux zones de widgets sur WordPress, voyons maintenant un exemple concret : nous allons créer une sidebar et donc ajouter du contenu à l’intérieur de notre zone de widget “colonne latérale”.

Exemple : Créer une sidebar (colonne latérale)

Pour cet exemple, nous allons utiliser le thème Generate Press qui propose une sidebar et nous allons donc créer une colonne latérale avec les éléments suivants :

• Mes contacts
• Mes services

Nous allons commencer par voir les problématiques qui se posent dans la gestion des blocs à l’intérieur de la sidebar et comment régler ces problèmes.

• Pour commencer, on ouvre l’outil “Personnaliser > Widget > Colonne latérale droite”

• Nous voulons une première section “Mes contacts” donc on commence par ajouter un bloc “Titre” puis un bloc “Paragraphe”.

• Le résultat n’est pas à la hauteur de nos attentes : il y a un énorme espace entre le titre de la section et le contenu.

Ce problème est lié aux règles CSS du thème qui sont appliquées par défaut à la sidebar, aux titres et aux paragraphes.

Le résultat : décevant.
La solution : modifier les règles CSS pour arriver à un résultat satisfaisant ou utiliser le bloc “Groupe de widgets”.

Le bloc “Groupe de widgets” permet de regrouper des blocs de contenu et de les transformer en widgets “à l’ancienne”. Ce bloc offre la possibilité de donner un titre au groupe de bloc et ainsi contourner le problème vu précédemment.

• On va donc sélectionner nos deux blocs et les transformer en “Groupe de Widget”.

• Notre bloc Titre se transforme en titre du groupe de widget et notre bloc paragraphe reste tel quel. Le résultat est beaucoup plus satisfaisant.

• On répète le même procédé pour notre section “Mes services” : on ajoute un titre, on ajoute une image et on transforme les 2 blocs en “Groupe de widget”.

Voilà le résultat final !

En fonction des thèmes, le résultat pourra être différent (polices, tailles, marges, etc.). Certains thèmes vous offriront la possibilité de paramétrer l’aspect visuel de chaque élément. Dans le cas contraire, il vous faudra utiliser des règles CSS.

Exemple : Créer un footer (pied de page)

Pour cet exemple, nous allons utiliser le thème par défaut Twenty Twenty One qui ne propose qu’une zone de widget en pied de page.

Concernant la zone “pied de page”, dans beaucoup de thèmes “Premium” (payants) le pied de page sera déjà divisé en différentes zones qui correspondront aux colonnes à l’intérieur du pied de page.

Comme ici avec le thème Generate Press qui possède 5 zones de widgets pour le pied de page. Il est ainsi facile de se repérer pour ajouter du contenu dans chaque colonne.

Le “problème” avec le thème Twenty Twenty One c’est qu’il ne propose qu’une seule zone de widget pour le pied de page. La question que l’on peut se poser alors : « comment je fais pour avoir plusieurs colonnes et faire un joli pied de page ?! »

Nous allons voir comment est conçue cette zone de widget par défaut et voir que OUI il est possible de faire un joli pied de page même avec ce système qui semblerait à première vue très basique.

Pour l’exemple, nous allons créer un pied de page avec trois colonnes :

• Colonne 1 : Mes contacts
• Colonne 2 : Mes réseaux sociaux
• Colonne 3 : Ma newsletter

Comme nous voulons créer un joli pied de page, chaque colonne aura besoin d’un titre avec son contenu dessous. Pour cela, on l’a vu précédemment, pour créer une sidebar, WordPress propose un outil utile : le bloc “Groupe de widget”.

C’est parti.

• Ajouter un bloc “Groupe de widget” en cliquant sur le bouton “+” de la zone de widget “Pied de page”

• On se retrouve avec un bloc “Groupe de Widget” à l’intérieur duquel on peut ajouter autant de blocs de contenu que l’on souhaite. Pour l’exemple, on va ajouter un bloc “Paragraphe”.

• On commence à y voir plus clair : on a maintenant la possibilité d’ajouter un titre à notre groupe de widget et d’ajouter les blocs de contenus qui s’afficheront sous le titre. Ici on va commencer par créer une colonne “Mes contacts”.

• On ajoute le titre “Mes contacts” et on ajoute dessous un bloc paragraphe où nous renseignons notre Nom, Adresse et Téléphone.

• On met à jour et Yes ! Nous avons créé la première colonne de notre pied de page !

• Pour continuer et rajouter du contenu dans notre deuxième colonne, on clique sur le bouton “+” en bas à droite de la zone de widget.

• On rajoute un deuxième “groupe de widget” pour créer une colonne “Réseaux sociaux” et un troisième “groupe de widget” pour créer une colonne “Newsletter”.

• Une fois mis à jour, voilà un beau résultat ! Nous avons créé trois colonnes dans la zone de widget “Pied de page” de notre thème Twenty Twenty One.

Liste des widgets de base disponibles dans WordPress

Dans la liste des widgets disponibles sur WordPress, certaines choses n’ont pas changé, d’autres ont évolué.

Ce qui a changé

• La liste des widgets est dorénavant accessible comme n’importe quel bloc de l’éditeur.
• Il est désormais possible d’ajouter n’importe quel bloc de contenu dans les zones de widgets.
• Il est à présent possible d’ajouter n’importe quel bloc de widget à n’importe quel endroit d’un site WordPress.
• L’ajout de deux widgets supplémentaires : un bloc “Code Court” (shortcode) et un bloc “Icône de réseaux sociaux”
• Les widgets dont les blocs existaient déjà dans le nouvel éditeur ont été supprimés de la liste. Par exemple, le widget “Texte” est remplacé par le bloc “Paragraphe”, idem pour les widgets vidéos, image, galerie d’image, son, etc. qui ont déjà leur propre bloc correspondant.

Ce qui n’a pas changé

Malgré les mises à jour, certaines choses n’ont pas changé et la plupart des widgets traditionnels sont toujours là, rassurez-vous :

• Archives
• Calendrier
• Catégories
• HTML personnalisé
• Derniers commentaires
• Derniers articles
• Liste des pages
• RSS
• Recherche
• Nuage d’étiquettes
• Code court (shortcode)
• Icône de réseaux sociaux

Beaucoup de widgets issus des débuts de WordPress paraissent aujourd’hui obsolètes. Certains sont carrément inutiles et pour d’autres on cherche encore à quoi il pourrait servir… Mais les développeurs de WordPress semblent attachés à l’histoire du CMS, on ne va pas leur reprocher. Alors pour un effet vintage sur votre site web, n’hésitez pas à utiliser les widgets classiques de WordPress ! ;-)

Le bloc “Archives”

Le widget Archives de WordPress permet d’afficher une liste de tous vos articles regroupés par mois de publication. Il est possible de les afficher sous forme de liste à point ou de liste déroulante. Vous pouvez également afficher le nombre d’articles publiés dans le mois. Ce widget n’est plus très utile aujourd’hui, il crée des liens non pertinents, mais permanents et sur toutes vos pages, ce qui n’est pas une super idée pour le SEO, à moins de souhaiter proposer une navigation chronologique à vos lecteurs.

Le bloc “Calendrier”

Le widget calendrier ne sert qu’à afficher un calendrier qui affiche les dates de parution des articles… autant dire qu’il ne sert… à rien !

Le bloc “Catégories”

Le widget Catégories permet d’afficher une liste de l’ensemble des catégories utilisées sur votre site WordPress. Utilisé dans une sidebar ou un footer, ce widget peut faire office de deuxième menu de navigation croisée. On valide si vous avez bien réfléchi vos catégories et qu’elles sont pertinentes pour naviguer efficacement dans votre contenu.

Le bloc “HTML personnalisé”

Le bloc HTML personnalisé, comme son nom l’indique, permet d’insérer du code HTML a un endroit choisi. Avec la quantité de possibilités offertes aujourd’hui par les blocs, il ne vous rendra service que pour des utilisations très spécifiques.

Le bloc “Derniers commentaires”

Voici un des fameux widgets “dynamique” de WordPress. Ici, c’est un widget qui reprend les derniers commentaires déposés par vos lecteurs sur vos publications. Concrètement, cela n’a aucun intérêt en termes d’expérience utilisateur et on peut même dire que cela a un effet négatif d’un point de vue SEO… à éviter donc.

Le bloc “Derniers articles”

Un autre widget “dynamique” qui va afficher une liste de vos derniers articles publiés. Cela peut éventuellement être utile, mais certainement pas dans une zone de widget de notre point de vue. Avec l’arrivée du FSE, il est dorénavant possible de créer des grilles d’articles de façon bien plus précise et de les afficher n’importe où sur son site (dont dans les zones de widget). Un bloc qui tendrait donc à devenir obsolète.

Le bloc “Liste des pages”

Un widget qui vient lister toutes les pages de votre site. Reste à connaitre l’intérêt qu’il pourrait y avoir à utiliser ce widget…

Le bloc “RSS”

Le widget RSS permet d’afficher un flux de contenu externe. Concrètement, vous souhaitez relayer du contenu issu d’un autre site web, qui pourrait intéresser vos lecteurs, vous pouvez récupérer le flux RSS et diffuser une liste de publications venues de ce site web externe. À ne pas utiliser avec son propre contenu, enfin vous faites ce que vous voulez, mais cela n’a aucun intérêt !

Le bloc “Recherche”

Voilà un widget qui peut être utile si votre thème n’offre pas de fonction recherche (souvent disponible dans la barre de menu de navigation). Utilisé dans une sidebar par exemple, le widget « Recherche » affiche un champ qui permet à vos lecteurs d’effectuer des recherches par mots-clefs pour accéder à votre contenu.

Le bloc “Code court”

Ce widget permet d’insérer des codes courts (shortcodes). Voilà. Et ça peut en effet être très utile. Par exemple, pour intégrer un formulaire de newsletter dans son footer, les plugins offrent souvent un shortcode à insérer.

Le bloc “Icône de réseaux sociaux”

Voilà un nouveau widget qui aurait encore besoin d’un peu de développement. Il n’est pas très intuitif et possède encore des bugs d’affichage… Mais l’idée est dans le titre : ce widget permet d’insérer des icônes de réseaux sociaux, ce qui est en soi est particulièrement utile !

Le bloc “Nuages d’étiquettes”

Le nuage d’étiquette est un ancêtre de WordPress et n’est quasiment plus utilisé de nos jours. Mais si vous le souhaitez, ce widget affichera une liste des étiquettes utilisées sur votre blog dont la taille des mots variera en fonction du nombre d’articles contenus dans celle-ci. Comme pour la liste de catégories, cela peut avoir du sens, UNIQUEMENT si vos étiquettes ont été pensées comme une façon de classer votre contenu de façon claire et pertinente. Spoiler : si vous avez créé des centaines d’étiquettes, alors vous ne devriez pas utiliser ce widget.

Meta

Le widget Meta est dorénavant marqué comme “ancien widget” et donne l’air d’un vieux truc dont on ne sert plus, mais dont on ne voudrait pas se séparer, parce que bon, on ne sait jamais… ce widget affiche les liens de connexion à WordPress.

Menu de navigation

Idem, il a été marqué comme “ancien widget”. Il permet d’afficher son menu de navigation… autant dire que pour le coup ce n’est pas DU TOUT une bonne idée. Jusqu’à preuve du contraire, le menu principal est suffisant !

Groupe de widget

Une nouveauté et un bloc particulièrement utile puisqu’il va permettre de regrouper plusieurs blocs sous une entité “widget” unique qui aura un titre et qui prendra l’apparence uniforme. Nous avons vu son utilité dans les exemples plus haut.

Les widgets et le Full Site Editing

Avec l’arrivée du thème Twenty Twenty Two (2022) WordPress nous offre la possibilité de tester la version bêta du Full Site Editing (FSE). Et vous verrez qu’en installant le thème, tous les repères sautent !

Concernant les Widgets qui nous intéressent ici par exemple, fini l’onglet d’accès direct aux Widgets. Fini aussi l’onglet d’accès à la personnalisation.

Toutes les modifications sur le site vont se faire directement de façon visuelle en utilisant l’onglet “Apparence > Editeur” qui va ouvrir le nouveau constructeur de site FSE.

Il faudra du temps aux habitués de WordPress pour se faire à ce nouveau concept… mais gageons que comme toutes les évolutions que WordPress a apportées au fur et à mesure des années, on finit toujours par s’y faire et en tirer un intérêt ou un avantage.

Exemple pour créer un pied de page avec le FSE

On ne va pas s’éterniser trop longtemps sur le fonctionnement du FSE car le produit est encore en mode BETA et il est fort possible que de nombreuses améliorations voient le jour et rendent rapidement obsolètes les analyses. Par ailleurs, si le sujet vous intéresse, nous avons écrit un article complet sur le Full Site Editing.

• Ouvrir le navigateur en cliquant sur le logo WordPress en haut à gauche

• Ouvrir l’onglet “Éléments de modèles” puis cliquer sur l’onglet “Pied de page”

• Vous voici sur la page de personnalisation du pied de page. Vous pouvez effectuer les modifications en utilisant les blocs de mise en page et de création de contenu disponibles.

• Ou vous pouvez utiliser les compositions prêtes à l’emploi disponibles pour la zone pied de page. Pour cela, commencez par ouvrir l’explorateur de blocs.

• Cliquez sur l’onglet “Compositions” puis sur “Pied de page”

• Vous aurez une liste des compositions prêtes à l’emploi disponibles dans la colonne, mais le mieux reste de cliquer sur le bouton “Explorer” pour avoir une vue d’ensemble plus intuitive.

• Choisir le modèle de pied de page qui vous plait.

• Le modèle est ajouté automatiquement et on revient sur la page de création du pied de page. On termine les modifications et on enregistre.

• Une fois le travail enregistré, votre nouveau pied de page s’affiche sur l’ensemble de votre site web.

Conserver l’ancienne version des Widgets

Vous n’aimez pas la nouvelle version de création de Widgets WordPress et vous souhaitez conserver l’ancienne version ? La solution existe et il s’agit du plugin “Classic Widget”.

Vous connaissez surement le plugin “Classic Editor” qui permet de revenir à l’ancienne version de l’éditeur et de s’épargner l’usage de l’éditeur de bloc Gutenberg. Eh bien, c’est pareil, mais pour les Widgets !

Attention : rien ne nous permet d’affirmer que ces plugins seront maintenus et fonctionnels dans le temps. On vous conseillerait de commencer sérieusement à vous intéresser aux nouvelles fonctionnalités de WordPress et de prendre le train en marche !

Installer le plugin Classic Widget

Le plugin Classic Widget est un plugin créé par les équipes de développeurs de WordPress qui s’inscrit dans la lignée du plugin “Classic Editor” (qui permet d’utiliser l’éditeur classique à la place de Gutenberg pour l’édition des articles) mais adaptés aux Widgets. C’est une extension officielle qui selon les informations sera maintenue “aussi longtemps que nécessaire”. Ce plugin a pour fonction principale de restaurer l’ancien écran de gestion des widgets.

Infos générales

• +1 000 000 installations actives
• Note de 5/5
• Mises à jour régulières

Fonctionnalités

Aucune fonctionnalité particulière à part restaurer l’écran classique de gestion des widgets et désactiver la gestion des widgets via l’éditeur de blocs (Gutenberg).

Attention : si vous souhaitez utiliser les fonctionnalités Full Site Editing, vous devez garder la nouvelle version des Widgets.

Conclusion

Vous voilà arrivés à la fin de ce pavé consacré au nouveau fonctionnement des widgets WordPress selon Gutenberg. Avec l’arrivée du Full Site Editing on constate des changements importants dans l’ergonomie de créations des widgets et la gestion des zones de widget.

Le changement n’a pas toujours du bon, mais de notre point de vue, les nouvelles fonctionnalités permettent une personnalisation beaucoup plus avancée des zones de widgets par rapport au fonctionnement passé. C’est donc une bonne amélioration qui mérite d’être testée et prise en main.

On a vu également qu’avec l’arrivée du thème Twenty Twenty Two et la prise en charge totale du Full Site Editing, on entre dans un Nouveau Monde, le futur de WordPress où tous les repères sont effacés et où il faudra tout réapprendre !