Les widgets WordPress

Bases de Wordpress
Photo by Thea on Unsplash

Ce contenu doit être mis à jour pour mieux refléter les dernières mises à jour de WordPress. En attendant, les explications ci-dessous sont toujours valables pour comprendre le fonctionnement des Widgets. Seule la présentation sur votre site web devrait différer.

Apprenez à utiliser et à configurer les widgets WordPress de votre site web. Ce guide explique les concepts de base de l’utilisation des widgets pour étendre les fonctionnalités de votre site web et fournit une vue d’ensemble de la zone Widgets.

L’un des nombreux avantages de l’utilisation de WordPress est que vous pouvez facilement ajouter du contenu, étendre les fonctionnalités de votre site et reconfigurer la mise en page de votre site sans connaissances en code.

WordPress vous permet d’insérer, de supprimer et de gérer rapidement et facilement le contenu des barres latérales de votre site web à l’aide de widgets. Les barres latérales sont appelées aussi « sidebar » et sont une zone qui existe parfois à côté du contenu principal d’une page.

Une fois que vous saurez comment utiliser les widgets, vous pourrez facilement ajouter des éléments à votre site tels que :

  • Menu de pages
  • Catégories de publications
  • Archives d’articles de blog
  • Menus
  • Liens vers des sites externes
  • Publications que vous souhaitez promouvoir 
  • Commentaires
  • Bannières d’images
  • Témoignages de clients
  • Formulaire d’inscription à une newsletter
  • Galeries d’images
  • Flux Facebook/Twitter.
  • Des formulaires (par exemple, connexion, inscription…)
Zone de widgets wordpress du tableau de bord

Dans ce guide, vous apprendrez à utiliser et à configurer quelques widgets WordPress couramment utilisés.

Comment configurer vos widgets

Par défaut, votre site web devrait comporter un certain nombre de widgets actifs préinstallés, comme ceux qui affichent des liens vers les pages de votre site, les publications récentes, l’ajout d’un champ de recherche…

Correspondance des widgets wordpress entre frontend et tableau de bord

Dans ce guide, vous allez apprendre à ajouter, configurez et réorganisez divers widgets couramment utilisés, notamment :

  • Ajout d’un bouton Aide qui redirige vers la page de contact.
  • Ajout d’une section Catégories.

Pour accéder au panneau Widgets, allez dans Apparence> Widgets.

Lien pour accéder aux widgets wordpress

Cela fait apparaître l’écran Widgets dans votre navigateur web.

Page d'édition des widgets wordpress

Commençons à configurer vos premiers widgets.

Le widget Texte

Les widgets Textes sont incroyablement polyvalents.

Sélection du widget Texte
Champ d'édition du widget wordpress Texte

Cela vous permet d’afficher du texte facilement, mais aussi, si vous le formatez en HTML, de créer des listes, d’insérer des liens…

Pour en savoir plus sur l’HTML, retrouvez notre documentation sur les quelques balises HTML à connaitre !

Affichage frontend du widget Texte

Les widgets de texte vous permettent d’insérer à peu près tout ce que vous voulez dans vos zones widgetisées, telles que des listes d’éléments favoris, des publicités, des témoignages et plus encore, en écrivant simplement ou en collant votre code HTML dans la zone de contenu. Vous pouvez également donner un titre au widget.

Notre exemple : Ajouter un bouton d’aide cliquable avec un widget de texte

Pour cet exemple, nous allons mettre en place un bouton d’assistance cliquable dans la section de navigation de votre barre latérale, qui dirigera vos visiteurs vers une page de votre site (ou un site externe, par exemple un service d’assistance) où ils peuvent vous contacter pour obtenir de l’aide et du soutien.

Tout d’abord, créez une image graphique « Besoin d’aide ? » sur laquelle vos visiteurs pourront cliquer.

Exemple d'image à intégrer dans un widgets wordpress Texte

Nous allons configurer le bouton cliquable d’aide pour l’afficher en haut de la barre latérale 

Étape 1 – Téléchargez votre image

Pour afficher l’image du bouton cliquable sur votre site, l’image doit être téléchargée sur votre serveur. Téléchargez votre image sur votre serveur et notez l’URL pointant vers l’emplacement de votre image.
Par exemple : https://www.votredomaine.com/wp/wp-content/uploads/2021/01/supportbutton.jpg

Pour que les visiteurs soient redirigés vers votre page de contact lorsqu’ils cliquent sur le bouton d’aide, vous devez préalablement créer une page de contact. Nous allons lier l’image de votre bouton à cette URL à l’étape 3.

Étape 2 – Copiez l’URL de votre page de contact.

Copiez l’URL de votre page contact. Elle doit être de la forme https://votredomaine.com/contact.

Étape 3 – Créez votre code de widget texte.

Si vous ne savez pas coder, ne vous inquiétez pas ! Cela semble beaucoup plus technique que cela ne l’est. En termes simples, il vous suffit de créer les instructions pour votre bouton cliquable.

Votre code peut être saisi dans un simple éditeur de texte et ressemblera à ceci.

<center>
    <a href="https://votredomaine.com/contact">
        <img src="https://www.votredomaine.com/wp/wp-content/uploads/2021/01/bouton-contact.jpg">
    </a>
</center>

Remplacez les URL ci-dessus : 

  • https://votredomaine.com/contact par l’URL de l’emplacement de votre page de contact.
  • https://www.votredomaine.com/wp/wp-content/uploads/2020/11/bouton-contact.jpg par l’URL de l’emplacement de votre image.

Puis copiez tout le contenu de votre fichier texte dans votre presse-papiers lorsque vous avez terminé.

Si vous avez besoin d’aide pour comprendre le code HTML de base, consultez ce guide Quelques balises HTML utiles spécialement destiné aux non-geek !

Ensuite, retournez dans votre section Widgets.

Les sections de la page d'édition des widgets wordpress
Étape 4 – Ajouter un widget Texte.

Ajoutez un widget Texte à votre barre latérale à l’emplacement où votre bouton cliquable doit s’afficher.

Dans la zone Widgets disponibles, sélectionnez un widget Texte.

Sélection du widget Texte

Faites glisser votre widget Texte vers la section Widgets actifs et relâchez le widget en haut de la zone Widget.

Glisser-deposer du widget Texte
Étape 5 – Configurez le widget de texte.

Cliquez sur la barre de titre du widget Texte pour configurer les paramètres du widget. Collez le code avec les liens vers votre page de contact et le bouton graphique dans la zone de contenu de votre widget texte et cliquez sur Enregistrer.

Champ d'édition du widget Texte

Ajoutez un titre à votre widget si vous le souhaitez (par exemple « Besoin d’aide ? » ou « Assistance ») et collez le code avec les URL de destination correctes dans la zone Contenu, puis cliquez sur le bouton Enregistrer.

Exemple d'ajout de code HTML dans un widget Texte
Étape 6 – Actualisez le navigateur web.

Après avoir ajouté le widget texte et le code HTML, accédez à la page de votre site qui affiche la zone widgetisée et actualisez votre navigateur web. Si vous avez entré tous les liens correctement, alors le bouton s’affichera en haut de votre menu de la barre latérale.

Remarque :
Si vous ne savez quelle page visiter pour afficher votre widget, observez le nom de la zone de widget pour obtenir un indice. La plupart du temps, les développeurs garderont une dénomination simple (par ex : Sidebar Blog pour la barre latérale des pages du blog, Product Filter pour la zone des filtres produits de votre ecommerce…)

Résultat frontend de l'image cliquable en barre latérale
Étape 7 – Testez le bouton.

La dernière étape consiste à s’assurer que l’URL de destination fonctionne. Testez ceci en cliquant sur le bouton d’aide. Vous devriez être redirigé directement vers la page d’assistance.

Test de l'image cliquable sur la barre latérale

Le widget Catégories

[membership show_noaccess= »true »]

Maintenant que vous avez configuré un widget de texte contenant un bouton de contact, configurons un widget pour afficher les catégories dans la zone de navigation de la barre latérale. Tout ce que vous avez à faire est de placer le widget Catégories là où vous voulez que vos catégories de publications s’affichent en cliquant dessus et en le faisant glisser sur la zone de widgets de votre barre latérale.

Glisser le widget catégorie pour modifier l'ordre des widget dans la barre latérale
Lien pour la page d'édition des catégories d'articles de blog

Remarque :
Les catégories sont un élément essentiel pour la navigation et le référencement naturel d’un site web. Parcourez le chapitre Catégories de notre guide Les paramètres de Gutenberg pour apprendre à attribuer une catégorie à une page / publication.

Configurez les paramètres de votre widget Catégories comme décrit ci-dessous :

  • Dans Titre : saisissez quelque chose que vos visiteurs comprendront, par exemple, Choisissez un sujet… (1)
  • Si vous prévoyez d’avoir plusieurs catégories, cochez Afficher sous forme de liste déroulante. Cela réduit considérablement la taille du contenu de votre widget. Si vous prévoyez de publier des publications dans quelques catégories uniquement, laissez l’option Afficher en tant que liste déroulante décochée. (2)
  • Vous pouvez laisser les options restantes non cochées ou voir les notes supplémentaires sur la configuration de ce widget ci-dessous.
  • Cliquez sur Enregistrer pour mettre à jour vos paramètres.
Champs d'édition du widget wordpress Catégories
  • Cliquez sur Visiter le site ou rechargez votre page pour voir comment les catégories de la barre latérale s’afficheront pour vos visiteurs.
Résultat frontend du widget Catégorie

Conseils :
– Modifiez la catégorie de publication par défaut Non classé en quelque chose de plus significatif.
– Si vous utilisez des catégories imbriquées sur votre site, vous pouvez cocher l’option Afficher la hiérarchie, sinon laissez cette case décochée.
– Pour afficher le nombre de publications publiées dans chaque catégorie, activez la case à cocher Afficher le nombre de publications.

[/membership]

Le widget Image

[membership show_noaccess= »true »]

Le widget Image vous permet d’ajouter une image à votre barre latérale. Pour ajouter une image, faites glisser un widget Image vers votre zone de widgets active.

Glisser-déposer le widget Image

Cliquez sur Ajouter une image.

Bouton pour ajouter une image dans le widget Image

Sélectionnez une image dans la bibliothèque d’images, vérifiez ou ajoutez des détails d’image (par exemple Légende, Texte ALT, Description…) si vous le souhaitez et cliquez sur le bouton Ajouter au widget.

Fenetre modal pour ajouter un média au widget Image

Pour en savoir plus sur l’ajout d’images à WordPress, consultez ce guide : Les médias

L’image se chargera automatiquement dans la zone du widget.

Résultat du widgets wordpress après chargement de l'image

Ajoutez un titre à votre image si vous le souhaitez, ou laissez le champ Titre vide et cliquez sur Enregistrer.

Visitez la page concernée de votre site web et vous devriez voir l’image affichée à l’endroit où vous avez placé votre widget d’image.

Résultat frontend du wigets wordpress Image

Si vous voulez lier votre image à une URL, revenez à votre widget image et cliquez sur Modifier l’image.

Bouton d'édition du widget Image

Ajoutez une URL dans Détails de l’image > Paramètres d’affichage > Lien vers et cliquez sur le bouton Mettre à jour.

Ajout d'une URL à l'image du widget
[membership]

Le widget Vidéo

[membership show_noaccess= »true »]

Le widget  Vidéo vous permet d’ajouter à votre barre latérale des fichiers vidéo de votre bibliothèque multimédia ou des vidéos YouTube ou Vimeo. Pour ajouter une vidéo à la barre latérale, faites glisser un widget Vidéo vers votre zone de widgets actifs.

Glisser-déposer du widget Vidéo

Cliquez sur le bouton Ajouter une vidéo.

Bouton pour ajouter une vidéo au widgets wordpress Vidéo

Sélectionnez une vidéo dans votre médiathèque ou ajoutez une URL vidéo et cliquez sur le bouton Ajouter au widget.

Champ pour ajouter l'URL d'une vidéo au widget

Ajoutez un titre au widget si vous le souhaitez et cliquez sur Enregistrer.

Bouton enregistrer du widget Vidéo

Votre vidéo s’affichera sur votre site où le widget vidéo a été ajouté.

Résultat front end du widget Vidéo
[/membership]

Maintenant que vous savez comment configurer les widgets par défaut de WordPress, vous pourrez explorer seul les autres widgets disponibles sur votre site !

Comment gérer les widgets WordPress

Les zones de widgets

Pour complétement comprendre comment gérer les widgets, il est utile de passer en revue certains des concepts de base de l’utilisation des widgets :

De nombreux thèmes WordPress prennent en charge les widgets et fournit des sections widgetisées intégrées dans la mise en page du thème dans lesquelles vous pouvez utiliser des widgets, tels que la barre latérale, la zone d’en-tête et le pied de page. Selon le thème que vous utilisez, les widgets peuvent également être trouvés dans la zone de contenu.

Exemple d'un thème avec plusieurs zones de widgets

Ces sections prêtes à accueillir vos widgets correspondent aux Zones de widgets.

Détail de la page d'édition des widgets lorsqu'il y a plusieurs zones de widgets wordpress

Réorganiser les widgets à l’aide du glisser-déposer

Vous pouvez facilement insérer, activer, désactiver, réorganiser et supprimer des widgets simplement en faisant glisser et déposer des éléments dans votre section Widgets.

Glisser-déposer pour un widget

Vous pouvez également facilement re-configurer vos widgets en utilisant le glisser-déposer.

Suppression de widgets

La suppression de widgets est très simple.

Par exemple, nous allons vous montrer comment supprimer le widget de Recherche de votre barre latérale.

Exemple d'un widget Rechercher

Pour supprimer un widget d’une zone de widget active, développez le widget et cliquez sur le lien Supprimer.

Bouton Supprimer pour le widget Rechercher

Ouf, vous avez fini ! Vous avez fait le tour des widgets

Chargement