Modifier le CSS dans WordPress : Comment personnaliser l'apparence de son site web

Dans la création d'un site internet personnalisé, il est nécessaire de développer un design qui se différencie de la concurrence. Et si vous êtes sur WordPress, alors vous pourrez modifier le style et l'apparence de vos pages afin de créer des mises en page personnalisées !

CSS WordPress

Pourquoi modifier le CSS de son site WordPress ?

Si vous êtes sur WordPress, alors il y a de fortes chances pour que vous utilisiez un thème avec une configuration spécifique (préréglage). Vous aimeriez peut-être modifier certains aspects ou éléments de votre page, et les différentes options de votre thème ne vous proposent pas de le faire. En modifiant le CSS, vous développez votre propre design sur WordPress. Voilà une très bonne raison de modifier le CSS de votre site internet !

Modifier CSS apparence site internet front-end

Le contrôle sur les réglages d'un thème est souvent limité, et permet seulement de sélectionner des options préenregistrées. L'ajout ou la modification de CSS peut contrer cela !

CSS sur WordPress : Comment ça marche ?

Sur WordPress, ce sont les fichiers du thèmes qui gèrent le CSS du site internet. Cependant, il est également possible d'intégrer une fonction qui permet d'insérer du CSS à partir du functions.php. Les fichiers du thème de votre WordPress incluent obligatoirement un fichier style.css, décrivant les caractéristiques du thème ainsi que le style de l'apparence globale. Il est également possible que la structure soit plus approfondie, avec un dossier supplémentaire dans celui de votre thème WordPress.

CSS sur WordPress

4 méthodes pour modifier/ajouter du CSS sur WordPress

Pour ajouter du CSS sur WordPress, rien de plus simple, suivez l'une de ses méthodes. Elles vous sont présentées dans un ordre bien précis ! Toutes les méthodes se valent les unes aussi bien que les autres, choisissez-là en fonction de vos réglages actuels de votre site internet.

Ajouter du CSS sur le fichier style.css de son thème

Ajouter CSS sur-le-fichier style.css de son thème WordPress

Pour ajouter du style sur WordPress, vous pouvez vous rendre sur les fichiers de votre thème WordPress. Lorsqu’un thème est activé sur votre site, tous les fichiers dans le dossier de votre thème sont actifs.

 

Voici comment ajouter du style sur le fichier CSS de votre thème :

  • Passez votre souris sur Apparence et cliquez sur Éditeur de thème
  • Sélectionnez votre thème sur le filtre
  • Recherchez style.css dans le menu latéral
  • Ajoutez votre CSS dans ce fichier, et enregistrez

Ajouter du CSS sur l’apparence de WordPress

Ajouter du CSS sur l’apparence de WordPress

Vous vous demandez si l’intégration de votre code n’était pas déjà prévue par WordPress ! C’est bien le cas, il propose une fonctionnalité permettant d’inclure du CSS sur l’administration, sans passer par le fichier du thème WordPress.

 

Pour cela, voici comment utiliser la fonctionnalité de WordPress :

  • Cliquez sur Apparence, puis sur CSS personnalisé
  • Ajoutez ensuite votre code dans les réglages de WordPress, et enregistrez

Ajouter du CSS sur une page

Ajouter CSS dans une page

Pour ajouter du CSS spécifiquement sur une page, vous pouvez l’inclure directement sur la page ou l’article en question. Par défaut, WordPress ne vous propose pas d’ajouter votre CSS directement sur la page, c’est pourquoi certains éditeurs de sites utilisent la balise html <style>. Cette dernière permet d’ajouter du style sur le code HTML de la page.

 

Il est conseillé d’utiliser cette balise seulement si vous n’avez pas d’autre choix. Elle doit être utilisée exceptionnellement car ce n'est pas l'une des méthodes les plus optimisées en terme de développement web. 

Ajouter du CSS sur un éditeur de page

Ajouter du CSS sur un éditeur de page

Certains éditeurs de page, tel que WPBakery, vous propose d’inclure du CSS directement sur la page sans passer par la balise <style>. Cela peut être pratique pour rendre une page unique avec un design qui ne ressemble à aucun autre sur le site. Grâce à un éditeur de page, vous pourrez normalement intégrer du code CSS facilement. Enfin, il est important de noter comment l’éditeur interprète et intègre votre code source sur la page. Vérifiez donc le travail de votre Builder et la méthode qu’il utilise pour intégrer votre code.

5 plugins pour ajouter du CSS facilement sur WP

Vous n'avez pas envie de modifier l'apparence de votre site en codant dans les fichiers du thème, ni dans l'interface administrable de WordPress ? Avec ces 5 plugins, vous pourrez ajouter vos codes très facilement :

Custom CSS JS

Custom CSS JS

Custom CSS JS est une solution pour organiser son code CSS et l'intégrer avec facilité. Personnalisez l'apparence de votre site WordPress en ajoutant facilement du code CSS et JS personnalisés sans même avoir à modifier vos fichiers de thème ou de plugin. C'est parfait pour ajouter des ajustements CSS personnalisé à votre site.

Caractéristiques

  • Éditeur de texte avec coloration syntaxique
  • Imprimez le code en ligne ou inclus dans un fichier externe
  • Imprimez le code dans l'en- tête ou le pied de page
  • Ajoutez du CSS ou JS au frontend ou du côté administrateur
  • Ajoutez autant de code que vous le souhaitez
  • Conservez également vos modifications lorsque vous changez de thème
Modifier le CSS avec Custom CSS JS

Découvrir

Simple Custom CSS

Simple Custom CSS

Simple Custom CSS permet d'ajouter du style CSS personnalisé afin de remplacer le style par défaut du plugin et du thème. Ce plugin est conçu pour répondre aux besoins des administrateurs qui souhaitent ajouter leur propre CSS à leur site WordPress. Les styles créés avec ce plugin seront rendus même si le thème est modifié.

Caractéristiques

  • Assistance AMP
  • Contrôle de personnalisation (aperçu en direct)
  • Surligneur de syntaxe de code utile
  • Aucune configuration nécessaire
  • Interface simple construite sur l'interface utilisateur WordPress native
  • Pratiquement aucun impact sur les performances du site
  • Pas de requêtes de base de données compliquées
  • Documentation complète
  • Autorise l'accès administrateur sur les réseaux WP (multisite)
Modifier l'apparence de son site internet avec Simple Custom CSS

Découvrir

SiteOrigin CSS

SiteOrigin CSS

Vous n'aimez pas jouer avec le code ? Aucun problème, car SiteOrigin CSS vous propose un ensemble de contrôle simple qui facilite le choix des couleurs, des styles et des mesures. Combiné avec l'inspecteur, vous pourrez apporter des modifications en quelques clics.

Caractéristiques

  • Éditeur de texte facile à utiliser
  • Fonctionne avec tous les thèmes
  • Plugin activement développé et maintenu
  • Prévisualisation en temps réel
Ajouter du CSS avec SiteOrigin CSS

Découvrir

Simple CSS

Simple CSS

Simple CSS vous offre un éditeur d'administration génial et un éditeur de prévisualisation en direct dans le Customizer afin que vous puissiez facilement ajouter votre CSS.

Caractéristiques

  • Éditeur CSS d'administration complet
  • Thèmes de l'éditeur sombre et clair
  • Éditeur CSS dans le Customizer pour que vous puissiez prévisualiser vos modifications en direct
  • Metabox pour CSS spécifique à la page
Ajouter et modifier CSS avec Simple CSS

Découvrir

WP Add Custom CSS

WP Add Custom CSS

WP Add Custom CSS vous permet d'ajouter du CSS personnalisé à l' ensemble du site Web et aux publications individuelles, aux pages et aux types de publications personnalisées (tels que les produits Woocommerce ).

Caractéristiques

  • Éditeur de texte simple et sans prise de tête
  • Un CSS généré sur l'intégralité du site web
  • Personnaliser le CSS en fonction des types de publications ( pages, articles, champs personnalisés.. )
Modifier CSS avec WP Add Custom CSS

Découvrir

Les règles CSS appliquées à l'ensemble du site Web remplaceront les feuilles de style par défaut de votre thème et de vos plugins, tandis que les règles CSS appliquées à des pages spécifiques, des articles ou des types de publications personnalisées remplaceront également la feuille de style principale.

 

Vous pouvez modifier la feuille de style principale à partir de la page des paramètres "Ajouter un CSS personnalisé". Le plugin crée également une nouvelle boîte « CSS personnalisé » dans la zone d'édition pour ajouter du CSS personnalisé à des publications, des pages et des types de publications personnalisées spécifiques.

Résoudre des problèmes de modification de CSS (FAQ)

Est-il possible d'ajouter des librairies CSS sur WordPress ?

Oui, il est possible d'ajouter des bibliothèques CSS sur WordPress.

 

C'est d'ailleurs une excellente solution pour gagner du temps et ajouter des fonctionnalités supplémentaires à votre site.

 

Vous pouvez le faire en ajoutant le code suivant à votre fichier functions.php :

 

add_action( 'wp_enqueue_scripts', 'enqueue_fontawesome' ) ;

function enqueue_fontawesome() {

wp_enqueue_style

('font-awesome', '//netdna.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' ) ;

}

Pourquoi je ne vois aucun changement apparaitre ?

  • Il se peut que la mise en cache soit activée dans les réglages de votre serveur. Dans ce cas, vous devrez le vider sur l'interface Cpanel disponible sur votre plateforme d'hébergement.
  • En parallèle, essayez de rafraichir le cache de votre navigateur (Ctrl + F5 sur Windows, Cmd + Shift + R sur Mac)

 

Si vous êtes à l'aise avec le code, vous pouvez essayer de forcer un rafraîchissement du fichier CSS en ajoutant une chaîne de requête à l'URL de la feuille de style. Par exemple, si votre feuille de style se trouve actuellement à l'adresse "exemple.com/style.css", vous pouvez changer l'URL en "exemple.com".

Le résultat n'est pas celui attendu, que faire ?

Si vous essayez de modifier l'apparence de votre site mais que les résultats s'éloignent de ce que vous pensiez, alors vous pouvez vous rendre sur l'inspecteur de code HTML de Google Chrome. Cela vous permettra de modifier des éléments immédiatement, et de copier le code CSS.

 

Pour cela, je vous invite à suivre ces étapes :

  • Ouvrez l'inspecteur d'élément
  • Sélectionnez la bonne balise HTML
  • Ajoutez votre code dans la boite dédiée au CSS
  • Copiez le code CSS ( Clic droit -> Copier toutes les déclarations )
  • Collez ensuite le code CSS sur votre site WordPress

Autres sujets dans la création de site internet