L'une des raisons pour lesquelles WordPress est le système de gestion de contenu (CMS) le plus populaire est qu'il est très convivial pour les débutants. Vous n'avez pas besoin d'avoir des connaissances techniques, des compétences en codage ou une expérience en développement Web pour créer un site Web entièrement fonctionnel à partir de zéro.

Cela dit, pour ceux qui sont prêts à intensifier leur jeu et à rendre leur site un peu plus attrayant visuellement, il existe un moyen de personnaliser votre site avec seulement un peu de connaissances en codage.

Apprendre à utiliser CSS dans WordPress ne doit pas être effrayant. En fait, c'est vraiment très facile à faire.

Si vous êtes prêt à franchir le pas et à apprendre à utiliser du code sur votre site Web WordPress pour le démarquer de la concurrence, continuez à lire. Aujourd'hui, nous allons vous expliquer ce qu'est le CSS et comment vous pouvez l'utiliser pour apporter des modifications à la conception de votre site Web.

Qu'est-ce que le CSS dans WordPress ?

Les feuilles de style en cascade (CSS) sont un langage utilisé dans la conception Web pour modifier l'apparence visuelle d'un site Web. Par exemple, vous pouvez l'utiliser pour modifier la mise en page, les polices, les couleurs de votre site et bien plus encore. Et l'avantage de l'utilisation de CSS dans WordPress est qu'il vous permet de remplacer certains des paramètres par défaut de votre thème.

Ceci est utile pour ceux qui utilisent un thème WordPress populaire. Lorsqu'un thème est largement utilisé, bien que le contenu diffère d'un site à l'autre, la conception de base est la même. Il est donc difficile pour votre site Web de se distinguer de tous les autres sites Web utilisant le même thème avec les mêmes éléments de conception.

Comment fonctionne CSS ?

Avez-vous déjà entendu parler du langage de balisage hypertexte (HTML) ?

HTML est le langage principal utilisé pour créer votre site Web WordPress. Son travail consiste à indiquer aux navigateurs Web à quoi ressemble votre site Web. De cette façon, lorsqu'un visiteur du site clique sur votre site Web, il voit des éléments tels que les couleurs, les images et le contenu écrit. Sans HTML, votre site Web serait constitué de pages de code que personne ne pourrait comprendre.

Pour voir à quoi ressemble HTML, il vous suffit de cliquer sur les trois points dans le coin supérieur droit de l'éditeur Gutenberg et de sélectionner Éditeur de codes:

exemple html

Le problème avec l'édition HTML pour donner à votre site Web une certaine apparence est que cela prend énormément de temps (sans oublier, vous devez comprendre le code). Par exemple, disons que vous vouliez changer tous les titres de vos messages pour qu'ils soient d'une couleur différente. Vous devriez entrer dans chaque article de blog que vous avez écrit et modifier manuellement le code HTML pour changer la couleur.

C'est pourquoi l'utilisation de CSS à la place est si utile.

Le CSS aide à déterminer à quoi ressembleront les éléments HTML de votre site Web sur votre site Web. Et le meilleur, c'est qu'il s'agit d'un langage général qui peut s'appliquer à tous les éléments de votre site web avec quelques lignes de code simples.

L'utilisation de CSS dans WordPress vous donne un contrôle total sur l'apparence de votre site et facilite la modification de certains éléments. Et vous n'avez même pas besoin de comprendre comment fonctionne HTML. Vous pouvez simplement ajouter du code CSS à votre site Web et modifier son apparence. C'est aussi simple que ça.

Comment ajouter du CSS dans WordPress

Vous savez donc que vous souhaitez apporter des modifications à la conception de votre site Web WordPress. Et vous savez maintenant que l'utilisation de CSS est une option, même si vous n'avez aucune connaissance en codage.

Mais comment ajouter du CSS dans WordPress ?

1. Feuilles de style de thème WordPress

Vous pouvez ajouter des extraits de code CSS directement aux feuilles de style de votre thème WordPress pour apporter des modifications à l'apparence générale de votre site Web.

Cela dit, cette méthode est non recommandé pour la plupart des gens. Ajouter du code à votre thème parent présente quelques risques :

  • Vous pourriez vraiment gâcher l'apparence de votre site Web si vous ne savez pas ce que vous faites
  • Chaque fois que vous mettez à jour le thème, toutes les modifications que vous avez apportées en ajoutant du CSS seront perdues, ce qui signifie que vous devrez tout recommencer à chaque fois que vous exécuterez une mise à jour
  • Vous pourriez casser votre site Web si vous apportez des modifications au mauvais endroit

Si vous êtes un utilisateur avancé de WordPress et que vous souhaitez ajouter du CSS directement aux feuilles de style de votre thème, vous devriez au moins le faire en utilisant un thème enfant. De cette façon, si vous faites une erreur, vous ne ruinez pas tout votre site Web. De plus, chaque fois que vous mettez à jour votre thème parent, votre thème enfant conservera vos modifications CSS.

Pour plus d'informations, consultez notre article sur tout ce que vous devez savoir sur les thèmes enfants WordPress.

En attendant, découvrez d'autres façons conviviales pour les débutants d'ajouter du CSS dans WordPress.

2. Personnalisateur de thème

Dans votre tableau de bord WordPress, il existe un moyen d'accéder au personnalisateur de thème. Tout ce que vous avez à faire est de naviguer vers Apparence > Personnaliser.

tableau de bord wp, apparence

Cela vous amènera à l'interface du personnalisateur de thème. Vous verrez un aperçu de votre site Web et un tas d'options sur le côté gauche.

Pour ajouter du CSS à votre WordPress, cliquez sur CSS supplémentaire.

ajouter du css

Lorsque vous faites cela, vous verrez une zone de texte vide dans laquelle vous pouvez ajouter votre code CSS.

ajouter un personnalisateur de thème CSS

Lorsqu'une règle CSS valide est ajoutée, vous verrez les modifications reflétées dans le panneau d'aperçu du personnalisateur de thème.

Par exemple, disons que nous voulions changer le titre du message du noir au bleu. Nous ajouterions du CSS dans la zone de texte vide et verrions ceci dans le panneau de prévisualisation :

changement de titre de poste avec css

Remarquez comment “Hello World” n'est plus noir.

De plus, voyez comment nous utilisons le mot “bleu” dans le code CSS. Si vous voulez une nuance de bleu spécifique, vous pouvez toujours entrer des codes hexadécimaux. Par exemple, nous pourrions remplacer le mot “bleu” par “#61d4f4” pour obtenir cette couleur pour le titre du message :

changement de titre de poste avec code hexadécimal css

Vous pouvez ajouter autant d'extraits de code à cette section que vous le souhaitez. N'oubliez pas que toutes les modifications que vous apportez ici s'appliqueront à l'ensemble de votre site Web. En outre, les modifications que vous apportez à un thème n'apparaîtra pas dans un autre thème si vous l'activez. Si vous changez de thème, vous devrez refaire toutes les personnalisations CSS.

Cliquez sur Publier lorsque vous avez terminé.

3. Plug-in CSS

Si vous ne souhaitez pas utiliser le Theme Customizer pour ajouter du CSS dans WordPress, vous pouvez toujours utiliser un plugin WordPress gratuit comme CSS personnalisé simple.

Ce plugin léger créera un nouvel élément de menu dans votre tableau de bord WordPress sous Apparence. il sera étiqueté CSS personnalisé. Lorsque vous cliquez dessus, vous verrez une zone de texte vide similaire à celle trouvée dans le personnalisateur de thème.

css personnalisé simple

Après avoir ajouté vos extraits de code CSS, cliquez sur Mettre à jour le CSS personnalisé pour enregistrer vos modifications.

L'avantage d'utiliser un plugin CSS comme celui-ci est que même si vous changez de thème, votre CSS personnalisé sera disponible. Cela signifie que vous n'aurez pas à le saisir à nouveau.

D'autres outils utiles pour personnaliser votre site WordPress à l'aide de CSS incluent :

Exemple d'extraits de code CSS

Vous pouvez modifier presque tous les éléments de conception de votre site WordPress avec CSS en utilisant cette répartition de base :

  • Première ligne: quel élément vous modifiez, comme un titre de publication (h1), du texte dans un paragraphe (p) ou une zone de widget (widget)
  • Toutes les autres lignes : des instructions spécifiques pour ce qui va être changé, entre parenthèses

Il existe des tonnes d'extraits de code CSS différents qui peuvent être utilisés pour personnaliser votre site Web. Et il serait impossible de tous les énumérer.

Cela dit, si vous souhaitez personnaliser votre site Web à l'aide de CSS, voici quelques exemples d'extraits de code pour vous montrer comment cela fonctionne.

Famille et taille de police

Pour changer la police et sa taille, ajoutez ce code CSS :


p {
font-family: Georgia;
font-size: 20px;
}
famille de police et taille css

Vous pouvez remplacer la famille de polices par le style de police de votre choix et modifier le nombre pour que la taille de la police soit aussi grande ou petite que vous le souhaitez.

Personnalisation de la barre latérale

Supposons que vous souhaitiez personnaliser les widgets de la barre latérale de votre site Web. Pour ajouter une belle couleur d'arrière-plan et un rembourrage, ajoutez ce code CSS à une nouvelle ligne :


.widget {
background: #B9EBFA;
padding: 25px;
}
widget css

N'oubliez pas que ce CSS s'appliquera à toutes les zones de widgets sur votre site Web. Si vous souhaitez appliquer la modification à une zone de widget spécifique, votre CSS devra en tenir compte.

Par exemple, supposons que vous souhaitiez que le CSS s'applique uniquement au widget Barre de recherche. Pour ce faire, modifiez le CSS pour qu'il ressemble à ceci :


.widget_search {
background: #B9EBFA;
padding: 25px;
}
widget css spécifique

Pour plus de façons de personnaliser votre site, assurez-vous de consulter ces 5 codes CSS simples.

Où en savoir plus sur CSS

Si vous aimez travailler avec CSS, il existe de nombreux endroits pour apprendre CSS pour WordPress :

Si vous rencontrez des difficultés pour trouver un code CSS pour effectuer une modification spécifique sur votre site Web, une simple recherche sur Google vous aidera généralement. Mais si vous voulez vraiment plonger et apporter des modifications sérieuses à votre site Web, consultez certaines des ressources ci-dessus et apprenez le CSS de manière approfondie.

Dernières pensées

Avoir un site Web unique qui se démarque de tous les autres est un élément important de votre réussite globale. Et il se trouve que l'ajout de CSS dans WordPress est un moyen simple de personnaliser votre site.

Apprendre CSS n'est pas difficile à faire si vous savez par où commencer. Et même si cela peut prendre un peu de temps pour apprendre certains des extraits de code les plus courants, vous serez en mesure d'apporter toutes sortes de modifications à l'apparence de votre site avec très peu d'efforts.

N'oubliez pas d'utiliser le Theme Customizer ou un plugin CSS pour ajouter du CSS dans WordPress. Cela ne sert à rien de casser votre site et de risquer de graves interruptions suite à quelques modifications de conception.

Avez-vous déjà ajouté du CSS dans WordPress ? Y a-t-il des extraits de code incontournables que vous aimeriez partager ? Si tel est le cas, nous aimerions tout savoir dans les commentaires ci-dessous.