WordPress
time_read18mn de lecture

Comment ajouter un CSS personnalisé à WordPress ?

08 octobre 2022

Comment ajouter un CSS personnalisé à WordPress ?

Le Cascading Style Sheets, généralement connu sous le sigle CSS, est un langage informatique désignant une feuille de style pour la mise en forme et en page des documents HTML. Il permet, entre autres, de modifier la disposition, la taille, la couleur d’un texte ou encore d’ajuster les marges.

L’utilisation du Cascading Style Sheets est moins complexe sur WordPress grâce aux nombreux réglages disponibles et ne nécessite pas la maîtrise de ce langage. Il suffit d’apporter les modifications dans WordPress pour que votre site soit automatiquement formaté comme vous le souhaitez. 🙂 Pour ce faire, l’ajout de CSS personnalisé à votre site WordPress devient essentiel.

Objectif

Dans cet article, apprenez à ajouter un CSS personnalisé à l’aide d’un plugin WordPress ou d’un thème enfant.

Prérequis

Pour suivre ce tutoriel, il est impératif de disposer de l’accès au tableau de bord WordPress en tant qu’administrateur du site sur lequel vous souhaitez ajouter un CSS personnalisé. Selon la méthode choisie, vous devez également maitriser l’installation de plugins WordPress ou la création d’un thème enfant WordPress.

Besoin d’un hébergement WordPress rapide et de qualité ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l’offre

Ajouter un CSS personnalisé à WordPress grâce à la personnalisation WordPress

Chaque site WordPress dispose de la fonctionnalité par défaut de WordPress « Theme Customizer ». Il s’agit de l’une des méthodes les plus faciles pour personnaliser les feuilles de style en cascade.

Dans le tableau de bord, allez à l’onglet « Apparence », puis sur « Personnaliser ».

Cliquez sur le bouton « CSS additionnel ».

CSS personnalisé WordPress

Une interface de personnalisation s’ouvrira pour que vous y intégrer votre code. Cet outil vous donnera en plus la possibilité d’avoir un aperçu de votre site, avec la version pour les appareils mobiles.

Ajouter un CSS personnalisé à WordPress via un plugin

En utilisant les plugins, les modifications que vous avez apportées à votre thème WordPress ne seront pas perdues. Vous pouvez réutiliser ce même CSS personnalisé pour plusieurs thèmes étant donné qu’il est enregistré dans le fichier de l’outil. Il existe un large choix de plugins pour la personnalisation du Cascading Style Sheets. Voici les 7 meilleurs :

WP Add Custom CSS

Cet outil vous permet d’appliquer le CSS personnalisé à quelques pages de votre site WordPress ou à son ensemble. En l’installant, vous verrez un onglet dédié à WP Add Custom CSS dans votre administration.

CSS personnalisé WordPress plugin Add Custom CSS

Un éditeur CSS apparaîtra sous chaque article. Vous pourrez de ce fait modifier individuellement des articles. Si vous voulez visualiser les changements, rafraichissez votre site web WordPress.

Yellow Pencil ou Visual CSS Style Editor

Cet éditeur convient à tous les types de thèmes. Il est adapté aux débutants et experts. Il dispose de plus de 50 propriétés CSS, ce qui permet à son utilisateur de modifier son site/sa page selon ses convenances. De plus, les familles de polices que cet outil prend en charge dépassent la barre de 800.

Pour l’utiliser, il faut le télécharger, l’installer et l’activer. Ensuite, rendez-vous dans « Apparence », puis, cliquez sur « Yellow Pencil ».

CSS personnalisé WordPress Yellow Pencil

Pour les adeptes de codage, Yellow Pencil est l’outil idéal. Vous aurez la possibilité de le faire en direct et de personnaliser à la fois votre feuille de style.

SiteOrigin CSS

Bien qu’il soit gratuit, SiteOrigin CSS possède de nombreuses options. Grâce à ce plugin interactif, vous pourrez ajouter votre feuille de style personnalisée à WordPress.

Vous devez l’installer pour y accéder. Dans l’onglet « Apparence », cliquez sur « CSS personnalisé ». Vous verrez apparaître un éditeur muni de plusieurs outils intégrés vous permettant de modifier chaque partie de votre site. Faire votre codage manuellement vous est également possible.

Il faut toutefois savoir qu’en employant ce plugin, vous ne pourrez pas prévisualiser en temps réel vos modifications. Pour avoir un aperçu, vous devez cliquer soit sur l’icône en forme d’œil, soit sur les flèches.

Theme Junkie Custom CSS

Tout comme Yellow Pencil, cette extension offre une prévisualisation en direct des changements. Pour profiter de ses avantages, même procédé que pour le plugin précédent. Téléchargez, installez et activez-le pour le trouver dans votre tableau de bord. Vous pourrez ensuite ajouter vos touches personnelles et y appliquer vos styles en saisissant votre code personnalisé.

ajouter du CSS personnalisé à WordPress Theme Junkie Custom

Custom JS et CSS for Gutenberg

Custom JS et CSS for Gutenberg est, comme indiqué par sa désignation, adapté à la version Gutenberg. Grâce à ce plugin, vous pourrez personnaliser vos pages et articles WordPress avec l’éditeur WYSIWYG. De plus, il vous est possible de modifier vos champs personnalisés.

Pour l’installer, accédez à « Plugin > Ajouter un nouveau ». Téléchargez-le en cliquant sur le bouton à gauche. Cliquez sur le bouton « Parcourir », sélectionnez le fichier .zip et installez. N’omettez pas d’activer l’extension pour l’employer à bon escient.

Dans vos prochaines publications, trouvez le bloc Custom JS et CSS sur les blocs Gutenberg et ajoutez-le à la page. Puis, ajoutez votre code CSS personnalisé à la page.

Après mise à jour, vos personnalisations seront intactes. Vous pourrez en plus prévisualiser en direct vos modifications.

Simple Custom CSS

Grâce à cette extension, vous pouvez laisser vos marques en modifiant la feuille de style de votre thème WordPress. Même après changement de thème, les changements apportés seront conservés. Suite à son activation, vous verrez  « Custom CSS » s’afficher dans la section « Apparence ». Méthode simple et efficace, vous devez juste saisir le code dans l’éditeur et d’enregistrer.

Pour voir les modifications, rafraîchissez le site web WordPress.

Simple Custom CSS and JS

Parmi les plus populaires, Simple Custom CSS and JS permet d’ajouter non seulement des feuilles de style personnalisées, mais aussi des JS personnalisés. Grâce à l’éditeur, les syntaxes peuvent être en couleur. Après son installation, le menu « Custom CSS and JS » apparaîtra dans votre barre d’administration WordPress. Un seul clic et vous serez amené à la page où vous trouverez des codes déjà ajoutés.

ajouter du CSS personnalisé à WordPress plugin Simple Custom CSS and JS

Pour ajouter votre code CSS personnalisé, il suffit de cliquer sur le bouton « Ajouter du code CSS ». Simple Custom CSS and JS est disponible en version gratuite, mais aussi en pro pour permettre à ses utilisateurs de bénéficier de plus de fonctionnalités.

Ajouter un CSS personnalisé à WordPress à partir d’un thème enfant

Le dernier moyen pour ajouter un CSS personnalisé est la création d’un thème enfant dans WordPress. Il hérite des propriétés du thème parent (thème installé sur le site), notamment de son design, de ses fonctionnalités et de sa mise en page. Grâce à lui, vous avez la possibilité de modifier votre site à votre guise sans sacrifier le thème parent. Il s’agit donc d’une option qui vous permet de tester votre personnalisation. Néanmoins, à chaque modification, les paramètres du thème parent changeront.

Le thème enfant va fournir un fichier CSS pour que vous puissiez apporter vos touches et ajouter vos propres styles. Il suffit d’insérer le Cascading Style Sheets personnalisé dans le fichier style.css dans le thème enfant. Saisissez le CSS sous le code déjà existant.

Conclusion

Cet article vous a montré les meilleurs moyens permettant d’ajouter un CSS personnalisé à WordPress. À vous de choisir entre l’emploi du personnaliseur intégré de WordPress, des différents plugins et du thème enfant. 🙂

Tâchez de ne pas abuser des codes pour éviter d’engendrer un conflit. Dans le cas où vous rencontrez un problème tel que la non-apparition du CSS personnalisé, videz votre cache ou désactivez vos plugins de mise en cache.

Avez-vous ajouté du CSS personnalisé à votre site WordPress ? Si oui, quelle méthode avez-vous utilisée ?

Avatar de l'auteur

Auteur de l'article

Magalie

Rédactrice web depuis deux ans, Magalie aime relever les défis. La persévérance et la créativité sont pour elles les clés de la réussite. Passionnée du web, ses thématiques préférées sont l’e-commerce et les nouvelles technologies.

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (0)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.