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"'; 
} 
}

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.

08/03/2014 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress