CSS (Cascading Style Sheets) est un langage comportant un ensemble de règles qui définissent l’apparence des éléments de votre site web.
Ces règles contrôlent les éléments de conception de votre site web, tels que la taille et la couleur de la police, la couleur d’arrière-plan de votre site et l’espace entre les différentes sections.
Considérez les CSS comme les instructions de style de votre site web. Alors que votre thème WordPress utilise des éléments HTML pour structurer le contenu de votre site (comme les titres, les paragraphes, les images et les boutons), les CSS indiquent au navigateur comment présenter visuellement ces éléments.
Pourquoi éditer des feuilles de style CSS dans WordPress ?
Bien que les thèmes WordPress offrent une grande variété d’options de conception, vous pouvez parfois vouloir apporter des modifications spécifiques à l’apparence de votre site web au-delà des paramètres intégrés au thème. C’est là que l’édition de CSS s’avère utile pour les utilisateurs de WordPress.
Par exemple, vous pouvez modifier la couleur d’arrière-plan d’une section spécifique de votre site web ou modifier légèrement la taille de la police pour une meilleure lisibilité.
Vous pouvez également personnaliser l’apparence de votre site web et le différencier des autres sites utilisant le même thème. Il peut s’agir de modifier la couleur de sélection du texte, d’ajouter un effet de parallaxe ou de styliser le formulaire de commentaire de WordPress.
Il arrive parfois qu’un thème n’affiche pas les éléments exactement comme vous le souhaitez dans votre conception web. Avec quelques lignes de CSS, vous pouvez résoudre des problèmes mineurs tels que le centrage d’un texte qui apparaît décentré ou l’ajustement du rembourrage ou de la marge autour d’une image.
Ai-je besoin de connaître le langage CSS pour utiliser WordPress ?
Non, vous n’avez pas nécessairement besoin de connaître le langage CSS pour créer un site web WordPress. La plupart des thèmes WordPress sont livrés avec une variété d’options de conception intégrées qui vous permettent de personnaliser l’aspect et la convivialité de votre site sans toucher au code.
L’édition CSS est généralement considérée comme une fonctionnalité avancée. Bien que les débutants puissent certainement utiliser WordPress sans cette fonction, le fait de connaître les feuilles de style CSS offre davantage de possibilités pour peaufiner la conception de votre site web.
Pour faciliter l’édition des feuilles de style CSS, vous pouvez utiliser un plugin WordPress comme CSS Hero. Un plugin CSS vous donne une approche visuelle pour effectuer des modifications CSS et est compatible avec de nombreux thèmes WordPress populaires.
Cela dit, comprendre le fonctionnement des CSS vous donnera plus de contrôle et de flexibilité dans la personnalisation de votre site web WordPress.
Les bases du CSS dans WordPress (avec des exemples)
Le langage CSS utilise une syntaxe spécifique pour définir l’apparence des éléments de votre site web. Bien qu’elle puisse sembler complexe à première vue, la structure de base est assez simple.
Les sélecteurs CSS sont la première chose à connaître. Ils indiquent à CSS les éléments de votre site web à styliser. Ils sont comme des étiquettes pointant vers des parties spécifiques de votre site web.
Par exemple, la balise body fait référence à l’ensemble de la zone de contenu de votre site web. Le sélecteur body cible donc l’ensemble de la page.
La deuxième catégorie est celle des propriétés. Elles définissent les aspects visuels spécifiques que vous souhaitez modifier. Les propriétés sont comme des instructions sur l’aspect que vous souhaitez donner à l’élément sélectionné. Les exemples les plus courants sont la couleur, la taille de la police, la couleur d'arrière-plan et la marge.
Viennent ensuite les valeurs. Elles indiquent à quoi la propriété doit correspondre. Par exemple, la valeur de la couleur peut être rouge, bleue ou un code couleur spécifique.
Ensuite, il y a la classe CSS, qui est un type d’attribut qui peut être assigné aux éléments HTML. Vous pouvez attribuer une classe à un élément dans le code HTML et l’utiliser ensuite dans votre CSS pour appliquer les mêmes styles à tous les éléments de cette classe.
Supposons que vous souhaitiez changer la couleur d’arrière-plan de l’ensemble de votre site web en noir. Voici le code CSS correspondant :
body {
background-color: black;
}
Dans cet exemple :
bodyest le sélecteur qui cible l’ensemble de la zone de contenu du site web.background-colorest la propriété qui définit l’aspect que nous voulons modifier.blackest la valeur spécifiant la nouvelle couleur d’arrière-plan.
Supposons maintenant que vous souhaitiez mettre en évidence un certain texte sur votre site web. Vous pourriez créer une classe CSS appelée .highlight qui mettrait le texte en gras et changerait sa couleur en jaune. Voici comment définir cette classe dans votre CSS :
.highlight {
font-weight: bold;
color: yellow;
}
Voici comment l’appliquer aux éléments de votre code HTML :
<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>
Dans cet exemple :
.highlightest le sélecteur de classe. Il sélectionne tous les éléments de la classe « highlight ».font-weight : bold ;etcolor : yellow ;sont des propriétés. Elles définissent les aspects des éléments sélectionnés que nous voulons modifier.grasetjaunesont des valeurs. Elles indiquent les nouvelles valeurs des propriétés.
Comment ajouter un code CSS personnalisé à WordPress ?
La façon dont vous pouvez ajouter des CSS personnalisés dépend du type de thème WordPress que vous utilisez.
Si vous utilisez un thème classique, vous pouvez aller dans le Customizer de WordPress et sélectionner « Additional CSS » pour ajouter votre code.
Si vous utilisez un thème WordPress en bloc, le personnalisateur de thème sera absent de votre tableau de bord WordPress. Cela est dû au fait que votre éditeur par défaut est maintenant l’éditeur de site complet.
Ceci étant dit, vous pouvez toujours accéder au Customizer de WordPress en ajoutant /wp-admin/customize.php à la fin de votre nom de domaine comme ceci :
https://example.com/wp-admin/customize.php
Lorsque vous ajoutez des feuilles de style CSS personnalisées via le Customizer de WordPress, les modifications sont stockées dans la base de données de WordPress, et non dans le fichier style.css (la feuille de style de votre thème).
Cette approche vous permet d’apporter des modifications sans éditer directement les fichiers du thème, ce qui est une méthode beaucoup plus sûre.
Cela dit, il n’est pas possible d’effectuer des modifications CSS complexes de cette manière. L’alternative est donc d’utiliser un plugin d’extraits de code comme WPCode, qui permet d’insérer en toute sécurité des feuilles de style CSS personnalisées dans votre thème WordPress.
Vous pouvez également créer un thème enfant et y ajouter votre code CSS personnalisé. De cette manière, vos modifications CSS seront toujours présentes même si le thème parent est mis à jour.
Pour plus d’informations, vous pouvez lire notre guide étape par étape sur la façon d’ajouter des CSS personnalisés à votre site WordPress.
Enfin, vous pouvez également utiliser un plugin d’édition CSS comme CSS Hero. Ce plugin vous permet d’éditer des feuilles de style CSS sans savoir coder. Consultez notre avis sur CSS Hero pour plus d’informations.
Pourquoi mon CSS ne s’affiche-t-il pas sur mon site WordPress ?
Il se peut que votre CSS ne s’affiche pas sur votre site WordPress en raison d’erreurs de syntaxe. Une petite erreur dans votre code CSS peut empêcher son application. Il peut s’agir d’une parenthèse manquante, d’une faute de frappe dans le nom d’une propriété ou d’une valeur incorrecte.
En outre, si vous avez récemment ajouté ou modifié votre CSS, il se peut que vous deviez vider votre cache pour voir les modifications. Videz le cache de votre navigateur et, si vous utilisez un plugin de mise en cache sur votre site WordPress, videz-le également.
Parfois, d’autres thèmes ou plugins peuvent interférer avec votre CSS. Essayez de désactiver les autres plugins l’un après l’autre pour voir si le problème est résolu. Si c’est le cas, le dernier plugin que vous avez désactivé est probablement à l’origine du conflit.
Si vous utilisez un thème enfant et que votre CSS ne s’affiche pas, assurez-vous que le thème enfant est correctement configuré et que le fichier CSS est correctement mis en file d’attente dans le fichier functions.php du thème enfant.
Si vous avez besoin d’aide, vous pouvez consulter notre guide du débutant pour dépanner les erreurs de WordPress.
Nous espérons que cet article vous a aidé à en savoir plus sur les CSS dans WordPress. Vous pouvez également consulter notre liste de lectures complémentaires ci-dessous pour des articles connexes sur des conseils, des astuces et des idées utiles pour WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
