Comment ajouter facilement du CSS personnalisé dans WordPress ?

Pourquoi utiliser du CSS personnalisé ?

Tu penses peut-être, « Pourquoi me compliquer la vie avec du CSS ? » Eh bien, imagine pouvoir changer l’apparence de ton site WordPress comme on change de chapeau.

Envie d’un fond plus sombre ? D’une police qui éclate ? 😍

Le CSS personnalisé permet ça sans toucher à une seule ligne de code compliquée.

Voyons ensemble ce que tu pourrais faire 🎨 :

• Changer les couleurs : Un peu plus de rouge ici, un soupçon de bleu là…
• Ajuster la typographie : Pour que chaque mot compte, vraiment.
• Modifier la disposition : Un peu plus d’espace ? Moins de bordures ? Tout est possible !

Méthode 1 – Ajout de CSS personnalisé dans WordPress

Utilisation de l’éditeur WordPress

Suis ces étapes :

• Connecte-toi à ton tableau de bord WordPress. Facile, non ?
• Navigue vers Apparence > Personnaliser. C’est là que la magie opère.
• Trouve et clique sur CSS additionnel. C’est ta toile vierge avant de peindre.
• Tape ou colle ton code CSS.

✅ Par exemple : Tu veux mettre tes titres H1 en couleur « gris foncé » et en taille de « 24px ».

h1 {
    color: #333333;
    font-size: 24px;
}

• Admire les modifications en temps réel. Un vrai spectacle ! 📺
• Content de votre œuvre ? Clique sur Publier pour sauvegarder ton chef-d’œuvre.

C’est un excellent point de départ pour des changements rapides et sûrs, sans plugin supplémentaires.

Hébergez votre site chez o2switch

Faites comme XT DESIGN WEB, choisissez o2switch. Un hébergeur engagé écologiquement avec 94% d’énergie décarbonnée. Des performances au rendez-vous et un support exeptionnel.

Essayez o2switch

Méthode 2 – Utilise un plugin pour ton CSS personnalisé WordPress

Utilisation d’un plugin WordPress

Si tu aimes les gadgets, tu vas adorer les plugins CSS. Ils sont comme des apps pour ton téléphone, mais pour ton site WordPress, Simple Custom CSS and JS est l’un de ces plugins populaires.

👉 Voici comment créer ton code  CSS  avec Simple Custom CSS and JS :

Rends-toi dans Plugins > Ajouter nouveau.

Tape « Simple Custom CSS and JS », installe-le et active-le. Comme installer une app ! 📱

Va dans Custom CSS & JS > clique sur Add CSS Code.

Là, écris ton CSS et donne-lui le nom de ta formule.

Par exemple : Tu veux mettre le fond du footer en noir et le texte en blanc.

.footer {
    background-color: #000;
    color: #fff;
}

• Cliquez sur Publier. Et voilà, tu es un pro du CSS ! 🥳

Ces petits assistants sont parfaits pour ceux qui aiment expérimenter et voir les résultats avant de faire le grand saut.

Méthode 3 – Ajout du CSS dans ton thème enfant

Utilisation du fichier style.css de ton theme enfant

Pour les aventuriers du CSS qui veulent plus de contrôle, utiliser le thème enfant est comme construire une petite cabane dans votre jardin WordPress. C’est un espace, où tu peux faire tout ce que tu veux sans déranger le thème principal.

Va sur ton hébergement, avec FileZilla par exemple.

• Navigue jusqu’au dossier wp-content > theme > tonthemeenfant.
• Ouvre le répertoire de ton theme enfant et cherche le fichier style.css
• Ouvre le fichier style.css avec ton éditeur de texte et concocte ta potion magique.
• Enregistre et actualise.

C’est ton chaudron magique, plonge dedans tes meilleurs ingrédients ! 🧙

Conseils pour écrire du CSS efficace

Même dans la magie du CSS, quelques astuces peuvent t’aider à garder ton code propre et fonctionnel :

• Utilise des commentaires pour te souvenir de tes incantations (autrement dit, pourquoi tu as fait certaines modifications). Place tes commentaires entre /* …. */
• Teste ton CSS sur différents appareils pour t’assurer que tout le monde a la même expérience magique (c’est le responsive design).
• Garde ton CSS bien rangé : un code propre est un code heureux. 🧹

En conclusion

Et voilà ! Tu es maintenant prêt à personnaliser ton site WordPress avec quelques incantation de CSS.

N’aie pas peur de jouer avec ton code. Après tout, chaque site mérite un peu de personnalisation. Vas-y, lance-toi dans l’aventure CSS et fait de ton site un lieu vraiment unique. 🌈

Tu as besoin d’un coaching pour te rassurer ? Contacte-moi !