wp_enqueue_script tingimustega, defer vs async atribuudid ja wp_localize_script andmete edastamiseks. Koodinäited ja levinud konsoolivead.

Sisukord

Sama põhimõte, mis CSS-i puhul, kehtib JavaScript’i kohta – kui skript on vajalik ühel lehel, ei tohiks see laadida kõikjal mujal. JavaScript’i puhul on tagajärjed sageli suuremad kui CSS-i puhul: JS ei blokeeri ainult renderdamist, vaid võib aeglustada ka interaktiivsust (TBT mõõdik) ja põhjustada konsoolivigu, kui see üritab käivituda lehtedel, kus vastavad HTML elemendid puuduvad.

Variant 1 – tingimuslik wp_enqueue_script eraldi failiga

add_action('wp_enqueue_scripts', 'hnd_lisa_lehe_js');
 
function hnd_lisa_lehe_js() {
    if ( is_page('kampaania-2025') ) {
        wp_enqueue_script(
            'hnd-kampaania-js',
            get_stylesheet_directory_uri() . '/js/kampaania-2025.js',
            array(), // dependencies, nt array('jquery')
            '1.0.0',
            true // laadi footeris, mitte header'is
        );
    }
}

Viies parameeter (true) laseb skriptil laadida lehe lõpus (wp_footer kontekstis), mitte <head> sees – see on peaaegu alati parem valik, sest ei blokeeri lehe renderdamist.

Variant 2 – defer ja async atribuudid

Skriptid, mis ei sõltu lehe muust sisust laadimise ajal, saavad kasutada defer või async atribuute, mis annavad brauserile rohkem vabadust laadimisjärjekorra osas.

defer – skript laeb paralleelselt HTML parsimisega, aga käivitub alles pärast seda, kui HTML on täielikult parsitud. Säilitab skriptide käivitamise järjekorra.

async – skript laeb paralleelselt ja käivitub kohe kui laadimine valmis, isegi kui HTML parsimine pole veel lõppenud. Ei garanteeri järjekorda.

add_action('wp_enqueue_scripts', 'hnd_lisa_lehe_js_defer');
 
function hnd_lisa_lehe_js_defer() {
    if ( is_page('kampaania-2025') ) {
        wp_enqueue_script(
            'hnd-kampaania-js',
            get_stylesheet_directory_uri() . '/js/kampaania-2025.js',
            array(),
            '1.0.0',
            true
        );
    }
}
 
// Lisa defer atribuut konkreetsele skriptile
add_filter('script_loader_tag', function($tag, $handle) {
    if ( 'hnd-kampaania-js' === $handle ) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 2);

Millal kumba kasutada:

defer – kui skript vajab, et DOM oleks valmis (enamik interaktiivsuse skripte – nupu kliki kuulajad, vormi valideerimine)
async – kui skript on sõltumatu (analüütika, jälgimine, mis ei vaja DOM struktuuri)
Ei kumbagi – kui skript peab käivituma kohe, sünkroonselt (harv, tavaliselt ainult kriitilise funktsionaalsuse jaoks)

Variant 3 – inline JavaScript lehespetsiifiliselt

Väikeste skriptijuppide jaoks (mõned read koodi, mitte terve fail):

add_action('wp_footer', 'hnd_lehe_inline_js');
 
function hnd_lehe_inline_js() {
    if ( is_page('kampaania-2025') ) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var timer = document.querySelector('.countdown-timer');
            if (timer) {
                // Countdown loogika siia
            }
        });
        </script>
        <?php
    }
}

Sobib, kui skript on lühike (mõned kümned read) ja lehespetsiifiline – ei õigusta eraldi faili loomist ja HTTP päringut.

Variant 4 – wp_localize_script andmete edastamiseks

Kui JS vajab PHP-st tulevaid andmeid (nt WordPress AJAX URL, nonce turvakontrolliks, dünaamilised väärtused), kasutatakse wp_localize_script-i, mitte andmete otse HTML-i kirjutamist:

add_action('wp_enqueue_scripts', 'hnd_lisa_lehe_js_andmetega');
 
function hnd_lisa_lehe_js_andmetega() {
    if ( is_page('kampaania-2025') ) {
        wp_enqueue_script(
            'hnd-kampaania-js',
            get_stylesheet_directory_uri() . '/js/kampaania-2025.js',
            array(),
            '1.0.0',
            true
        );
        
        wp_localize_script('hnd-kampaania-js', 'hndKampaania', array(
            'ajaxUrl' => admin_url('admin-ajax.php'),
            'nonce'   => wp_create_nonce('hnd_kampaania_nonce'),
            'endDate' => '2025-12-31',
        ));
    }
}

JavaScript failis on need andmed kättesaadavad globaalse hndKampaania objektina:

console.log(hndKampaania.endDate); // '2025-12-31'

See on turvalisem ja puhtam lähenemine kui väärtuste otse PHP echo abil HTML-i kirjutamine, eriti kui tegemist on kasutaja sisendiga seotud andmetega.

Konsoolivead – miks tingimuslik laadimine on eriti oluline JS-is

CSS, mis rakendub elemendile, mida lehel ei ole, ei tee midagi – lihtsalt ei rakendu. JavaScript, mis üritab leida elemendi, mida lehel ei ole, viskab konsoolivea (kui koodis pole kaitset):

// See kukub veaga, kui .countdown-timer elementi lehel pole
document.querySelector('.countdown-timer').addEventListener('click', ...);
// TypeError: Cannot read properties of null

Kaks kaitset:

1. Kontrolli, kas element eksisteerib enne kasutamist (hea praktika alati):

var timer = document.querySelector('.countdown-timer');
if (timer) {
    timer.addEventListener('click', ...);
}

2. Tingimuslik laadimine PHP tasandil (väldib skripti üldse laadimast, kus pole vaja):
See on käesoleva artikli põhiteema – kui skript ei laadi lehtedel, kus elementi pole, pole kontrolli JS-is isegi vaja, kuigi hea praktikana tasub see ikka lisada.

Millal koondada, millal eraldada

Kui sul on mitu lehespetsiifilist skripti, tekib küsimus: kas hoida iga leht oma failis, või koondada üks fail koos tingimusliku loogikaga sees?

Eraldi failid (soovitatud, kui skriptid on erinevad ja lehed harva külastatavad koos):

if ( is_page('kampaania-2025') ) {
    wp_enqueue_script('hnd-kampaania-js', ...);
}
if ( is_page('sundmus-2025') ) {
    wp_enqueue_script('hnd-sundmus-js', ...);
}

Üks fail sisemise loogikaga (sobib, kui skriptid jagavad palju koodi, aga käituvad veidi erinevalt):

// hnd-kampaaniad.js
document.addEventListener('DOMContentLoaded', function() {
    if (document.body.classList.contains('page-id-42')) {
        // Kampaania 2025 loogika
    }
    if (document.body.classList.contains('page-id-58')) {
        // Sündmus 2025 loogika
    }
});

Enamikul juhtudel on eraldi failid selgemad ja hallatavamad – üks fail, mis kasvab body class’i kontrollidega, muutub kiiresti raskesti hooldatavaks.

Kokkuvõte

Lehespetsiifiline JavaScript peaks alati laadima tingimuslikult – mitte ainult jõudluse pärast, vaid ka konsoolivigade vältimiseks lehtedel, kus vastavaid elemente pole. wp_enqueue_script koos tingimusfunktsioonidega, defer/async atribuudid õiges kontekstis ja wp_localize_script andmete turvaliseks edastamiseks – need kolm tööriista katavad enamiku lehespetsiifiliste JS vajaduste jaoks.