Vous avez un problème pour l’affichage de votre thème wordpress ?
Nous avons vu dans d’autres tutoriels (voir dans formation/wordpress), comment installer un thème enfant et faire quelques modifications dans le CSS. Selon la construction des thèmes wordpress, le style css de votre thème enfant ne sera pas pris en compte. Les thèmes WP possèdent parfois plusieurs feuilles de styles qui sont prioritaires sur la vôtre. Nous vous proposons un tutoriel de formation pour découvrir des solutions simples et rapides.
Utiliser le custom css wordpress
Depuis la version wordpress 4.7, il est possible de modifier la mise en forme de son site wordpress à partir de l’interface d’administration. On trouve cette option dans Apparence/Personnaliser/CSS additionnel ou parfois sous un autre nom (custom css, customizer css, additionnal css). Il arrive que cette fonctionnalité soit nichée dans un sous menu (customizer, header, footer, etc). Il est très important d’explorer le menu personnaliser pour chaque thème wordpress. Certains offrent des possibilités et fonctionnalités très avancées. Le css additionnel intégré à wordpress permet de voir les modifications en direct, sans enregistrer et sans rafraichir. Cet outil est très intéressant et permet de conserver ses personnalisations même lors des mises à jour de thème. A cette étape-là, on pourrait croire que le thème enfant n’est plus nécessaire. On va voir par la suite que ce n’est pas le cas.
CSS additionnel wordpress, ne pas en abuser !
Le CSS ajouté via ce nouveau menu s’inscrit directement dans la partie « head » des pages. Cela permet de prendre la priorité sur les autres règles css. Le head a pour but de transmettre des informations aux navigateurs. La mise en forme y est donc tolérée à condition de ne pas en abuser. Ajouter beaucoup de CSS dans cette partie HTML exposerait votre site wordpress à des lenteurs de chargement et des pénalisations en terme de référencement Google.
Retrouver tous les détails dans notre tutoriel vidéo au début de cette page.
Utilisez le thème enfant avec un sélecteur précis css wordpress
Plus le sélecteur CSS est précis et plus il sera prioritaire sur les autres. Lorsque vous personnalisez votre thème wordpress par le style css d’un child theme, vous pouvez ajouter de la précision aux sélecteurs, voir exemple ci-dessous.
// sélecteur générique pour la class="title"
.title { votre personnalisation }
// sélecteur précis pour la class="title"
body .container header .title { votre personnalisation }
// la class="title" qui est dans le "<header>", qui est dans la class="container", qui est dans le "<body>"
Ajoutez la règle CSS !important au style.css du thème enfant
Ajouter à la fin d’une propriété « !important » permet d’indiquer que celle-ci est prioritaire par rapport aux autres.
// sélecteur générique pour la class="title"
.title { votre personnalisation !important }
// exemple pour donner la couleur rouge à la class="title"
.title { color: red !important; }
Limite de ces astuces d’affichage pour les thèmes wordpress
Ces astuces ont des limites. La première déstructure la page et les autres peuvent être écrasées. Si lors d’une mise à jour du thème, le développeur utilise les mêmes astuces, elles seront chargées après les vôtres et prendront le dessus. Dans la prochaine formation wordpress (lien ci-dessous), nous vous apprenons à modifier l’ordre du chargement des feuilles de styles css et résoudre tous vos problèmes d’affichage wordpress.