Modifier le css de chaque page wordpress

Modifier le css de chaque page

En plus du traditionnel <body <?php body_class(); ?>> que l’on retrouve dans tous les thèmes wordpress et qui permet de cibler en css chaque page du site, on va voir aujourd’hui une autre technique qui permet un ciblage plus précis encore.

On crée une fonction qui va rajouter un id et une classe pour chaque type d’affichage dans notre site :

function body_css() { 
global $post; 
$postclass = $post->post_name;
if (is_home()) { 
echo 'id="home"'; 
} elseif (is_single()) { 
echo 'id="single" class="' . $postclass . '"'; 
} 
elseif (is_page()) { 
echo 'id="page" class= "' .$postclass . '"'; 
} 
elseif (is_category()) { 
echo 'id="category"'; 
} 
elseif (is_404()) { 
echo 'id="error"'; 
} 
elseif (is_search()) { 
echo 'id="searchme"'; 
} 
}

<body id= »home »>
<body id= »single » class= »test-post »>
<body id= »page » class= »test-page »>
<body id= »category »>
<body id= »error »>
<body id= »searchme »>

Dans le header.php on peut desormais rattacher notre fonction à la balise body comme ceci :

<body <?php body_css(); ?>>

Du coup dans notre fichier css, on va pouvoir attribuer un style particulier pour chaque partie du site, les pages, la page d’accueil, les catégories etc.. en fonction de l’id et de la classe crées.

.post h1 {font-size:24px; line-height:30px; color:#000000;} pour les pages courantes et 
#searchme .post h1 {font-size:16px;line-height:20px;} pour la page de recherche par exemple.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.