Utiliser les Widgets WordPress avec Gutenberg : Guide Complet

💡 En résumé : Dans cet article, nous vous proposons un guide complet pour comprendre et utiliser les widgets WordPress avec l’éditeur de blocs Gutenberg. Nous aborderons les concepts fondamentaux des widgets, les nouvelles fonctionnalités introduites par Gutenberg, et comment en tirer parti pour personnaliser votre site WordPress. Que vous soyez novice ou utilisateur confirmé, vous apprendrez à créer des zones de widgets attrayantes, à les mettre en forme et à explorer les possibilités offertes par le Full Site Editing.

Le contexte des widgets dans WordPress

Au fil des ans, WordPress a su s’adapter et évoluer pour répondre aux besoins variés des utilisateurs. L’introduction de l’éditeur Gutenberg marque une étape majeure dans cette évolution. Les widgets, essentiels pour la personnalisation des sites, ont également bénéficié de cette transformation.

Traditionnellement, les widgets fonctionnaient par un simple glisser-déposer dans des zones spécifiques via l’onglet Apparence > Widgets. Aujourd’hui, avec Gutenberg, cette approche devient obsolète, offrant à la place une flexibilité inégalée grâce à l’utilisation de blocs personnalisables.

Comprendre les widgets

Les widgets WordPress sont des modules de contenu rectangulaires que l’on peut intégrer dans des zones définies de votre site, comme la barre latérale ou le pied de page. Des exemples classiques incluent des formulaires de contact, des listes de catégories, ou des flux d’actualités.

Les zones de widgets

Les zones de widgets sont déterminées par le thème que vous utilisez. Chaque thème peut proposer différentes zones pour insérer vos widgets, comme :

• Colonne de droite (sidebar)
• Colonne de gauche
• Pied de page divisé en colonnes
• Barre du haut
• Entête

La possibilité d’ajouter des widgets dans ces différentes zones permet d’optimiser l’expérience utilisateur et la navigation sur votre site.

Accéder aux zones de widgets dans l’administration

Pour manipuler vos zones de widgets, vous avez le choix entre deux méthodes pratiques dans WordPress :

Via le tableau de bord

En accédant à votre tableau de bord, cliquez sur Apparence > Widgets pour voir et gérer vos zones de widgets. Vous remarquerez une nouvelle section « Widgets désactivés » où vous pouvez conserver temporairement certains widgets sans les supprimer.

Par le biais de l’outil de personnalisation

Pour personnaliser de manière visuelle, rendez-vous sur Apparence > Personnaliser puis cherchez l’onglet « Widgets ». Cela vous permettra d’accéder rapidement aux zones assignées à votre thème.

Ajouter des contenus dans les zones de widget

Une fois dans la zone de widgets souhaitée, vous pouvez commencer à ajouter des blocs pour enrichir le contenu. Par exemple, visionnez comment créer une sidebar :

Créer une sidebar

Utilisez le thème Generate Press pour ajouter une colonne latérale avec les sections « Mes contacts » et « Mes services » :

• Ajoutez un bloc de Titre puis un bloc Paragraphe.
• Pour éviter un espacement excessif, configurez le bloc Groupe de widgets pour regrouper ces blocs.

En appliquant cette méthode, vous obtiendrez un affichage plus cohérent et esthétiquement agréable.

Créez un footer attractif

La conception d’un pied de page peut sembler délicate, mais même avec un thème limité, comme Twenty Twenty One, il est possible de créer un footer imbriqué avec plusieurs colonnes :

Exemple pour le pied de page

Pour cela, suivez les étapes ci-dessous :

• Ajoutez un Groupe de widget dans la zone « Pied de page ».
• Intégrez des titres et du contenu sous chaque titre pour vos colonnes « Mes contacts », « Mes réseaux sociaux », et « Ma newsletter ».

Répétez ces actions pour chaque colonne souhaitée afin d’obtenir un pied de page harmonieux et informatif. Un bon exemple d’organisation peut aider à améliorer l’expérience utilisateur.

Les widgets disponibles dans WordPress

Depuis l’évolution de Gutenberg, plusieurs widgets sont devenus des blocs à part entière. Voici un aperçu des widgets de base disponibles :

Avec l’arrivée de Gutenberg, la flexibilité d’ajout et de personnalisation des widgets est accrue, supprimant ainsi les anciennes limitations.

Le rôle du Full Site Editing

Avec l’arrivée de la version bêta du Full Site Editing (FSE), l’expérience de personnalisation de WordPress a radicalement changé. Plutôt que d’utiliser l’onglet traditionnel pour ajouter des widgets, toutes les modifications se font via l’éditeur de blocs.

Un nouveau paradigme

Avec FSE, il devient possible d’éditer visuellement tous les aspects de votre site en temps réel, rendant l’ajout de widgets non seulement plus accessible, mais également plus intuitif.

Cependant, il faut faire preuve de patience pour s’adapter à ces nouveaux outils. La création de contenu devient plus dynamique et interactive, incitant à explorer les différentes options qu’offre WordPress.

Maintenir une version classique

Pour ceux qui ne sont pas prêts pour cette migration vers le nouveau système, il est encore possible de conserver l’ancienne version de widgets via le plugin Classic Widget.

Installation du plugin

Ce plugin, conçu par les développeurs de WordPress, permet de rétablir l’ancien écran de gestion des widgets. Bien qu’il offre un retour à l’ancienne méthode, il est conseiller de se familiariser progressivement avec les nouvelles options pour profiter d’un maximum de fonctionnalités.

Conclusion

Finalement, l’intégration de Gutenberg dans la gestion des widgets WordPress est une avancée significative. Que ce soit pour la création de sidebars élégantes ou de pieds de page bien agencés, l’éditeur de blocs permet une personnalisation poussée et innovante.

Alors que WordPress semble s’orienter davantage vers le Full Site Editing, il est crucial de rester informé sur les nouvelles pratiques et de s’adapter aux fonctionnalités nouvellement offertes.

À propos de l’auteur…