WordPress-temaer bruker body_class() for å legge til nyttige CSS-klasser i <body>-taggen. Som standard indikerer det imidlertid ikke tydelig om en side er et barn av en bestemt forelderseksjon.
Hvis du har en struktur som:
/services//services/web-design//services/seo/
Du vil kanskje style alle sider under “Services” med en blå bakgrunn. Standardklassene som page-id-123 er irriterende å vedlikeholde.
Problemet: Begrenset CSS-målretting
WordPress sin standard body_class()-funksjon legger til klasser som:
page-id-123(numerisk, vanskelig å huske)page-template-default(generisk)page(for bred)
Men den forteller deg ikke:
- Hvilken seksjon siden tilhører
- Sidehierarkiet (forelder/barn-forhold)
- Sidesluggen (lesbar identifikator)
Dette gjør CSS-målretting vanskelig. Du ender opp med kode som:
/* Dårlig: Vanskelig å vedlikeholde */
.page-id-123,
.page-id-124,
.page-id-125 {
background: blue;
}Hver gang du legger til en ny side, må du oppdatere CSS-en din. Dette skalerer ikke.
Løsningen: Legg til forelder-slugs i body-klasser
Ved å legge til forelder-side-slugs i body-klassen, kan du målrette hele seksjoner med en enkelt CSS-regel. Dette gjør stilarket ditt vedlikeholdbart og skalerbart.
Den fullstendige snutten
Legg til denne forbedrede versjonen i din functions.php:
/**
* Add page slugs and parent slugs to body classes
*
* Adds:
* - Current page slug
* - Parent page slug (if exists)
* - Grandparent page slug (if exists)
* - All ancestor slugs
*
* @param array $classes Existing body classes
* @return array Modified classes array
*/
function wppoland_add_slug_body_class( $classes ) {
global $post;
if ( ! isset( $post ) || ! is_page() ) {
return $classes;
}
// 1. Add current page slug
$classes[] = 'page-slug-' . sanitize_html_class( $post->post_name );
// 2. Add parent page slug (if exists)
if ( $post->post_parent ) {
$parent = get_post( $post->post_parent );
if ( $parent ) {
$classes[] = 'parent-' . sanitize_html_class( $parent->post_name );
// 3. Add grandparent slug (if exists)
if ( $parent->post_parent ) {
$grandparent = get_post( $parent->post_parent );
if ( $grandparent ) {
$classes[] = 'grandparent-' . sanitize_html_class( $grandparent->post_name );
}
}
// 4. Add all ancestor slugs (recursive)
$ancestors = get_post_ancestors( $post->ID );
foreach ( $ancestors as $ancestor_id ) {
$ancestor = get_post( $ancestor_id );
if ( $ancestor ) {
$classes[] = 'ancestor-' . sanitize_html_class( $ancestor->post_name );
}
}
}
}
// 5. Add template hierarchy classes
$template = get_page_template_slug( $post->ID );
if ( $template ) {
$template_slug = str_replace( '.php', '', basename( $template ) );
$classes[] = 'template-' . sanitize_html_class( $template_slug );
}
return $classes;
}
add_filter( 'body_class', 'wppoland_add_slug_body_class' );Resultat: Forbedrede body-klasser
Nå vil din <body>-tag inkludere:
<body class="page page-id-123 page-slug-web-design parent-services ancestor-services ...">Klasser lagt til:
page-slug-web-design- Nåværende sideslugparent-services- Direkte foreldersluggrandparent-company- Besteforelderslug (hvis den finnes)ancestor-services- Alle aneslugstemplate-custom- Malfilnavn (hvis tilpasset)
Eksempler på bruk
Eksempel 1: Style alle services-sider
/* Blå bakgrunn for ALLE services-sider */
body.parent-services {
background-color: #eef;
}
/* Spesifikk styling for services-overskrift */
body.parent-services .site-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}Eksempel 2: Ulike layouter per seksjon
/* Full bredde layout for dokumentasjon */
body.parent-documentation .content-area {
max-width: 100%;
padding: 0;
}
/* Sidebar layout for blogg */
body.parent-blog .content-area {
max-width: 1200px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}Oppsummering
Å legge til forelder-side-slugs i body-klasser er en enkel, men kraftig teknikk som gjør CSS-målretting skalerbar og vedlikeholdbar. I stedet for å vedlikeholde lister over side-IDer, kan du målrette hele seksjoner med en enkelt klasse.
Fordeler:
- ✅ Skalerbar: Fungerer automatisk for nye sider
- ✅ Vedlikeholdbar: En CSS-regel for hele seksjoner
- ✅ Semantisk: Lesbare klassenavn
- ✅ Fleksibel: Fungerer med alle temaer
Utforsk våre profesjonell WordPress-utvikling for å ta prosjektet ditt videre.
