Sommaire
Vous cherchez un moyen simple d’ajouter du CSS personnalisé à partir de votre site web ? Normalement, vous devez modifier les fichiers de votre thème ou de vos plugins pour les personnaliser avec du CSS. Pour les débutants, cela peut représenter beaucoup de travail, mais j’ai une solution.
Au lieu de localiser et de modifier ces fichiers, vous pouvez utiliser le plugin CSS et JS Simple Custom. Cela vous permet d’ajouter directement des CSS et JS personnalisés pour votre site web. C’est rapide, facile et, surtout, pratique à faire.
Que fait le CSS sur mesure ?
L’édition du CSS de votre thème ou de votre plugin vous permet de personnaliser leur apparence de différentes manières. Cela permet de donner aux thèmes l’aspect que vous souhaitez et de garantir que tous les plugins que vous ajoutez correspondront à votre thème.
Après tout, certains plugins ont tendance à ne pas correspondre au design de votre site web.
L’ajout de CSS personnalisés permet de modifier les couleurs, les polices et même la présentation d’un thème ou d’un plugin, mais il convient de noter que l’on ne peut pas toujours en faire autant. En effet, vous ajoutez ou modifiez simplement le CSS d’un élément spécifique. Vous n’en créez pas un nouveau.
Cependant, si vous êtes suffisamment doué, il est possible de modifier le code du thème ou du plugin pour une personnalisation encore plus poussée.
Mais en général, vous ne faites que modifier quelques valeurs, mais vous ne les créez pas à partir de zéro.
Comment ajouter un CSS personnalisé simple dans WordPress
Étape 1 : Installation de CSS et JS personnalisés simples
Le plugin Simple Custom CSS et JS est un ajout formidable pour tout site web qui souhaite modifier l’apparence de son site. Il vous permet d’ajouter des feuilles de style CSS et JS sans quitter votre site web. Il comprend un éditeur de texte, des ajouts illimités, la possibilité de conserver les modifications même lorsque vous changez de thème, et bien plus encore.
Cependant, vous vous demandez peut-être quelle est la quantité de connaissances en codage nécessaire pour tirer le meilleur parti de ce plugin, et la réponse vous surprendra probablement.
En réalité, vous n’avez pas besoin de connaissances en matière de codage. Le plugin se charge d’ajouter le code à votre site web. Tout ce dont vous êtes responsable est de fournir le code, et la bonne nouvelle est que Internet contient une variété de CSS et JS pour personnaliser WordPress.
Cela étant dit, je vous encourage vivement à apprendre les bases du CSS. Cela vous donnera plus d’options et vous permettra de modifier facilement le code. Plus important encore, cela vous aidera à identifier tout problème dans le code qui pourrait causer des difficultés.
Commençons par cliquer sur Plugins et sélectionner l’option Add New dans le panneau d’administration de gauche.
Recherchez Simple Custom CSS et JS dans la boîte de recherche disponible. Vous obtiendrez ainsi des plugins supplémentaires qui pourraient vous être utiles.
Faites défiler vers le bas jusqu’à ce que vous trouviez le plugin CSS et JS Simple Custom, puis cliquez sur le bouton “Installer maintenant” et activez le plugin pour l’utiliser.
Étape 2 : Comprendre l’éditeur de texte
Ce plugin vous permet d’ajouter du CSS, du JS et du HTML, ce qui couvre toutes les langues dont vous aurez besoin dans WordPress pour modifier son apparence. Le plugin est extrêmement simple à utiliser, c’est pourquoi il est devenu si populaire au fil des ans.
Note : Je me concentrerai sur CSS dans ce tutoriel, mais le processus est identique pour JS et HTML mais dans un langage de codage différent.
Dans le panneau d’administration de gauche, cliquez sur Custom CSS JS et sélectionnez l’option Add Custom CSS.
Il s’agit d’un éditeur de texte de base et, par défaut, il y a un commentaire que vous pouvez supprimer sans problème. Vous pouvez ajouter un titre en haut, et dans le coin supérieur gauche, vous remarquerez un pinceau. C’est l’option “Beautify Code”. Tout ce qu’elle fait, c’est supprimer les espaces supplémentaires entre les lignes de code.
Note : Je recommande personnellement de ne pas utiliser cette fonctionnalité car elle rend le code plus difficile à lire. Cependant, c’est à vous de choisir.
Dans la partie droite, vous pouvez choisir entre plusieurs options. Vous pouvez notamment choisir si le code doit être un fichier externe ou interne, s’il doit figurer dans l’en-tête ou le pied de page, et où il doit être placé sur le site web.
Toutes les autres options de cette page ne sont disponibles que si vous passez à l’édition Pro du plugin.
C’est tout ce que l’éditeur lui-même a à offrir en termes de fonctionnalités.
Gardez à l’esprit que si le code n’a pas le résultat souhaité lorsqu’il est entré dans l’éditeur, c’est que vous l’avez simplement mal saisi. Vous pouvez modifier librement tout code que vous ajoutez à tout moment et la modification de votre site web se fait immédiatement.
Étape 3 : Ajout de CSS, JS et HTML personnalisés
Il existe de nombreuses ressources que vous pouvez utiliser pour apprendre en profondeur le CSS ou toute autre langue dans un délai raisonnable. C’est pourquoi ce tutoriel n’en traitera pas. Toutefois, je souhaite vous faire prendre conscience de la quantité de CSS personnalisés disponibles en ligne que vous pouvez utiliser sur votre site web.
Vous en trouverez un bel exemple sur le blog ThemeIsle.
Et comme toujours, si vous cherchez simplement sur Google ce que vous cherchez, c’est probablement en ligne. Tant que vous pouvez trouver le code, il vous suffit de le copier et de le coller dans l’éditeur de texte du plugin. Il n’y a vraiment rien de compliqué à faire.
Félicitations pour avoir appris à ajouter du CSS personnalisé dans WordPress. Si vous souhaitez apprendre le langage CSS, je vous recommande vivement d’utiliser le W3Schools comme ressource. Il contient tout ce dont vous avez besoin pour le maîtriser. Le site contient également des ressources pour d’autres langues.
Les plugins ont besoin du plus de CSS
Dans de nombreux cas, les fonctionnalités des plugins ont tendance à se démarquer sur votre site web. Si la situation s’est améliorée au fil des ans, beaucoup d’entre eux utilisant par défaut la palette de couleurs de votre thème, il y en a encore beaucoup qui ne le font pas.
Et certains d’entre eux peuvent vraiment se démarquer comme un pouce endolori.
Certains plugins disposent déjà de moyens intégrés permettant d’ajouter du CSS pour personnaliser son apparence, mais cette fonctionnalité fait encore défaut dans certains cas. La plupart des modifications que vous apportez ne consisteront qu’à changer les couleurs, les polices, la taille des caractères et d’autres petites choses pour les adapter à votre site web.
Ce plugin résout parfaitement ce problème en facilitant l’ajout de CSS personnalisés. Assurez-vous donc que chaque fonctionnalité que vous ajoutez correspond au reste de votre site web.
Dois-je coder dans WordPress ?
WordPress est souvent présenté comme le CMS pour lequel vous n’avez pas besoin d’écrire une seule ligne de code, et c’est vrai dans une certaine mesure.
Bien que vous puissiez faire un très bon site web sans aucun codage, il y a des limites à ce que vous pouvez réaliser. Et c’est exactement là que la connaissance des CSS, JS ou HTML peut vous aider. Ce sont des langages puissants, mais simples, qui vous permettent de personnaliser l’apparence de votre site web.
Sans eux, presque tous les sites web qui utilisent le même thème auraient l’air presque identiques.
Cela permet à votre site web de se démarquer de la concurrence et, surtout, de leur donner l’apparence que vous souhaitez.
Quel CSS personnalisé comptez-vous ajouter à votre site web ? Avez-vous trouvé le plugin CSS et JS personnalisé simple à utiliser ?
