Tingimuslik wp_enqueue_style, inline CSS ja body class scoping – kolm viisi lisada lehespetsiifiline stiil ilma kogu saiti koormamata.

Sisukord

Vahel on vaja väikest visuaalset kohandust ühele konkreetsele lehele – erinev taustavärv kampaanialehel, kohandatud paigutus ühel maandumislehel, ajutine stiil sündmuse jaoks. Levinud (aga vale) lahendus on lisada see CSS kogu saidi stiilifaili tingimusliku klassiga. Parem lahendus on laadida CSS ainult sinna, kus seda vaja on.

Variant 1 – tingimuslik wp_enqueue_style

Kõige puhtam lahendus eraldi CSS failiga:

add_action('wp_enqueue_scripts', 'hnd_lisa_lehe_css');
 
function hnd_lisa_lehe_css() {
    if ( is_page('kampaania-2025') ) {
        wp_enqueue_style(
            'hnd-kampaania-css',
            get_stylesheet_directory_uri() . '/css/kampaania-2025.css',
            array(), // dependency - jäta tühjaks või lisa 'hnd-core' kui vaja
            '1.0.0'
        );
    }
}

See sobib, kui:

CSS on suurem (üle 5-10 KB)
Stiil on püsiv, mitte ajutine test
Soovid CSS-i vahemälustatavust (brauser cache’ib eraldi faili)

Variant 2 – inline CSS otse lehe `<head>`-i

Väikeste kohanduste jaoks on inline CSS mõistlikum – väldib eraldi HTTP päringut.

add_action('wp_head', 'hnd_lehe_inline_css');
 
function hnd_lehe_inline_css() {
    if ( is_page('kampaania-2025') ) {
        ?>
        <style>
            .hero-section { background: linear-gradient(135deg, #ff6b35, #f7931e); }
            .cta-button { font-size: 22px; padding: 18px 40px; }
        </style>
        <?php
    }
}

Sobib, kui:

CSS on väike (alla 5 KB)
Muudatus on lehespetsiifiline ja ajutine (kampaania, sündmus)
Ei taha eraldi faili haldamisega tegeleda ühe väikese muudatuse jaoks

Variant 3 – body class põhine CSS (kõige paindlikum)

WordPress lisab automaatselt <body> elemendile klassid, mis identifitseerivad lehe tüübi ja ID. Seda saab ära kasutada, ilma tingimuslikku PHP-d üldse kirjutamata – kogu loogika jääb CSS-i.

WordPress genereerib automaatselt klassid nagu page-id-42, page-template-default, postid-156. Vaata lehe lähtekoodi (<body class="...">), et leida oma lehe ID.

/* Käib põhi CSS failis, aga rakendub AINULT sellel lehel */
.page-id-42 .hero-section {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}
 
.page-id-42 .cta-button {
    font-size: 22px;
    padding: 18px 40px;
}

See on eriti mugav, kui:

Kohandusi on mitmeid ja need muutuvad aja jooksul
Ei taha iga muudatuse jaoks eraldi PHP tingimust kirjutada
Töötad juba korduvalt sama põhilise struktuuriga (CSS reeglid lihtsalt scoped body klassiga)
Custom body class’i lisamine, kui vaikimisi ID-põhine ei ole piisavalt loetav:

add_filter('body_class', function($classes) {
    if ( is_page('kampaania-2025') ) {
        $classes[] = 'hnd-kampaania-leht';
    }
    return $classes;
});

.hnd-kampaania-leht .hero-section {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
}

Millal kumb variant valida

Olukord	Soovitatud variant
Suur CSS (10+ KB), püsiv	Eraldi enqueue’itud fail
Väike CSS (alla 5 KB), ajutine	Inline `<style>` wp_head’is
Mitu väikest kohandust, korduv muster	Body class + põhi CSS failis
Ainult üks-kaks reeglit	Body class kõige lihtsam

Tingimusfunktsioonid, mida kasutada

is_page('lehe-slug')           // konkreetne leht slug-i järgi
is_page(42)                    // konkreetne leht ID järgi
is_page(array('leht-1', 'leht-2'))  // mitu lehte korraga
is_single('postituse-slug')    // konkreetne postitus
is_singular('portfolio')       // custom post type üksik kirje
is_product('toote-slug')       // WooCommerce toode (vajab is_page ID asemel)

WordPress Customizer alternatiiv

Kui muudatus peab olema toimetaja hallatav (mitte arendaja poolt koodiga), on WordPress Customizer’i “Additional CSS” väli teine variant – aga see rakendub kogu saidile, mitte ühele lehele. See ei sobi lehespetsiifiliste muudatuste jaoks, ilma et lisaksid ise CSS selectorisse lehe-spetsiifilise klassi (nt body class kombinatsioonis).

Kokkuvõte

Lehespetsiifiline CSS ei tohiks kunagi minna kogu saidi põhi CSS faili tingimusteta – see paisutab faili kõigi jaoks, isegi nende jaoks, kes seda lehte ei külasta. Tingimuslik wp_enqueue_style, inline wp_head väljund või body class-põhine scoping on kõik paremad lahendused, mis hoiavad muudatuse seal, kus see kuulub.