Comment utiliser un éditeur visuel pour créer des widgets dans WordPress

L'édition visuelle a transformé la façon dont nous créons des widgets.

Ce qui nécessitait auparavant du code personnalisé peut maintenant être fait en quelques clics, rendant la création de widgets accessible à tous.

L'éditeur visuel de WordPress est devenu de plus en plus puissant, surtout avec les dernières mises à jour de l'éditeur de blocs Gutenberg.

Cela signifie que la création de widgets de blocs est maintenant plus intuitive que jamais. Que vous personnalisiez votre barre latérale, votre pied de page ou toute autre zone de widget, vous pouvez désormais ajouter du contenu magnifique et fonctionnel sans toucher une seule ligne de code.

Dans ce guide, nous vous montrerons exactement comment utiliser l'éditeur visuel pour créer des widgets pour votre site WordPress.

Pourquoi utiliser l'éditeur visuel pour créer des widgets dans WordPress ?

L'utilisation de l'éditeur visuel facilite la création de widgets personnalisés avec un contenu riche n'importe où sur votre site sans écrire de code.

Vous pouvez ajouter ces widgets aux zones prêtes pour les widgets comme le pied de page, l'en-tête ou la barre latérale, en fonction de votre thème.

Les widgets sont parfaits pour afficher des éléments tels qu'une section "À propos", les articles populaires, les formulaires d'inscription à la newsletter, ou même des flux sociaux intégrés.

WordPress vous permet d'ajouter des blocs à ces zones, et de nombreux plugins fournissent leurs propres blocs personnalisés.

Par exemple, avec le plugin Smash Balloon Twitter Feed, vous pouvez intégrer vos tweets récents n'importe où en utilisant son bloc.

Vous pouvez également créer des widgets entièrement personnalisés, comme une biographie d'auteur avec une photo et des liens vers des profils sociaux, pour rendre votre site plus attrayant.

Cela dit, voyons comment vous pouvez utiliser un éditeur visuel pour créer des widgets personnalisés dans WordPress.

Utilisez simplement les liens ci-dessous pour accéder à la méthode qui convient à votre thème :

Méthode 1 : Utilisation du plugin Widget Options (fonctionne avec tous les thèmes WordPress)

La manière la plus simple d'ajouter du contenu personnalisé à vos zones de widgets est d'utiliser le plugin Widget Options.

Il ajoute de nombreux paramètres supplémentaires à l'éditeur de widgets visuels standard de WordPress, y compris la possibilité d'afficher différents widgets en fonction du rôle de l'utilisateur, de masquer les widgets WordPress sur mobile, et plus encore.

Il ajoute également un widget Texte que vous pouvez personnaliser avec vos propres liens, images, formatage, et plus encore. Cela vous permet d' ajouter du contenu personnalisé et riche à vos zones de widgets sans avoir à écrire de code.

Tout d'abord, vous devez installer et activer le plugin Widget Options. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, accédez à la page Apparence » Widgets dans votre tableau de bord WordPress.

Vous verrez maintenant une liste de toutes les zones de widgets de votre thème WordPress. Le plugin Widget Options ajoute un widget Texte amélioré.

Trouvez ce widget et faites-le simplement glisser-déposer dans n'importe quelle zone de widget, comme la barre latérale ou le pied de page.

Une fois que vous avez fait cela, le plugin Widget Options ouvrira une petite fenêtre contextuelle.

Cette fenêtre contextuelle agit comme un mini-éditeur de page ou d'article, elle devrait donc vous sembler familière.

Pour commencer, vous pouvez saisir un titre, qui apparaîtra au-dessus du widget.

Après cela, vous pouvez taper du texte directement dans le petit éditeur, ajouter des liens et des images, modifier la mise en forme, ajouter des puces et des listes numérotées, et plus encore.

Vous pouvez également afficher ou masquer des widgets sur des pages WordPress spécifiques et ajouter des styles personnalisés au widget WordPress.

Lorsque vous êtes satisfait de la configuration du widget, cliquez sur le lien « Terminé » pour enregistrer ses paramètres.

Maintenant, si vous visitez votre site Web, vous verrez le nouveau widget de texte enrichi en direct.

Si vous utilisez un thème WordPress classique, vous pouvez également créer du contenu personnalisé pour les zones de widgets visuellement à l'aide du personnalisateur WordPress.

Allez simplement dans Apparence » Widgets, mais cette fois, cliquez sur « Gérer avec l'aperçu en direct ».

Cela ouvrira le personnaliseur avec les paramètres du widget déjà sélectionnés.

Vous pouvez maintenant cliquer sur la zone où vous souhaitez ajouter le widget personnalisé.

Après cela, cliquez sur « Ajouter un widget », ce qui ouvre un panneau montrant tous les différents widgets.

Trouvez simplement le widget Texte classique et cliquez dessus pour l'ajouter à votre site web.

Cela ouvre un petit éditeur où vous pouvez ajouter du texte, des liens, des médias, et plus encore.

Au fur et à mesure que vous apportez des modifications dans l'éditeur, l'aperçu en direct se mettra à jour automatiquement.

Lorsque vous êtes satisfait de l'apparence du widget, cliquez sur le bouton « Publier » pour le rendre visible sur votre blog ou site Web WordPress.

Si vous ne trouvez pas le personnaliseur de thème dans votre tableau de bord WordPress, veuillez consulter notre guide sur comment corriger le personnaliseur de thème manquant dans l'administration WordPress.

Méthode 2 : Utilisation de l'éditeur de site complet (fonctionne avec les thèmes WordPress compatibles avec les blocs)

Si vous utilisez un thème WordPress compatible avec les blocs, vous pouvez ajouter des blocs à n'importe quelle zone des modèles de votre site en utilisant l'éditeur complet du site.

De cette façon, vous pouvez créer du contenu personnalisé pour des zones comme la barre latérale en organisant des blocs WordPress standard directement dans les modèles de votre thème. Vous n’avez pas non plus besoin d’installer un plugin WordPress distinct.

C'est aussi un moyen d'ajouter des widgets à des zones que vous ne pouvez pas modifier à l'aide de l'éditeur de widgets standard de WordPress ou du personnaliseur. Par exemple, vous pouvez ajouter des widgets à votre modèle de page 404.

Pour commencer, rendez-vous sur Apparence » Éditeur dans le tableau de bord WordPress.

Par défaut, l’éditeur de site complet affiche le modèle d’accueil de votre thème, mais vous pouvez ajouter des widgets et des blocs à n’importe quelle zone.

Pour voir toutes les options disponibles, sélectionnez simplement « Modèles » ou « Parties de modèles ».

Vous pouvez maintenant cliquer sur le modèle ou la partie de modèle que vous souhaitez modifier.

WordPress affichera alors un aperçu du design. Pour continuer et modifier ce modèle, cliquez sur la petite icône en forme de crayon.

Une fois cela fait, cliquez sur l’icône bleue « + », puis trouvez le premier bloc que vous souhaitez utiliser pour votre contenu personnalisé.

Vous pouvez utiliser n’importe quelle combinaison de blocs de votre choix, mais si vous prévoyez d’utiliser une image et du texte, nous vous recommandons de commencer par le bloc Média et Texte.

Cela vous permet d'organiser facilement une image à côté d'un texte dans une belle mise en page. Dans cet esprit, le bloc Média et Texte est parfait pour créer une boîte d'informations sur l'auteur, comme vous pouvez le voir dans l'image suivante.

Après avoir sélectionné le bloc que vous souhaitez utiliser, faites-le simplement glisser et déposez-le dans une section de votre modèle, telle que la barre latérale et le pied de page.

L'éditeur complet du site vous donne accès à l'ensemble des outils et paramètres de WordPress. Cela signifie que vous pouvez ajouter un bouton d'appel à l'action, du texte, des liens, des images et d'autres contenus à une plus large gamme de blocs.

Cela dit, vous devriez être en mesure de créer exactement le contenu personnalisé que vous aviez en tête. Ajoutez simplement plus de blocs et de contenu à votre modèle jusqu’à ce que vous soyez satisfait de son apparence.

Pour plus d'idées sur la façon d'utiliser les zones prêtes pour les widgets de votre thème, veuillez consulter notre liste de contrôle des éléments à ajouter au pied de page de votre site WordPress.

Lorsque vous êtes satisfait des modifications que vous avez apportées, cliquez sur « Enregistrer ».

Maintenant, si vous visitez votre site Web WordPress, vous verrez le nouveau contenu personnalisé en direct dans votre modèle.

Questions fréquemment posées sur l'utilisation d'un éditeur visuel pour créer des widgets dans WordPress

Voici quelques questions que nos lecteurs posent fréquemment sur la création de widgets à l'aide de l'éditeur visuel :

Ai-je besoin d'installer un plugin pour créer des widgets visuellement ?

Pas toujours. Si vous utilisez un thème basé sur des blocs, vous pouvez ajouter des widgets à l'aide de l'éditeur complet du site sans plugins supplémentaires.

Cependant, si votre thème ne prend pas en charge l'éditeur complet du site, l'utilisation d'un plugin comme Widget Options vous donne plus de contrôle sur où et comment vos widgets apparaissent.

Pourquoi mes modifications de widget ne s'affichent-elles pas immédiatement ?

Si votre widget ne se met pas à jour instantanément, essayez de vider le cache de votre site et le cache du navigateur. Certains plugins de mise en cache ou CDN peuvent retarder les modifications.

L'utilisation de l'option Aperçu en direct est un bon moyen de confirmer les mises à jour de votre widget avant de publier.

Puis-je ajouter des blocs personnalisés de plugins (comme Smash Balloon ou WPForms) dans une zone de widget ?

Absolument. La plupart des plugins modernes, tels que Smash Balloon, WPForms ou MonsterInsights, incluent leurs propres blocs qui peuvent être placés dans n'importe quelle zone prête pour les widgets.

Vous pouvez faire glisser ces blocs dans votre barre latérale, votre pied de page ou votre en-tête comme n'importe quel autre bloc.

Quelle est la différence entre utiliser le plugin Widget Options et l'éditeur complet du site ?

Le plugin Widget Options fonctionne avec tous les thèmes, y compris les anciens qui ne prennent pas en charge l'éditeur complet du site.

L'éditeur complet du site ne fonctionne qu'avec les thèmes compatibles avec les blocs et offre une plus grande flexibilité de conception, car vous pouvez modifier les en-têtes, les pieds de page et les modèles visuellement.

Nous espérons que cet article vous a aidé à apprendre à utiliser facilement l'éditeur visuel pour les widgets WordPress. Vous voudrez peut-être aussi consulter notre guide sur les conseils pour maîtriser l'éditeur de contenu WordPress et comment créer une page de destination avec WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.