Accueil » Blog » Webdesign » Comment ajouter du CSS sur WordPress ? Présentation des différentes méthodes

Comment ajouter du CSS sur WordPress ? Présentation des différentes méthodes

Vous souhaitez ajouter du style à votre site WordPress et vous ne savez pas comment faire ? Grâce au CSS, vous allez pouvoir styliser votre site internet afin de créer des mises en page personnalisées ! Et en plus, c’est sans contrainte et tel que vous le souhaitez ! Pour ce faire, vous pourrez ajouter du style en CSS directement sur WordPress.

 

Cependant, il y a plusieurs façons de l’ajouter et de l’intégrer à votre site. Grâce à cette liste de méthodes, vous pourrez faire un choix sur celle à utiliser pour modifier l’apparence de votre site.

Ajouter du CSS sur WordPress

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

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 sur le menu latéral
  • Ajoutez votre CSS dans ce fichier, et enregistrez

Ajouter du style sur l’apparence de WordPress

Vous vous demandez si l’intégration de votre code n’était pas déjà prévu 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.
  • Cliquez ensuite sur CSS personnalisée
  •  Ajoutez votre CSS sur ce tableau de bord, et enregistrez

Ajouter du style sur une page

Pour ajouter du CSS spécifiquement sur une page, vous pouvez l’inclure directement sur la page ou l’article. Cela permet d’intégrer un style différent, et d’optimiser votre code.

 

Par défaut, WordPress ne nous 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. Par contre, il est conseillé d’utiliser que cette balise seulement si vous n’avez pas d’autre choix. Elle doit être utilisée exceptionnellement. Ce n’est pas la méthode la plus optimisée en terme de développement.

Ajouter son CSS sur un builder

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.

Cibler un élément bien spécifique

Pour cibler un élément spécifique sur votre WordPress, une méthode toute simple existe et vous permettra d’établir du style sur l’élément que vous souhaitez. Cette méthode consiste à vérifier le code source de votre page grâce à un outil d’inspection de code HTML. Évidemment, les navigateurs intègrent chacun des outils différents pour l’inspection de code source. Vous pouvez établir ce procédé sur Google Chrome comme ceci :

 

  • Clic-droit sur l’élément cible
  • Inspecter l’élément
  • Vérifier la classe ou l’identifiant de votre élément
  • Écrire le CSS sur WordPress

Ajouter un identifiant ou une classe

Si l’élément que vous souhaitez cibler ne dispose pas d’identifiant, vous pouvez rechercher cet élément sur votre site pour lui assigner une classe ou un identifiant. Par contre, cela est bien plus difficile si l’élément provient d’une extension. Si l’élément est généré par un plugin WordPress, alors il vous faudra parcourir les dossiers de votre extension, pour trouver l’élément généré par le script de l’extension. Vous devrez donc sans doute modifier des fichiers PHP.

Autres articles sur le WebDesign