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 retrousser 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é.

3 façons différentes d’ajouter du CSS personnalisé à WordPress

Il existe différentes façons d’ajouter du CSS personnalisé à WordPress et aucune d’entre elles n’est nécessairement la meilleure solution pour chaque situation.

Nous vous guiderons à travers chacun d’entre eux, et vous pourrez décider lequel utiliser !

Avant d’aller plus loin, il est maintenant temps de sauvegarder votre site Web.

Tout d’abord, commencez par sauvegarder votre site Web

Quel que soit votre niveau de compétence, la sauvegarde de votre site Web devrait être l’une des premières choses à faire avant d’essayer de personnaliser quoi que ce soit.

Si vous suivez toutes les étapes que nous allons vous montrer, rien ne risque de mal tourner. Cependant, si vous faites une erreur à un moment donné, vous risquez de casser votre site Web.

Avoir une sauvegarde vous donne un moyen facile de réinitialiser votre site Web si cela se produit.

Le moyen le plus simple de créer une sauvegarde consiste à utiliser un plugin de sauvegarde dédié comme UpdraftPlus.

Pour commencer, installez et activez simplement le plugin UpdraftPlus à partir du référentiel WordPress.

Une fois activé, accédez à Réglages dans le panneau de gauche et cliquez sur Courant ascendantPlus Sauvegardes.

Vous pouvez ensuite cliquer sur Sauvegarder maintenant pour créer une sauvegarde sur votre serveur Web.

Alternativement, vous pouvez cliquer sur le Courant ascendantPlus interne Réglages pour sélectionner un emplacement de stockage distant supplémentaire.

Maintenant que votre site Web est sauvegardé en toute sécurité, il est temps de créer un style personnalisé avec CSS dans WordPress !

Comme mentionné, il existe trois façons différentes de le faire. Nous commencerons par ajouter du CSS personnalisé à WordPress à l’aide d’un plugin.

Prêt? Commençons!

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 functions.php de votre thème.

Une fois que vous avez installé et activé le plugin, survolez Apparence dans le backend WordPress et cliquez sur CSS personnalisé.

Dans l’interface Simple Custom CSS, collez simplement votre code CSS et cliquez sur Mettre à jour le CSS personnalisé.

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

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 qui rend 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 dans votre tableau de bord via Apparence >> CSS personnalisé.

Certains de ces plugins peuvent également avoir leur section dédiée sur votre tableau de bord, mais cela variera 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 le Apparence section 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 dans votre site Web WordPress consiste à utiliser l’éditeur WordPress. C’est aussi la méthode la plus risquée, mais si vous avez sauvegardé votre site Web, tout ira bien.

Une étape supplémentaire à franchir 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, accédez 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 Générer bouton. Votre nouveau thème enfant sera téléchargé par défaut.

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 dans votre backend WordPress.

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 dans le tableau de bord WordPress et cliquez sur Thèmes enfants.

Cela ouvrira 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. Dans la plupart des cas, il ne devrait y avoir aucun problème ici.

Une fois effacé, 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 dans le menu de gauche du tableau de bord WordPress.

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

Par défaut, il ouvrira le style.css file, qui est le fichier que vous recherchez.

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é dans WordPress est vraiment facile. Mais des défis peuvent survenir de temps à autre. Ne vous inquiétez pas, bien que ces problèmes puissent survenir pour de nombreuses raisons, ils sont généralement faciles à résoudre.

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 affectent les mêmes attributs d’un élément. Par exemple, un en-tête peut être affecté par deux règles contradictoires qui peuvent lui attribuer des couleurs différentes.

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 par rapport aux plus anciennes en cas de conflit.

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écificité.

Les ID et les classes créent des règles spécifiques qui sont prioritaires dans la cascade. Cela signifie qu’il n’y a pas d’importance s’il y a deux ou plusieurs règles en conflit. Tout ce que vous avez à faire est d’ajouter un qualificatif comme une classe ou un ID à l’élément que vous souhaitez styliser différemment.

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 par vider le cache de votre navigateur. Si cela ne résout pas le problème, videz votre cache WordPress.

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 dans votre code CSS.

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. Dans ce cas, vous devez vérifier le code pour vous assurer qu’il n’y a pas de fautes d’orthographe.

Pour ce faire, le moyen le plus simple consiste à utiliser un outil appelé validateur CSS, qui mettra en évidence les erreurs dans votre CSS. Le validateur CSS le plus populaire disponible est le W3C (World Wide Web Consortium) Validateur CSS.

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 a une.

L’outil vérifiera alors 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 le perdre lorsque vous changez de thème. Pour éviter cela, créez toujours un thème enfant lors de l’écriture de CSS personnalisés.

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é dans WordPress ?

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.

Dans cet article, nous avons couvert trois méthodes pour le faire.

Celles-ci incluent l’utilisation d’un plugin, le travail dans le personnalisateur et l’édition directement dans le fichier style.css de WordPress.

Si vous suivez ces étapes, vous personnaliserez 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 !