Comment ajouter des styles personnalisés aux widgets WordPress (2 méthodes)

La création de sites WordPress nous a appris que les petits détails font une grande différence. La personnalisation du style des widgets peut transformer de bons sites Web en excellents.

Chez WPBeginner, nous faisons en sorte que chaque élément fonctionne ensemble. Prenez nos widgets de barre latérale, par exemple.

Nous avons personnalisé leur apparence pour mettre en évidence les ressources importantes et les faire s'intégrer parfaitement au design de notre site. Cela nous aide à établir la confiance avec des millions de visiteurs.

Dans ce guide, nous partagerons les méthodes les plus simples pour personnaliser les styles des widgets WordPress. Vous apprendrez des techniques pour rendre vos widgets professionnels et les intégrer parfaitement à votre thème.

Pourquoi ajouter des styles personnalisés aux widgets WordPress ?

Par défaut, les widgets WordPress utilisent le style de votre thème, ce qui ne correspond pas toujours à vos objectifs de conception. L'ajout de styles personnalisés vous donne plus de contrôle sur l'apparence de vos widgets.

Voici pourquoi cela vaut la peine de personnaliser :

• 🎨 Correspondance avec votre marque : Les styles personnalisés vous permettent d'aligner les couleurs, les polices et l'espacement des widgets avec la marque de votre site pour un look plus cohérent.
• 👓 Amélioration de la lisibilité : Parfois, la disposition par défaut des widgets n'est pas facile à lire. La personnalisation du style peut aider à améliorer la taille des polices, le contraste ou l'alignement pour une meilleure expérience utilisateur.
• 🌟 Mettre en évidence le contenu important : Vous voulez que vos articles récents, vos appels à l'action ou vos informations de contact se démarquent ? Le CSS personnalisé peut rendre ces widgets plus attrayants.
• 🧹 Nettoyer les designs encombrés : Si un widget semble trop chargé ou déplacé, les styles personnalisés aident à rationaliser son apparence et à l'intégrer plus harmonieusement dans votre mise en page.
• 🧩 Créer des mises en page uniques : Les styles personnalisés ouvrent des possibilités de mise en page, comme transformer un widget de texte basique en une boîte promotionnelle stylisée ou aligner plusieurs widgets dans une grille.

En bref, styliser vos widgets vous aide à aller au-delà de l'apparence par défaut et à créer un site web plus soigné et professionnel.

Cela dit, examinons comment ajouter facilement des styles personnalisés à vos widgets WordPress.

Nous vous montrerons 2 façons de personnaliser vos widgets WordPress avec des styles personnalisés. Vous pouvez utiliser ces liens rapides pour accéder à celui qui vous convient le mieux :

Méthode 1 : Styliser les widgets WordPress avec du code CSS

Étant donné que les widgets WordPress utilisent désormais l'éditeur de blocs, vous disposez de plusieurs façons de modifier leur apparence, en fonction du niveau de contrôle dont vous avez besoin.

Nous allons d'abord passer en revue les options intégrées, puis nous vous montrerons comment ajouter des styles entièrement personnalisés :

1. Utilisation des paramètres de bloc par défaut

Avant d'ajouter du code personnalisé, il est utile de vérifier si le bloc possède déjà les paramètres dont vous avez besoin.

Si vous allez sur la page Apparence » Widgets et que vous cliquez sur un bloc spécifique, vous verrez souvent des options dans le panneau des paramètres du bloc pour modifier les couleurs et la typographie.

2. Ajout d'une classe CSS personnalisée

Si les paramètres par défaut ne suffisent pas, vous pouvez ajouter une « classe » spécifique au widget. Cela agit comme une étiquette qui vous permet de cibler uniquement ce widget avec votre code personnalisé.

Cliquez simplement sur le widget où vous souhaitez ajouter des styles personnalisés. Ensuite, faites défiler jusqu'à l'onglet « Avancé » sous le panneau Bloc. À partir de là, vous pouvez ajouter une classe CSS personnalisée.

Pour ce tutoriel, tapez latest-articles dans le champ. Assurez-vous de ne pas ajouter de point (.) au début du nom de la classe.

N'oubliez pas de sauvegarder les paramètres de votre widget en cliquant sur le bouton « Mettre à jour ».

3. Application de vos styles personnalisés

Maintenant que vous avez donné un nom de classe à votre widget, vous devez ajouter le code qui indique à WordPress comment le styliser. Il y a deux façons de faire cela :

Option 1 : Utilisation du personnalisateur de thème

C'est le moyen le plus rapide d'ajouter du code si vous voulez juste le tester.

Allez simplement sur la page Apparence » Personnaliser et basculez vers l'onglet « CSS additionnel ». Là, vous verrez un aperçu en direct de votre site Web avec une boîte pour ajouter vos règles CSS.

Option 2 : Utilisation de WPCode (Recommandé)

Nous recommandons d'utiliser WPCode car il enregistre vos styles personnalisés même si vous changez de thème plus tard. C'est aussi le moyen le plus sûr d'ajouter des extraits de code à WordPress.

Nous l'avons testé de manière approfondie et avons constaté que c'était l'un des moyens les plus sûrs d'intégrer du code personnalisé dans votre thème. Si vous gérez de nombreux extraits CSS, WPCode facilite leur organisation et leur suivi.

Pour plus de détails sur ses fonctionnalités et ses avantages, n'hésitez pas à consulter notre avis sur WPCode.

Tout d'abord, assurez-vous d'installer le plugin WPCode. Pour des instructions étape par étape, vous pouvez lire notre guide sur comment installer un plugin WordPress.

Ensuite, allez dans Extraits de code » + Ajouter un extrait et sélectionnez « Ajouter votre code personnalisé (Nouvel extrait) ». Cliquez ensuite sur le bouton « + Ajouter un extrait personnalisé ».

Maintenant, donnez un nom à votre nouveau CSS personnalisé. Il peut s'agir de quelque chose de simple comme « Style de widget personnalisé ».

Ensuite, changez le type de code en « Snippet CSS ».

Ensuite, ajoutez votre CSS personnalisé dans le champ.

Voici un CSS de base que nous avons utilisé :

.latest-articles { 
background-color:#def4f1;
padding:10px;
}

Une fois terminé, faites simplement défiler vers le bas jusqu'à la section Insertion. Assurez-vous que la méthode d'insertion est définie sur « Insertion automatique » et l'emplacement sur « En-tête du site entier ».

Après cela, basculez le bouton en haut à droite jusqu'à ce qu'il indique « Actif » et cliquez sur « Enregistrer le extrait ».

Après avoir ajouté votre CSS personnalisé, vous pouvez afficher votre site Web WordPress sur mobile ou sur ordinateur pour le voir en action.

Voici à quoi ressemble le nôtre sur notre site démo WordPress :

Méthode 2 : Styliser les widgets WordPress avec CSS Hero (sans code)

Écrire du code CSS manuellement peut être délicat pour les débutants. Une petite erreur pourrait casser la mise en page de votre site, et apprendre la syntaxe prend du temps.

Si vous ne voulez pas vous occuper du code, vous pouvez utiliser CSS Hero. C'est un plugin de style visuel qui vous permet de personnaliser vos widgets avec une simple interface de pointage et de clic.

Vous pouvez en apprendre davantage sur le plugin dans notre avis sur CSS Hero.

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

Après l'activation, le plugin ajoutera un nouvel élément de menu à votre barre d'administration WordPress en haut.

Ensuite, vous devez visiter la page où vous pouvez voir le widget que vous souhaitez styliser et cliquer sur le bouton CSS Hero en haut.

Cela ouvrira la page dans l'interface de l'éditeur CSS Hero.

C'est un éditeur en direct où vous pouvez simplement pointer et cliquer sur n'importe quel élément de votre site Web et modifier son style.

Placez simplement votre souris sur le widget que vous souhaitez styliser. Ensuite, cliquez pour le sélectionner.

Dans cet exemple, nous avons sélectionné notre widget de recherche.

Après cela, vous pouvez utiliser le menu de gauche pour styliser votre widget comme vous le souhaitez. Cela inclut des options de style avancées comme les dégradés, la typographie, les marges intérieures, les marges extérieures et les bordures.

Dans l'exemple ci-dessous, nous avons modifié la taille de la police du widget de recherche WordPress afin qu'il se démarque encore plus.

Vous pouvez également modifier des éléments spécifiques du widget si nécessaire.

Par exemple, nous avons décidé de modifier le rayon des bordures du bouton et des champs de recherche. De cette façon, ils paraissent plus arrondis et stylés.

Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Ensuite, allez-y et prévisualisez votre site Web pour voir votre nouveau design WordPress en action.

Foire aux questions sur les options de style dans WordPress

Voici quelques questions que nos lecteurs ont fréquemment posées concernant la personnalisation de différents éléments dans WordPress :

Comment ajouter des widgets personnalisés dans WordPress ?

Pour ajouter un widget personnalisé, allez dans Apparence » Widgets dans votre tableau de bord et cliquez sur le bouton Ajouter un bloc (+). Vous pouvez ensuite sélectionner n'importe quel bloc disponible, tel que du texte, des images ou les articles récents, et le placer dans votre barre latérale ou votre pied de page.

Comment ajouter des styles dans WordPress ?

La manière la plus sûre d'ajouter des styles est d'utiliser l'onglet CSS additionnel dans le personnaliseur de thème ou un plugin comme WPCode. Ces méthodes vous permettent d'ajouter du code CSS personnalisé sans modifier les fichiers principaux de votre thème, garantissant que vos modifications ne seront pas perdues lors des mises à jour.

Pouvez-vous personnaliser un widget ?

Oui, vous pouvez personnaliser presque tous les aspects d'un widget. Les widgets WordPress modernes ont des paramètres intégrés pour les couleurs d'arrière-plan et la typographie. Pour un contrôle plus avancé, vous pouvez attribuer une classe CSS spécifique au widget et le styliser manuellement avec du code.

Comment créer un widget de menu personnalisé dans WordPress ?

Vous pouvez ajouter un menu personnalisé en utilisant le bloc Menu de navigation dans votre zone de widgets. Tout d'abord, créez votre menu spécifique dans Apparence » Menus, puis sélectionnez simplement ce menu dans les options déroulantes des paramètres du bloc Menu de navigation.

Comment créer un widget personnalisé ?

Si vous avez besoin de fonctionnalités spécifiques qui ne se trouvent pas dans les blocs par défaut, vous pouvez créer un widget personnalisé en écrivant un plugin ou en utilisant un outil comme WPCode. Cependant, si vous souhaitez simplement un design personnalisé, vous pouvez généralement y parvenir en regroupant des blocs existants et en appliquant des styles CSS personnalisés.

Nous espérons que cet article vous a aidé à apprendre comment ajouter des styles personnalisés aux widgets WordPress. Vous voudrez peut-être aussi consulter notre sélection des meilleurs constructeurs de pages glisser-déposer pour WordPress et notre comparaison des avantages et inconvénients entre les thèmes WordPress gratuits et premium.

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.