WordPress automatycznie dodaje przydatne klasy do tagu <body>. Ale czasami potrzebujemy więcej kontekstu - na przykład slug strony nadrzędnej.
Problem
Na podstronach chcesz stylować elementy inaczej w zależności od tego, pod jaką stroną nadrzędną się znajdują. WordPress nie dodaje tej informacji automatycznie.
Rozwiązanie
Dodaj ten kod do functions.php:
/**
* Dodaj slug strony nadrzędnej do klas body
*/
function wppoland_add_parent_slug_body_class( $classes ) {
global $post;
if ( is_page() && $post->post_parent ) {
$parent = get_post( $post->post_parent );
$classes[] = 'parent-' . $parent->post_name;
// Opcjonalnie: dodaj też klasę dla "pradziadka"
if ( $parent->post_parent ) {
$grandparent = get_post( $parent->post_parent );
$classes[] = 'grandparent-' . $grandparent->post_name;
}
}
return $classes;
}
add_filter( 'body_class', 'wppoland_add_parent_slug_body_class' );Rezultat
Dla strony /uslugi/wordpress/optymalizacja/ klasy body będą zawierać:
<body class="page parent-wordpress grandparent-uslugi">Użycie w CSS
Teraz możesz stylować elementy w zależności od kontekstu:
/* Wszystkie podstrony pod "uslugi" */
.parent-uslugi h1 {
color: #0066cc;
}
/* Tylko podstrony pod "wordpress" */
.parent-wordpress .sidebar {
background: #f0f0f0;
}Wskazówki
- Używaj prefiksu
parent-dla czytelności - Możesz też dodać ID strony nadrzędnej jeśli wolisz
- Działa tylko na stronach (pages), nie na postach
Sprawdź nasze profesjonalne usługi WordPress aby rozwinąć swój projekt.
