Vous envisagez de personnaliser certaines fonctionnalités de votre site Web WordPress ? L’un des grands avantages de WordPress est qu’il existe généralement de nombreuses façons différentes de faire la même chose.

Vous pouvez embaucher un concepteur Web, utiliser un constructeur de pages WordPress ou simplement rétrousser vos manches et ajouter du CSS personnalisé à votre site WordPress.

Si l’idée d’avoir un contrôle presque illimité sur le style des différents éléments de votre site Web vous passionne, vous êtes au bon endroit !

Lisez la suite pour apprendre tout ce que vous devez savoir sur la personnalisation de votre site Web WordPress avec un CSS personnalisé.

Comment ajouter un CSS personnalisé à WordPress à l’aide d’un plugin

Les plugins sont des outils utiles qui vous permettent d’ajouter des fonctionnalités ou des fonctions supplémentaires à votre site Web WordPress avec un minimum d’effort.

Il existe plusieurs plugins qui facilitent l’ajout de CSS personnalisé à un site Web WordPress. Certains des plus populaires et des plus recommandés incluent Extraits de code, CSS et JS personnalisés simplesCSS Hero et bien d’autres.

Pour ajouter un nouveau plugin, visitez votre tableau de bord WordPress, cliquez sur Plugins> Ajouter un nouveauet recherchez votre plugin préféré.

Pour cet exemple, nous allons travailler avec des extraits de code.

Ajout de CSS personnalisé à WordPress à l’aide d’extraits de code

Extraits de code facilite l’exécution d’extraits de code CSS sur votre site. Avec ce plugin, vous n’avez pas besoin de modifier vos fichiers de thème pour ajouter du code, car l’interface graphique imite le fichier function.php de votre thème.

Une fois que vous avez installé et activé le plugin, survolez Apparence

Quelques autres plugins CSS à considérer

Il existe de nombreux autres plugins CSS qui vous aideront à faire la même chose. Ils ont également leurs caractéristiques uniques, alors assurez-vous de les regarder de près avant de vous installer sur un.

Voici quelques-unes des meilleures options :

CSS et JS personnalisés simples

CSS et JS personnalisés simples vous permet d’ajouter à la fois du code CSS et JS sans modifier vos fichiers de thème ou de plugin.

Certaines de ses fonctionnalités clés incluent un éditeur de texte avec coloration syntaxique, l’ajout de CSS ou de JS à l’interface ou au côté administrateur, l’ajout d’autant de codes que vous le souhaitez et la conservation de vos modifications personnalisées lorsque vous modifiez le thème.

Héros CSS__HTML_TAG_239___

CSS Hero est un plugin convivial qui rend le processus d’édition CSS transparent. Il dispose d’une interface pointer-cliquer ou glisser-déposer simple et intuitive quirendez la personnalisation plus facile que jamais. Cela fonctionne mieux pour les débutants sans aucune compétence en codage.

Avec CSS Hero, vous avez accès à une vaste collection de polices Google et un contrôle total sur le jeu de couleurs.

Une fois que vous avez activé un plugin, vous pouvez le trouver

Certains de ces plugins peuvent également avoir leur section dédiée sur votre tableau de bord, mais cela varie selon le plugin.

Ajouter un CSS personnalisé à l’aide du personnalisateur WordPress

WordPress a un personnalisateur de thème intégré dont vous pouvez profiter. Quel que soit le thème que vous choisissez, vous pouvez toujours le modifier à votre goût en utilisant cette fonctionnalité.

Naviguez vers la section Apparence de votre tableau de bord et cliquez sur Personnaliser.

Faites défiler vers le bas de la page et cliquez sur CSS supplémentaire.

Ici, vous pourrez ajouter n’importe quel code CSS.

Lors de l’ajout du code, vous aurez la possibilité de le prévisualiser en mode bureau et mobile. Cela vous aide à avoir une idée de ce à quoi cela ressemble sur les deux interfaces avant de publier.

Cette méthode n’a pas besoin de plugins et beaucoup de gens ont tendance à opter pour cela car c’est plus simple.

Un avantage supplémentaire est que votre code CSS est conservé même lorsque vous mettez à jour votre thème ou changez de thème.

Comment ajouter un CSS personnalisé à WordPress à l’aide de l’éditeur de thème

Le moyen le plus direct d’écrire du CSS

Une étape supplémentaire à franchiser consiste à créer un thème enfant. Bien qu’il existe différentes façons de procéder, si vous utilisez le thème Astra, il est livré avec son propre générateur de thème enfant.

Pour commencer, suivez au générateur de thème enfant Astra.

Tout ce que vous avez à faire est d’entrer un nom pour votre nouveau thème enfant et de cliquer sur le bouton Générer. Votre nouveau thème enfant sera téléchargé

Si vous utilisez un thème différent, vous pouvez envisager d’utiliser un plugin tel que Configurateur de thème enfant.

Pour utiliser ce plugin, survolez Plugins puis cliquez sur Ajouter nouveau

Rechercher Configurateur de thème enfant. Une fois que vous l’avez trouvé, installez-le et activez-le.

Pour créer maintenant votre nouveau thème enfant, accédez à Outils

Cela ouvre l’assistant de configuration.

Cliquez sur Analyser pour savoir s’il est possible de créer un thème enfant à partir de votre thème actuel.

Une fois effacée, la prochaine étape consiste à créer votre thème enfant !

Cliquez simplement sur Créer un nouveau thème enfantet votre nouveau thème enfant sera prêt à être utilisé.

Ajout de CSS directement au fichier Style.CSS

Pour commencer, passez la souris sur Apparence

Cliquer surÉditeurde thème. Cela vous donnera accès à certains des fichiers sous-jacents qui font fonctionner votre thème.

Faites défiler vers le bas de la feuille de style et collez votre code CSS. Mettez à jour le fichier, et c’est tout !

Problèmes CSS courants de WordPress personnalisés et comment les résoudre

Comme vous l’avez vu, insérer du CSS personnalisé

Nous vous guiderons à travers certains défis CSS courants que vous pourriez rencontrer, comment les diagnostiquer et comment les résoudre.

1. Problèmes en cascade

La façon dont CSS fonctionne, il est possible de créer plusieurs règles qui possèdent les mêmes attributs d’un élément.

La mise en cascade est un moyen de les résoudre. La cascade est une propriété CSS qui donne la priorité aux règles CSS les plus récentes

Si vous avez créé des règles CSS qui ne sont pas reflétées, il est possible qu’il y ait une règle conflictuelle qui cascade celle que vous vouliez.

Si vous souhaitez créer des règles générales pour certains éléments, tout en stylisant certains de ces éléments un peu différemment, vous pouvez le faire en vous appuyant sur une propriété CSS appelée spécifiquement.

Les ID et les classes créent des règles spécifiques qui sont prioritaires

2. Les changements n’apparaissent pas

Après avoir utilisé le CSS personnalisé sur votre site, vous ne verrez peut-être aucune de vos modifications immédiatement. Pas de panique, il s’agit probablement d’un problème de mise en cache.

Commencez

Si ces étapes ne résolvent pas le problème, le problème sera probablement lié à la qualité de votre CSS. Vous faites probablement des erreurs ou des fautes d’orthographe

Lisez la suite pour savoir comment diagnostiquer et résoudre ce problème.

3. Erreurs et syntaxe CSS mal orthographiée

Les fautes d’orthographe sont plus courantes que vous ne le pensez et sont faciles à ignorer. Cela peut affecter la façon dont le CSS personnalisé est affiché.

Bien que le code puisse sembler correct, même des erreurs mineures peuvent empêcher votre site de ressembler à ce que vous attendez.

Pour ce faire, le moyen le plus simple consiste à utiliser un outil appelé validateur CSS, qui mettra en évidence les erreurs

Il existe différentes manières d’utiliser le validateur CSS du W3C en fonction de la façon dont vous avez inséré votre CSS. Vous pouvez coller des fragments de CSS, télécharger une feuille de style entière ou simplement coller l’URL du document s’il en une.

L’outil vérifiera ensuite votre CSS et mettra en évidence les erreurs basiques telles que les fautes d’orthographe ou l’omission d’un point-virgule, ainsi que les erreurs plus graves telles que le non-respect des normes W3C.

Qu’advient-il du CSS personnalisé si vous changez de thème ?

Lorsque vous utilisez un CSS personnalisé, vous risquez de leperdre lorsque vous changez de thème. Pour éviter cela, créez toujours un thème enfant lors de l’écriture de CSS personnalisé.

Si vous n’utilisez pas de thème enfant, vous pouvez enregistrer votre CSS personnalisé quelque part pour l’implémenter facilement avec votre nouveau thème lorsque vous changez de thème.

Prêt à créer du CSS personnalisé

Savoir comment modifier le CSS de votre installation WordPress vous donne plus de contrôle sur la conception de votre site Web. Cela vous permet également d’en faire beaucoup plus sans avoir à installer de plugins supplémentaires qui peuvent entraîner des ballonnements.

Celles-ci incluent l’utilisation d’un plugin, le travail

Si vous suivez ces étapes, vous personnalisez votre site Web comme un pro en un rien de temps ! N’oubliez pas de sauvegarder votre site Web et de créer d’abord un thème enfant !