Vous êtes nombreux à choisir votre thème WordPress en fonction de sa couleur, de sa structure, des images qu’il contient, etc.

Vous mettez beaucoup de temps à choisir le thème qu’il vous faut car il respecte parfaitement le code couleur que vous souhaitez mais la structure (colonne, sidebar, etc.) ne vous correspond pas toujours.

Pourquoi ne pas prendre un thème qui vous corresponde parfaitement dans sa structure et en modifier le style visuel grâce au CSS ?

En plus, en modifiant votre style, vous allez petit à petit modifier la structure de votre site, supprimer le superflus, bref, mettre à votre sauce votre site !

Les principes sont très simples, vous avez des pages php qui contiennent les balises html auxquelles font référence vos différents styles et vous avez votre (vos) fichier(s) CSS.

Comprendre la structure de son thème

Avant de vous lancer dans ce qui peut vous paraître insurmontable, commencez par ouvrir une à une vos différentes page pour en observer la structure générale.

Par exemple dans le header, j’ai mes balises « head » et « body » mais j’ai aussi mon menu supérieur.
Dans ma sidebar j’ai la zone ou mes widgets vont être ajoutés mais j’ai aussi ma barre de recherche et mes boutons de partages, etc.

Commencez par bien vous imprégner de votre nouveau thème et faites vous, pourquoi pas, un petit croquis de sa structure sur une page blanche.

Utilisation de Firebug

Firebug est un addon de Mozilla Firefox qui permet d’éplucher le code de vos pages appelé le DOM. Il vous faut donc firefox et avoir installé le plugin Firebug (il existe également une version Chrome).

Une fois le tout bien installé et activé, rendez vous sur votre page d’accueil. Sélectionnez une zone comme si vous sélectionniez un bout de texte avec votre curseur.

Maitenant cliquez droit dessus et vous devriez voir en bas « inspectez l’élément avec Firebug ». Cliquez et c’est parti !

Vous avez un nouveau volet qui s’est ouvert en bas de page. Et en surbrillance le code HTML de l’élément que vous voulez inspecter. Ce qui nous intéresse pour le moment ce sont les noms des ID et des CLASS des balises qui vont nous permettre de modifier notre style.

Vous remarquez aussi que quand vous survollez le code dans Firebug, les différentes zones de votre pages changes de couleur. C’est tout simplement que le code survolé correspond à tels ou tels zones de votre page.

Modifier votre CSS

Maintenant que nous savons comment utiliser Firebug et comment trouver nos différents noms d’ID et de CLASS, nous allons en modifier l’aspect.

Rendez-vous dans votre dossier de thème et ouvez le fichier style.css pour commencer à modifier l’apparence de votre thème.

 

Attention : Si vous voulez profitez des mises à jours de votre thème, vous devez créer un thème enfant (child-theme) et y créer un fichier style.css pour que ce que vous y écrirez surcharge le style du thème parent.

Voir cet article pour plus de détails : Créer des thèmes enfants (child themes) avec WordPress

 

Solution 1 : La solution déconseillée

Vous n’incluez pas dans la feuille de style de votre thème enfant la feuille de style du thème parent, mais vous en copiez tout le contenu pour l’éditer dans votre thème enfant

  • Si vous voulez changer la couleur d’arrière plan d’un DIV, il vous suffit de de l’inspecter grâce à firebug.
  • Relevez l’ID ou la CLASS de celle-ci puis notez le numéro de la ligne où est défini le style (
  • Rendes-vous maintenant dans votre fichier style.css puis faite CTRL+G et inscrivez le numéro de la ligne concernée (selon votre éditeur de texte). Vous pouvez aussi rechercher le nom de votre ID/CLASS.
  • Vous devriez aisément trouver les lignes de code qui vous intéressent et plus particulièrement ici « background-color ».
  • Il vous suffit de changer la couleur en vous aidant par exemple d’un outil comme celui-ci : Couleur HTML
  • Enregistrez le tout et uploadez sur votre FPT.
  • Rafraîchissez votre page (de préférence en faisant CTRL+F5 ou CTRL+R afin de vider le cache de la page).

 

Solution 2 : La solution conseillée

Vous incluez bien dans la feuille de style de votre thème enfant la feuille de style du thème parent grâce à @import.

  • Si vous voulez changer la couleur d’arrière plan d’un DIV, il vous suffit de de l’inspecter grâce à firebug.
  • Sélectionnez et copiez l’ensemble de l’élément dont vous voulez éditer le background
  • Rendes-vous maintenant dans votre fichier style.css puis collez le style que vous venez de copier
  • Supprimez les lignes de code qui ne concernent pas le backround de l’élément, donc à priori tout sauf « background-color ».
  • Il vous suffit de changer la couleur en vous aidant par exemple d’un outil comme celui-ci : Couleur HTML
  • Enregistrez le tout et uploadez sur votre FPT.
  • Rafraîchissez votre page (de préférence en faisant CTRL+F5 ou CTRL+R afin de vider le cache de la page).

 

Vous savez maintenant comment simplement modifier le style de votre thème Wordoress. N’hésitez pas à ajouter des balises HTML pour restructure petit à petit vos pages et répondre au mieux à vos besoins. Mais gardez en mémoire que si vous modifiez la structure des fichiers de votre thème, faites le dans un thème enfant pour ne pas tout perdre lorsque vous mettrez votre thème à jour.

Bon courrage !

 

Brice Capobianco

Autodidacte passionné par WordPress. J'aime apprendre et créer pour ensuite partager…
Responsable commercial en agence web, je suis également développeur freelance WordPress à Rennes.

Coorganisateur des Meetups WordPress Rennes et fondateur de b-website.com.