Que sont les widgets WordPress et comment les utiliser ?

Les widgets WordPress sont des éléments autonomes et modulaires, comme les barres de recherche, les listes d’articles récents ou les flux de réseaux sociaux, que vous pouvez ajouter à des zones telles que les barres latérales, les pieds de page et les en-têtes sans écrire de code. Ils servent principalement à enrichir les fonctionnalités et la mise en page d’un site web.

Le fonctionnement des widgets dépend de votre thème. Les thèmes classiques disposent d’une interface dédiée aux widgets, tandis que les thèmes basés sur des blocs les remplacent entièrement par l’éditeur de site. WordPress propose plusieurs widgets intégrés, auxquels vous pouvez en ajouter d’autres à l’aide d’extensions.

Pour tirer le meilleur parti des widgets, limitez chaque zone aux éléments réellement utiles, évitez de surcharger la mise en page, vérifiez leur compatibilité avec votre thème et surveillez leur impact sur la performance de votre site WordPress.

Que sont les widgets WordPress ?

Un widget WordPress est un petit élément de contenu autonome que vous pouvez placer dans les zones de widgets de votre site. Ces sections de mise en page sont définies par le thème WordPress que vous avez choisi. Elles se trouvent généralement dans les barres latérales et les pieds de page, mais peuvent aussi apparaître dans les en-têtes, au-dessus ou en dessous du contenu, ou à certains emplacements des templates de page.

Les widgets sont modulaires : lorsque vous modifiez votre site WordPress, vous pouvez ajouter, supprimer ou réutiliser chaque widget indépendamment, sans affecter le reste de la mise en page.

Les widgets WordPress existent depuis la version 2.2, sortie en 2007. À l’origine, les thèmes définissaient des zones dédiées dans lesquelles vous pouviez glisser-déposer des widgets prédéfinis depuis le tableau de bord.

Avec la sortie de WordPress 5.8 en 2021, les thèmes classiques ont intégré les widgets basés sur des blocs. Au lieu de vous limiter aux widgets traditionnels, vous pouvez ajouter des blocs tels que des images, des galeries, des boutons ou du code HTML personnalisé dans les zones de widgets. Cette évolution a apporté la souplesse de l’éditeur de blocs à des parties de la mise en page auparavant très rigides.

Avec les thèmes basés sur des blocs comme Twenty Twenty-Five, l’éditeur de site remplace le système de widgets classique. Les en-têtes, les pieds de page, les barres latérales et les autres éléments de mise en page sont alors gérés sous forme de blocs WordPress dans l’éditeur de site. Il n’existe donc plus de menu distinct pour les widgets.

Chaque widget possède ses propres paramètres, enregistrés séparément pour chaque instance. Un même widget peut ainsi se comporter différemment selon la zone dans laquelle il se trouve.

Par exemple, le widget Articles récents permet de définir le nombre d’articles affichés et d’indiquer si leur date doit apparaître. Les widgets Texte et HTML personnalisé acceptent du balisage personnalisé et peuvent donc servir à intégrer des formulaires, des publicités ou des outils.

Types et exemples de widgets WordPress

Les widgets WordPress se répartissent en trois grandes catégories : les widgets par défaut inclus dans WordPress, les widgets tiers ajoutés à l’aide d’extensions et les widgets WordPress personnalisés développés spécifiquement pour un site.

Chaque catégorie répond à des besoins différents, mais toutes permettent d’enrichir les fonctionnalités du site et d’améliorer l’expérience des visiteurs.

Widgets de base par défaut

Les widgets de base répondent aux besoins les plus courants et sont disponibles dans toutes les installations de WordPress. En voici quelques exemples :

• Recherche. Ajoute une barre de recherche pour permettre aux visiteurs de trouver rapidement du contenu.
• Derniers articles. Affiche automatiquement vos derniers articles afin de maintenir le contenu des barres latérales à jour.
• Liste des catégories et Archives. Permettent aux visiteurs de parcourir le contenu par thème ou par date de publication.
• Calendrier. Affiche une vue mensuelle avec des liens vers les articles publiés à chaque date.
• HTML personnalisé. Sert couramment à intégrer des formulaires d’inscription à une newsletter, des scripts publicitaires ou des outils tiers.

Widgets tiers

Les widgets tiers sont ajoutés lors de l’installation d’une extension et permettent de proposer des fonctionnalités spécifiques dans les zones de widgets. Ils améliorent l’expérience utilisateur en rendant certaines actions importantes plus facilement accessibles sur l’ensemble du site.

Par exemple, les extensions d’e-commerce peuvent ajouter des widgets de catégories de produits ou des aperçus du panier. Les extensions de réseaux sociaux peuvent proposer des icônes ou des flux qui encouragent les visiteurs à suivre vos comptes ou à partager du contenu. Quant aux extensions de formulaires, elles permettent d’intégrer directement des formulaires de contact ou d’abonnement dans les barres latérales ou les pieds de page.

Widgets WordPress personnalisés

Les widgets WordPress personnalisés sont développés spécifiquement pour répondre aux besoins propres à un site. Ils sont souvent utilisés lorsque les widgets par défaut ou les extensions ne proposent pas les fonctionnalités nécessaires.

Il peut s’agir, par exemple, de widgets affichant les horaires d’ouverture, les coordonnées propres à un établissement, un annuaire du personnel ou du contenu promotionnel dynamique.

Les widgets personnalisés nécessitent un travail de développement, mais offrent un contrôle total sur la mise en page, le comportement et la performance. Ils conviennent donc particulièrement aux entreprises ayant des besoins spécifiques.

Différences entre les widgets et les extensions WordPress

Une extension WordPress ajoute ou modifie des fonctionnalités à l’échelle du site. À l’inverse, un widget est un composant modulaire de l’interface utilisateur qui affiche un contenu ou une fonctionnalité spécifique à un emplacement défini de la mise en page, comme une barre latérale, un pied de page ou un en-tête.

Les extensions peuvent ajouter des systèmes entièrement nouveaux, comme des outils de référencement, des plateformes d’e-commerce, des fonctionnalités de sécurité ou des types de publications personnalisés, qui s’appliquent à l’ensemble du site web.

Par exemple, pour commencer à vendre des produits sur votre site, vous devez installer une extension d’e-commerce.

Les widgets, quant à eux, s’appuient sur les fonctionnalités natives de WordPress ou sur celles fournies par des extensions. Utilisez donc un widget lorsque la fonctionnalité existe déjà et que vous souhaitez simplement l’afficher à un emplacement précis. Par exemple, pour afficher vos derniers articles dans une barre latérale, utilisez le widget Articles récents.

Dans la plupart des cas, un site WordPress a besoin à la fois d’extensions et de widgets.

Comment ajouter des widgets WordPress

Les widgets WordPress peuvent uniquement être placés dans des zones de widgets, c’est-à-dire des sections de mise en page définies par votre thème, comme les barres latérales, les pieds de page ou d’autres emplacements prévus à cet effet. Ces zones permettent d’ajouter, d’organiser et de configurer les widgets individuellement.

La procédure d’ajout des widgets WordPress dépend du thème que vous utilisez. Les thèmes classiques disposent d’un écran Widgets dédié dans le tableau de bord WordPress, tandis que les thèmes basés sur des blocs permettent de gérer les éléments de mise en page dans l’éditeur de site.

Comme ces deux systèmes fonctionnent différemment, les étapes à suivre varient selon le type de thème.

Comment ajouter des widgets dans un thème basé sur des blocs

Si vous utilisez un thème basé sur des blocs, suivez ces étapes pour ajouter l’un des widgets préinstallés à votre site web WordPress :

1. Dans le panneau d’administration de WordPress, accédez à Apparence → Éditeur.
2. Dans le menu Pages, sélectionnez la page que vous souhaitez modifier.
3. Survolez l’emplacement où vous souhaitez ajouter un widget jusqu’à ce que le bouton plus (+) apparaisse.

4. Cliquez sur le bouton + pour ouvrir la liste des blocs. Sélectionnez Tout parcourir pour afficher le panneau complet des blocs.

5. Sélectionnez votre widget pour prévisualiser son rendu sur la page.
6. Personnalisez le widget à l’aide du panneau de réglages qui s’affiche lorsque vous cliquez dessus.

7. Une fois la personnalisation terminée, cliquez sur Enregistrer.

Comment ajouter des widgets dans un thème classique

Les thèmes classiques utilisent toujours un système dédié aux widgets. Vous pouvez les ajouter et les gérer depuis le tableau de bord WordPress, mais uniquement dans les zones de widgets définies par votre thème.

Voici comment ajouter un widget dans un thème WordPress classique :

1. Dans votre tableau de bord WordPress, accédez à Apparence → Widgets.
2. La zone de widgets proposée par votre thème apparaît dans le panneau d’aperçu. Cliquez sur le bouton + pour ajouter un widget.

3. Sélectionnez le widget souhaité et personnalisez-le selon vos besoins.

4. Pour terminer, cliquez sur Mettre à jour.

Comment ajouter des widgets à l’aide d’une extension

Certaines extensions WordPress enrichissent le système de widgets par défaut en ajoutant de nouveaux widgets ou en offrant davantage de contrôle sur ceux qui existent déjà, notamment grâce à des règles de visibilité ou à des réglages d’affichage.

Si vous utilisez un thème classique, des extensions complémentaires au thème comme Widget Options, RaraTheme Companion ou Custom Sidebars peuvent étendre les fonctionnalités des widgets WordPress sur votre site.

Avec les thèmes basés sur des blocs, dont la mise en page repose entièrement sur des blocs gérés dans l’éditeur de site, les fonctionnalités liées aux widgets peuvent être limitées, voire indisponibles. Dans ce cas, privilégiez des extensions de blocs comme Spectra, Kadence Blocks ou Stackable pour ajouter des fonctionnalités.

Une fois que vous avez trouvé l’option qui vous convient, installez l’extension. Vous pourrez ensuite ajouter et configurer les widgets supplémentaires en suivant les mêmes étapes que dans les sections précédentes.

Bonnes pratiques pour utiliser les widgets WordPress

Bien utilisés, les widgets peuvent améliorer votre site. En revanche, s’ils sont trop nombreux ou mal configurés, ils risquent de surcharger la mise en page et de nuire à la performance de votre site WordPress.

Les conseils suivants vous aideront à utiliser les widgets de manière pertinente et à éviter les erreurs courantes.

Privilégiez la pertinence et la simplicité

Chaque widget doit avoir une utilité claire pour le visiteur. S’il ne facilite pas la navigation, ne met pas en avant un contenu important ou ne contribue pas aux conversions, il n’a probablement pas sa place dans cette zone.

Par exemple, une barre latérale comprenant un champ de recherche, une courte présentation et une liste de catégories facilite la navigation. En revanche, accumuler des widgets simplement pour remplir la barre latérale peut surcharger visuellement la page, et la plupart des visiteurs ne feront pas défiler toute la liste.

Privilégiez une approche minimaliste :

• Misez sur l’utilité plutôt que sur la décoration.
• Limitez le nombre de widgets à trois à cinq par zone.
• Harmonisez l’espacement, l’alignement et la typographie pour que les widgets s’intègrent visuellement au reste du site.

Des widgets bien placés doivent accompagner votre contenu, et non lui faire concurrence.

Tenez compte de l’impact sur la performance

Chaque widget ajoute du balisage, des scripts ou des requêtes externes. Les widgets qui chargent des flux de réseaux sociaux, des cartes intégrées ou des scripts publicitaires tiers génèrent des requêtes supplémentaires vers le serveur à chaque chargement de page. Cela affecte directement la performance du site WordPress, en particulier sur les appareils mobiles.

Pour identifier les éléments qui ralentissent le chargement, testez la vitesse de votre site avec des outils comme Google PageSpeed Insights ou GTmetrix avant et après l’ajout de widgets.

Si votre site présente des problèmes de performance, vérifiez en priorité les widgets qui chargent des ressources externes, car ils font partie des causes courantes de ralentissement d’un site WordPress.

Certains widgets, comme Produits associés, affichent du contenu dynamique qui peut devoir être exclu du cache pour fonctionner correctement. Une mauvaise configuration de la mise en cache peut provoquer des dysfonctionnements ou ralentir votre site.

Vérifiez la compatibilité avant de publier

Tous les widgets ne sont pas parfaitement compatibles avec tous les thèmes ni avec toutes les zones de widgets.

Par exemple, un widget conçu pour un pied de page large peut mal s’afficher dans une barre latérale étroite. De même, les widgets tiers peuvent entrer en conflit avec le CSS ou le JavaScript de votre thème.

Prévisualisez toujours les widgets à l’aide du Personnalisateur, de l’éditeur de site ou d’un environnement de staging avant de publier vos modifications. Vous pourrez ainsi repérer les problèmes de mise en page, les conflits de styles ou les comportements inattendus avant qu’ils n’affectent votre site en ligne.

Pensez d’abord aux appareils mobiles

Sur les petits écrans, de nombreux thèmes déplacent les widgets de la barre latérale sous le contenu principal. Les visiteurs sur mobile peuvent donc devoir faire défiler l’intégralité d’un article avant de voir le contenu de la barre latérale.

Posez-vous les questions suivantes :

• Ce widget doit-il apparaître sur mobile ?
• Reste-t-il utile lorsqu’il est placé sous le contenu ?

Si nécessaire, utilisez les réglages de visibilité pour masquer certains widgets sur des appareils spécifiques.

Erreurs courantes à éviter avec les widgets WordPress

Pour que vos widgets améliorent votre site au lieu de lui nuire, évitez les erreurs courantes suivantes :

• Surcharger les zones de widgets. Un trop grand nombre de widgets encombre la mise en page et ralentit le chargement.
• Mal ordonner les widgets. Placez les widgets les plus importants en haut. Les utilisateurs font rarement défiler une barre latérale jusqu’en bas.
• Négliger l’affichage sur mobile. Testez toujours les widgets sur les téléphones et les tablettes, et pas uniquement sur les écrans d’ordinateur.
• Utiliser des extensions obsolètes. Avant d’installer une extension de widgets, vérifiez la date de sa dernière mise à jour et son nombre d’installations actives.
• Négliger les contrôles de performance. Évaluez toujours l’impact des nouveaux widgets sur la performance de votre site WordPress.
• Mal configurer la mise en cache. Vérifiez que les widgets dynamiques sont exclus du cache lorsque nécessaire.

Étape suivante : créez un widget WordPress personnalisé

Les widgets par défaut et ceux fournis par des extensions répondent à la plupart des besoins courants. Si vous avez besoin d’une solution plus adaptée à votre site web, créer un widget personnalisé vous permet d’ajouter précisément les fonctionnalités dont vous avez besoin.

Vous pouvez, par exemple, afficher des horaires d’ouverture, une liste dynamique basée sur des types de publications personnalisés ou un appel à l’action réutilisable adapté à votre marque. Un widget personnalisé vous donne un contrôle total sur son affichage, sa mise en page et son comportement.

La création d’un widget personnalisé nécessite une bonne maîtrise des bases du PHP, puisque WordPress repose sur ce langage. Vous devez également comprendre le fonctionnement de la classe WP_Widget et maîtriser les bases du HTML et du CSS pour structurer et mettre en forme le contenu généré par le widget.

Bien comprendre comment les thèmes et les extensions interagissent dans WordPress facilitera également le processus, mais il n’est pas nécessaire d’être un développeur expérimenté pour vous lancer.

Si vous souhaitez en créer un vous-même, suivez notre tutoriel étape par étape pour savoir comment créer un widget personnalisé dans WordPress.

Tout le contenu des tutoriels de ce site est soumis aux normes éditoriales et aux valeurs rigoureuses de Hostinger.

L'auteur

Faradilla Ayunindya

Add Hostinger as a preferred source on Google

Faradilla, plus connue sous le nom de Ninda, possède 10 ans d’expérience en tant que linguiste et 5 ans en tant que spécialiste du marketing de contenu chez Hostinger. Elle aime suivre les tendances technologiques et aider les autres à résoudre leurs problèmes. Pendant son temps libre, Ninda aime apprendre de nouvelles langues et s’intéresser aux sciences de la vie, ainsi que regarder des vidéos d’animaux. Pour en savoir plus sur Ninda, retrouvez-la sur LinkedIn.

Plus d'informations sur Faradilla Ayunindya