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. Que vous personnalisiez votre barre latérale, votre pied de page ou toute autre zone de widget, vous pouvez maintenant créer de beaux widgets fonctionnels 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 ?

Les widgets vous permettent d'ajouter du contenu riche en dehors de la zone principale des pages et des articles. Chaque thème WordPress est différent, mais vous pouvez généralement ajouter des widgets à des zones telles que le pied de page, l'en-tête et la barre latérale.

De nombreux sites Web utilisent ces zones pour afficher une section « à propos », afficher leurs articles les plus populaires, ajouter un formulaire d'inscription à une newsletter par e-mail, et plus encore.

WordPress vous permet d'ajouter une large gamme de blocs à toute zone prête pour les widgets, et de nombreux plugins WordPress ajoutent également leurs propres blocs.

Par exemple, si vous utilisez Smash Balloon Twitter Feed, vous pouvez alors intégrer les tweets récents dans toute zone prête pour les widgets en utilisant le bloc Twitter Feed du plugin.

Cependant, il peut parfois être utile de créer un widget personnalisé qui affiche du contenu multimédia riche à vos visiteurs. Par exemple, vous pourriez vouloir télécharger la photo de votre auteur, puis l'utiliser pour créer un widget de biographie d'auteur, avec des liens vers vos différents profils de réseaux sociaux.

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)
• Méthode 2 : Utilisation de l'éditeur de site complet (fonctionne avec les thèmes WordPress compatibles avec les blocs)
• Foire aux questions

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

Le moyen le plus simple de créer un widget personnalisé est d'utiliser le plugin Widget Options.

Il ajoute de nombreux paramètres supplémentaires à l'éditeur visuel de widgets 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, etc. Cela vous permet de créer un widget personnalisé 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 prêtes pour les widgets dans votre thème WordPress. Les options que vous verrez peuvent varier en fonction de votre thème.

Vous verrez également tous les widgets que vous pouvez ajouter à votre site. Nous allons utiliser le widget Texte pour ce guide, alors faites-le simplement glisser et déposez-le dans n'importe quelle zone prête pour les widgets.

Vous verrez maintenant une petite fenêtre contextuelle.

Cette fenêtre contextuelle est essentiellement 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 saisir 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 préférez, vous pouvez créer un widget personnalisé visuellement à l'aide du personnaliseur 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 « Texte » 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, consultez 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 prenant en charge les blocs, vous pouvez ajouter des blocs à toute zone prête pour les widgets à l'aide de l'éditeur complet du site.

De cette façon, vous pouvez créer des widgets personnalisés en organisant les blocs WordPress standard dans une zone prête pour les widgets, telle que la barre latérale. Vous n’avez pas non plus besoin d’installer un plugin WordPress séparé.

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 personnalisateur. 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 recherchez le premier bloc que vous souhaitez utiliser dans votre widget 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 zone prête pour les widgets, telle que la barre latérale et le pied de page.

L'éditeur de site complet vous donne accès à l'ensemble des outils et des 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 à un plus large éventail de blocs.

Cela dit, vous devriez être en mesure de créer exactement le widget que vous aviez en tête. Ajoutez simplement plus de blocs et de contenu à la zone prête pour les widgets 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 choses à 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 widget personnalisé en direct.

Foire aux questions

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 comment 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 cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.