Comment personnaliser votre thème WordPress à l'aide de CSS personnalisés

Publié: 2022-07-06

L'ajout de CSS personnalisé à votre site WordPress aide à modifier l'apparence de votre site Web. Pour commencer, chaque thème WordPress est développé à l'aide de composants de langage principal spécifiques. Ceux-ci incluent PHP, HTML, CSS et JavaScript. PHP est utilisé pour le code Backend tandis que HTML, CSS et JavaScript sont utilisés pour le frontend. En résumé, les trois derniers sont utilisés pour rendre ce que l'utilisateur voit dans son navigateur.

Parfois, lors de la conception de votre site WordPress avec un thème que vous avez installé, vous souhaiterez peut-être modifier l'apparence de certaines sections ou éléments du site. Vous voudrez peut-être également avoir un site Web différent de ce que les autres utilisateurs de thèmes ont en place. Quel que soit le cas, modifier l'apparence du site impliquerait CSS.

L'ajout de CSS personnalisé peut sembler facile pour les utilisateurs et les développeurs WordPress de tous les jours, mais ce n'est peut-être pas un processus simple et direct, en particulier pour les développeurs Web débutants.

Dans cet article, nous examinerons ce qu'est le CSS ainsi que certaines des façons que vous pouvez utiliser pour ajouter un CSS personnalisé à votre site Web.

Table des matières

Qu'est-ce que CSS

Comment identifier le CSS à personnaliser

Comment ajouter un CSS personnalisé

  • Via un thème enfant
  • Via le personnalisateur WordPress
  • Utiliser un plugin tiers

Raisons courantes pour lesquelles les modifications CSS ne prennent pas effet

Conclusion

Qu'est-ce que CSS

CSS signifie feuille de style en cascade. Il s'agit d'un langage Web utilisé pour styliser les éléments HTML de votre site Web. Fondamentalement, les composants frontaux de votre site Web que vous voyez dans votre navigateur sont construits à l'aide de HTML. Afin de styliser ces éléments pour un affichage visuel approprié pour les utilisateurs, vous devrez utiliser CSS pour cela. CSS travaille donc main dans la main avec HTML afin de restituer correctement les éléments dans le front-end.

Un exemple d'application de CSS peut être vu sur notre site Web staxwp.com. Sur la première page, nous avons le titre où une partie du texte qu'il contient est mise en surbrillance, comme indiqué ci-dessous :

CSS est utilisé pour modifier la couleur du texte en surbrillance, c'est pourquoi l'affichage semble différent du reste du texte.

Ce n'est qu'une des nombreuses façons dont CSS peut être appliqué à différents éléments. Vous pouvez également utiliser CSS pour modifier la couleur des liens, la taille des polices du texte, ajouter des contours à divers éléments et bien d'autres propriétés.

Dans la plupart des thèmes WordPress conformes aux normes de codage WordPress, le code CSS du thème est stocké dans le fichier style.css. Ce fichier se trouve à la racine de vos fichiers de thème.

Comment identifier le CSS à personnaliser

Afin d'identifier le CSS à personnaliser, vous devrez d'abord identifier l'élément ou le contenu auquel vous devez appliquer le style. Disons que, par exemple, nous souhaiterions modifier les couleurs du texte des boutons dans notre page produit ici ou bien le texte dans les boutons illustrés ci-dessous :

Pour ce faire, vous devrez utiliser des outils de développement. Nous vous recommandons d'utiliser un navigateur tel que Google Chrome ou Firefox pour que vous puissiez utiliser facilement et correctement ces outils. Dans notre cas ici, nous utiliserons le navigateur Google Chrome.

Pour utiliser ces outils, vous devrez d'abord "inspecter l'élément". Pour y parvenir pour notre texte de bouton, faites un clic droit sur l'un des textes dans les éléments du bouton et sélectionnez l'option "inspecter". Vous trouverez ci-dessous un exemple de capture d'écran à ce sujet :

Un panneau d'outils de développement avec un certain nombre d'onglets sera alors rendu.

Dans la capture d'écran, vous remarquerez qu'il y a deux onglets qui sont rendus en première vue. Ce sont les "éléments" et les "styles". Dans d'autres navigateurs, ceux-ci peuvent être nommés différemment.

Si vous avez correctement inspecté l'élément, vous aurez une vue du texte du bouton dont nous aimerions modifier la propriété de texte, dans l'onglet Éléments.

Étant donné que dans notre cas ici, nous ne sommes intéressés que par la modification de la propriété de couleur du texte sur les boutons, nous pouvons soit effectuer ce qui suit :

1. Cliquez sur l'icône « Nouvelle règle de style » illustrée ci-dessous :

En cliquant dessus, une feuille de style d'inspecteur sera rendue. Dans ce cas, une classe CSS pour le bouton sera générée comme illustré ci-dessous.

Notre code réel dans ce cas sera donc :

 .stx-btn-text { }

Maintenant, pour modifier la couleur des textes des boutons, nous devrons ajouter le code couleur. Pour cela, nous allons utiliser la propriété color, lui spécifier une couleur et l'ajouter à notre code d'origine. Ce sera:

 color: #ff0000;

Dans le cas ci-dessus, #ff0000 est le code couleur que nous avons l'intention d'utiliser. Vous pouvez définir n'importe quel autre code de couleur de votre choix.

Notre code final sera maintenant :

 .stx-btn-text { color: #ff0000; }

2. Alternativement, lors de l'inspection d'un élément, vous pouvez utiliser le premier code de l'élément rendu ou bien le code utilisé pour styliser l'élément, à des fins de style. Voici une illustration de ce code :

Dans le code, ajoutez-y la propriété de couleur et le code de couleur, ainsi que supprimez les autres propriétés qui y sont spécifiées puisque dans notre cas ici, nous n'avons pas besoin de les écraser :

 color: #ff0000;

Le code final se lira désormais comme suit :

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000; }

L'une ou l'autre des approches ci-dessus peut être utilisée pour identifier et déterminer le CSS à personnaliser ou à ajouter.

Lors de la spécification du code, vous remarquerez peut-être que le changement de couleur prend effet, mais ce n'est que lorsque la page est actualisée. Nous devons donc enregistrer le CSS pour que le CSS prenne toujours effet. Cela nous amène maintenant à notre prochaine étape.

Comment ajouter un CSS personnalisé

Maintenant que nous avons examiné comment identifier et créer un CSS personnalisé. Nous avons maintenant besoin d'un moyen d'ajouter et d'enregistrer le CSS dans notre site Web.

Il existe différentes approches que nous pouvons utiliser pour ajouter du CSS personnalisé à notre site Web. Ceux-ci inclus:

  1. Via un thème enfant
  2. Via le personnalisateur WordPress
  3. Utiliser un plugin tiers

Via un thème enfant

Un thème enfant vous permet de personnaliser votre thème parent, éliminant ainsi la probabilité de perdre vos personnalisations lors des mises à jour du thème. Pour plus de détails sur les thèmes enfants et comment les configurer, vous pouvez consulter la rubrique Thèmes enfants ici : Thèmes enfants .

Un thème enfant contient un fichier style.css. C'est le fichier dans lequel vous pouvez ajouter votre CSS personnalisé. Pour y accéder, cela peut être réalisé en accédant aux fichiers de votre site via FTP à l'aide d'un logiciel FTP tel que Filezilla. Vous pouvez également y accéder depuis Apparence > Éditeur de fichiers de thème et sélectionner votre thème enfant dans la liste déroulante des thèmes, comme illustré ci-dessous :

Après avoir identifié le fichier style.css, ajoutez votre code personnalisé à la dernière ligne du fichier et enregistrez vos modifications. Dans notre cas ici, nous ajouterons le code à la ligne 12 comme illustré ci-dessous :

Via le personnalisateur WordPress

L'ajout de CSS personnalisé via WordPress Customizer est une autre excellente option à considérer. Dans cette méthode, vous devrez :

Accédez à la section Apparence > Personnaliser dans votre tableau de bord WordPress.

Sur l'écran suivant, un certain nombre d'options telles que des menus, des widgets et bien d'autres en fonction de votre thème seront affichées sur le panneau de gauche. Faites défiler vers le bas jusqu'à ce que vous trouviez l'option "CSS supplémentaire".

En cliquant sur la section "CSS supplémentaire", vous aurez une section de saisie de code où vous pourrez ajouter votre CSS personnalisé. Ajoutez maintenant votre CSS personnalisé à la section :

Après avoir ajouté votre code CSS, vous pouvez l'enregistrer en tant que brouillon pour le publier ultérieurement ou le publier immédiatement.

Il est également important de noter que cette section fournit la validation et la mise en évidence de la syntaxe du code. S'il y a donc des erreurs dans votre code, lors de son ajout, vous aurez une mise en évidence à ce sujet.

Utilisation d'un plugin tiers

L'ajout de CSS personnalisé à l'aide d'un plugin est une autre considération. Ceci est en fait plus applicable si vous changez de thème plus tard et que vous souhaitez que le CSS que vous avez ajouté soit également utilisé dans le nouveau thème.

Il existe un certain nombre de plugins tiers qui peuvent être utilisés pour ajouter du CSS personnalisé à votre site WordPress. Ici, nous couvrirons au moins trois de ces plugins, et vous pouvez choisir d'utiliser l'un ou l'autre sur votre site Web.

CSS Pro personnalisé

Le plugin Custom CSS Pro fournit une interface facile à utiliser avec une expérience d'édition en direct pour les utilisateurs qui ont besoin d'ajouter du CSS personnalisé dans leurs sites Web.

Lors de l'installation du plugin, vous pouvez procéder à l'ajout de votre CSS personnalisé en accédant à la section Paramètres > CSS personnalisé Pro dans votre tableau de bord WordPress.

Dans l'éditeur en direct fourni, vous pouvez ajouter votre CSS personnalisé et enregistrer vos modifications. Ci-dessous un exemple à ce sujet :

CSS d'origine du site

Le plug-in CSS SiteOrigin fournit de puissantes capacités d'édition CSS. Un ajout clé au plugin est qu'il vous permet d'identifier un sélecteur que vous pouvez utiliser pour appliquer un CSS personnalisé à un élément.

Une fois le plugin installé et activé, vous devrez accéder à la section Apparence > CSS personnalisé comme illustré ci-dessous :

Ensuite, ajoutez votre CSS personnalisé dans l'éditeur CSS personnalisé rendu comme indiqué ci-dessous :

Si vous souhaitez également utiliser l'éditeur visuel, vous devrez cliquer sur l'icône en forme d'œil mise en évidence ci-dessous :

CSS personnalisé simple

Le plugin Simple Custom CSS est un plugin léger et facile à utiliser qui permet aux administrateurs de sites Web d'ajouter du CSS personnalisé à leurs sites Web.

Lors de l'installation du plugin, vous devrez accéder à la section Apparence > CSS personnalisé.

Ensuite, dans l'éditeur rendu, ajoutez votre CSS personnalisé. Vous trouverez ci-dessous un exemple d'illustration à ce sujet :

Une fois cela fait, enregistrez vos modifications en cliquant sur le bouton "Mettre à jour le CSS personnalisé".

Raisons courantes pour lesquelles les modifications CSS ne prennent pas effet

Dans certains cas, le CSS personnalisé que vous ajoutez à votre site Web peut ne pas toujours prendre effet. Cela peut être causé par un certain nombre de raisons, parmi lesquelles :

1. Mise en cache

Si vous avez installé un plug-in de mise en cache, cela peut entraîner la mise en cache de divers actifs sur votre site. Il est donc essentiel que vous effaciez la mise en cache du site après avoir enregistré votre CSS personnalisé ou que vous désactiviez le plug-in de mise en cache que vous pourriez utiliser.

Parfois, vous pouvez également avoir une mise en cache au niveau du serveur si votre fournisseur d'hébergement prend en charge la mise en cache du serveur. Dans de tels cas, il est important que votre hôte désactive la mise en cache pour vous ou que cela soit effectué à partir de votre panneau d'hébergement si une option pour cela est fournie.

2. Erreurs de syntaxe

Une erreur de syntaxe CSS est généralement une erreur dans votre code CSS. Il peut s'agir par exemple d'un deux-points, d'un point-virgule manquants ou même d'une orthographe incorrecte de la propriété.

Il est important de vérifier que votre code CSS ne comporte pas de telles erreurs. Vous pouvez utiliser un validateur CSS tel que le CSS Validation Service pour effectuer la validation CSS.

3. Spécificité CSS

La spécificité CSS détermine essentiellement quel CSS a priorité si vous avez des règles CSS ciblant le même élément.

Disons par exemple dans notre cas si nous avions deux codes CSS pour modifier la couleur des boutons, où l'un des codes utilise un ID pour spécifier le style et l'autre utilise une classe. 

 #stx-btn-text { color: #000000; }
 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000; }

Le code CSS avec le sélecteur d'ID est ce qui sera utilisé. Cela est dû au fait que les sélecteurs d'ID ont une spécificité plus élevée que les classes. Dans le cas ci-dessus, la couleur qui serait appliquée serait le noir (#000000).

Vous pouvez cependant utiliser la règle !important après la valeur de la propriété afin de passer outre la spécificité CSS. Par exemple, dans notre cas ici, si nous appliquons la règle !important au code avec une classe, alors c'est ce code CSS qui sera appliqué et dans un tel cas la couleur serait rouge (#ff0000).

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000 !important; }

La règle !important doit cependant être utilisée avec parcimonie (seulement quand c'est vraiment nécessaire). L'une des raisons à cela est que si la règle est appliquée sur un élément dans plusieurs instances, cela peut entraîner une confusion lors de l'application des styles et peut s'avérer assez difficile pour déboguer le problème.

Conclusion

Comprendre comment identifier et ajouter du CSS personnalisé dans votre site WordPress peut être très utile pour les propriétaires de sites. L'un des avantages est de réduire le temps nécessaire à la conception de votre site. En outre, cela aide également à éliminer le besoin d'externaliser un développeur pour les personnalisations CSS mineures.

Nous espérons que ce guide a été instructif en ce qui concerne l'ajout de CSS personnalisé. Vous pouvez en savoir plus sur CSS ici . Si vous avez des suggestions, des questions ou des commentaires, n'hésitez pas à les soulever dans la section des commentaires ci-dessous.