Saidi said üle terve saidi raske liuguri vaid ühe animatsiooni pärast avalehel? Kümneid tarbetuid kilobaitte laaditakse igal lehel: sisepostitustes, kontaktides, saidikaardil. Külastajad ootavad ja Google langetab sinu Core Web Vitals skoore.

Probleem ei ole pluginates ega teemas. Probleem on selles, et WordPress ei erista vaikimisi skripte registreerides lehti. Üks wp_enqueue_script rida failis functions.php ja fail laaditakse kõikjal: avalehel, administraatori paneelis ja sisselogimislehel.

Allpool on kolm toimivat meetodit skriptide ja stiilide laadimiseks rangelt ainult avalehele. Ei mingeid optimeerimispluginaid. Ainult PHP ja tingimuslikud WordPressi sildid.

💡 Kiire ülevaade:

• Tuvasta oma avalehe tüüp: staatiline leht või viimased postitused, sest tingimuslik silt sõltub sellest
• Kasuta staatilise avalehe puhul is_front_page() ja blogilehe puhul is_home()
• Paiguta kood oma alamteema faili functions.php või Code Snippets plugina kaudu
• Kontrolli DevTools → Network kaudu, et skripte ei laadita sisulehtedel

1. Samm. Tuvasta oma avalehe tüüp

WordPress eristab kahte mõistet: esileht, mida külastaja näeb saidi juur-URLil, ja postituste leht, leht, mis kuvab blogipostitusi. Need võivad olla samad (avaleht = postituste voog) või erinevad (avaleht = staatiline leht, samal ajal kui blogi asub eraldi URLil).

Ava administraatori paneel: Seaded → Lugemine. Jaotises „Sinu avalehel kuvatakse":

• „Sinu viimased postitused": avaleht ja blogileht on samad. Koodis kasuta is_home() või is_front_page(); mõlemad tagastavad true.
• „Staatiline leht" koos valitud avalehega: kasuta is_front_page(). Siin tagastab is_home() väärtuse true ainult blogilehel (kui see on eraldi määratud).

Kui sa pole kindel, kasuta is_front_page(). See on usaldusväärsem, sest see käivitub avalehel olenemata seadistusest.

2. Samm. Laadi skript ainult avalehe jaoks

Kood läheb sinu alamteema faili functions.php. Kui sul ei ole alamteemat, kasuta Code Snippets pluginat (5. samm): peateema functions.php muutmine kirjutatakse järgmisel uuendusel üle.

Allolev näide laadib JavaScripti faili jaluses ainult siis, kui külastaja on avalehel:

1
/**
2
 * Enqueues a custom script only on the front page.
3
 * Hook location: child theme's functions.php or Code Snippets.
4
 */
5
add_action('wp_enqueue_scripts', function () {
6
    if (! is_front_page()) {
7
        return;
8
    }
9
 
10
    wp_enqueue_script(
11
        'my-frontpage-script',                         // handle — unique name
12
        get_template_directory_uri() . '/js/frontpage.js', // path to file
13
        array(),                                       // dependencies (jquery, etc.)
14
        '1.0.0',                                       // version for cache busting
15
        true                                           // true = in footer, false = in head
16
    );
17
});

Siin on, mis toimub. wp_enqueue_scripts konks on õige koht front-end skriptide registreerimiseks (mitte init, mitte wp_head). is_front_page() kontrollib, et oleme avalehel. Funktsioon wp_enqueue_script lisab faili järjekorda ja WordPress ise lisab <script> sildi jaluses, enne sulgevat </body>.

Märkus: get_template_directory_uri() tagastab peateema kausta URLi. Kui fail on alamteemas, asenda see väärtusega get_stylesheet_directory_uri().

3. Samm. Laadi stiilid samal viisil

CSS-faili puhul on loogika identne: tingimuslik silt + wp_enqueue_style. Kood läheb samasse funktsiooni nagu skriptid; eraldi konksu pole vaja.

1
if (is_front_page()) {
2
    wp_enqueue_style(
3
        'my-frontpage-styles',
4
        get_template_directory_uri() . '/css/frontpage.css',
5
        array(),
6
        '1.0.0'
7
    );
8
}

wp_enqueue_style viies parameeter on meediatüüp. See on vaikimisi 'all'. Kui stiilid on ainult ekraanidele, mis on laiemad kui 768px, määra 'screen and (min-width: 768px)'.

Kombineeri skriptid ja stiilid ühes funktsioonis. Nii väldid üleliigseid kontrolle:

1
add_action('wp_enqueue_scripts', function () {
2
    if (! is_front_page()) {
3
        return;
4
    }
5
 
6
    wp_enqueue_script(
7
        'my-frontpage-script',
8
        get_template_directory_uri() . '/js/frontpage.js',
9
        array(),
10
        '1.0.0',
11
        true
12
    );
13
 
14
    wp_enqueue_style(
15
        'my-frontpage-styles',
16
        get_template_directory_uri() . '/css/frontpage.css',
17
        array(),
18
        '1.0.0'
19
    );
20
});

Varajane return funktsiooni ülaosas on puhtam kui pesastatud if plokid. Kood on pikem, kuid seda on kiirem lugeda.

4. Samm. Erijuhtum: avaleht ja blogileht

Kui Seaded → Lugemine on seatud valikule „Sinu viimased postitused", töötavad is_front_page() ja is_home() identselt. Aga kui avaleht on staatiline leht ja blogi asub aadressil /blog/, vajad topeltkontrolli.

Skripti laadimiseks AINULT blogilehel (mitte staatilisel avalehel), kasuta is_home():

1
if (is_home()) {
2
    // Code will only run on the posts page
3
}

Laadimiseks NII avalehel KUI KA blogilehel, kombineeri neid:

1
if (is_front_page() || is_home()) {
2
    // Code will run on both "home" pages
3
}

Täieliku tingimuslike siltide nimekirja leiad ametlikust WordPressi dokumentatsioonist. Sealt leiad ka is_page (leht lühipõhise nime järgi), is_single (üksik postitus), is_category (kategooria arhiiv) ja kümneid teisi kontrolle laadimise täpseks juhtimiseks.

5. Samm. Ilma functions.php muutmiseta: Code Snippets plugin

Kui sa eelistad mitte puutuda teema faile, paigalda tasuta Code Snippets plugin WordPress.org kataloogist. See lisab administraatori paneelis jaotise Snippets → Add New: kleebi oma kood, vali selle käivitamine „front end-il" ja salvesta. Tulemus on sama mis functions.php puhul, kuid kood säilib teema vahetamisel.

Code Snippetsi teine eelis: kui teed süntaksivea, püüab plugin kinni saatusliku vea ja laseb sul muudatuse tagasi võtta. Kui muudad functions.php-d läbi administraatori paneeli, võtab üks puuduv sulg maha kogu saidi. Tee alati täielik varukoopia enne teemafailide muutmist.

Tulemuse kontrollimine

Ava oma sait, vajuta F12 → Network sakk ja värskenda lehte. Päringute nimekirjast leia oma skript (frontpage.js või kuidas sa selle nimetasid). Nüüd navigeeri ükskõik millisele sisulehele ja värskenda; skript ei tohiks nimekirjas ilmuda.

Kui skript laadib endiselt kõikjal, kontrolli järgmist:

• Kas konks on kindlasti wp_enqueue_scripts ja mitte init? init käivitub enne lehe konteksti määramist, seega võivad tingimuslikud sildid tagastada valesid tulemusi.
• Kas fail on alamteema functions.php-s? Peateema võib olla konksu üle kirjutanud.
• Kas optimeerimisplugin salvestab vahemällu? Tühjenda see.

⁉️🤔 Korduma kippuvad küsimused

Kuidas is_front_page() erineb is_home()-st?

is_front_page() tagastab true saidi avalehel IGAS seadistuses, olenemata sellest, kas see kuvab viimaseid postitusi või staatilist lehte. is_home() tagastab true ainult blogipostituste lehel. Kui Seaded → Lugemine on seatud valikule „Sinu viimased postitused", tagastavad mõlemad sildid true. Kui avaleht on staatiline leht, käivitub is_home() ainult lehel /blog/ (kui see on määratud).

Miks minu kood failis functions.php ei tööta?

Kolm kõige levinumat põhjust. Esiteks: init konksu kasutamine wp_enqueue_scripts asemel, sest tingimuslikud sildid pole init hetkel veel määratletud. Teiseks: peateema functions.php kirjutati uuendusega üle; kasuta alati alamteemat või Code Snippetsi. Kolmandaks: failitee on vale. get_template_directory_uri() osutab peateema kaustale, samas kui get_stylesheet_directory_uri() osutab alamteema kaustale. Kontrolli, trükkides väärtuse välja ja avades URLi brauseris.

Kas ma saan laadida skripti mitmel konkreetsel lehel?

Jah. Asenda is_front_page() väärtusega is_page(array('about', 'contact')) ja skript laaditakse lehtedel, mille lühipõhised nimed on about ja contact. Või kasuta is_single('post-slug') konkreetse postituse jaoks. Täielik tingimuslike siltide nimekiri on aadressil developer.wordpress.org.

Mis vahe on get_template_directory_uri() ja get_stylesheet_directory_uri() vahel?

Esimene tagastab peateema kausta URLi; teine tagastab alamteema kausta URLi. Kui töötad alamteemas ja fail on seal salvestatud, kasuta get_stylesheet_directory_uri(). Kui fail on peateemas (või sul on ainult üks teema, ilma alamateemata), kasuta get_template_directory_uri(). Vale tee on number üks põhjus, miks skript ei laadi.

Kas ma peaksin kontrolliks kasutama $_SERVER['REQUEST_URI']?

Ei. $_SERVER['REQUEST_URI'] puruneb päringuparameetrite korral: /?utm_source=twitter ei võrdu enam /. Lisaks sellele lisavad mõned hostid REQUEST_URI-sse täistee koos alamkataloogiga. WordPressi tingimuslikud sildid on usaldusväärsemad ja töötavad koheselt.

Kokkuvõte: kolm rida, mis parandavad laadimiskiirust

Praktikas vajab enamik saite vaid ühte is_front_page() ja paari wp_enqueue_script/wp_enqueue_style väljakutset.

Tingimuslik skriptide laadimine ei ole mikrooptimeerimine. Üksainus „raske" liuguriplugin, mis kaalub 300 KB ja on üle kogu saidi laaditud ühe avalehe animatsiooni jaoks, lisab pool sekundit iga sisulehe laadimisajale. Korruta see oma külastajate arvuga ja saad kaotatud otsingureitingud.

Reegel on lihtne: fail laaditakse seal, kus seda kasutatakse. Avalehe jaoks is_front_page(). Blogi jaoks is_home(). Konkreetse lehe jaoks is_page('slug').

• Kui sul on staatiline avaleht, kasuta is_front_page() ja hoia asi lihtsana.
• Kui avaleht on viimaste postituste voog, töötab kumbki silt.
• Kui skriptid ja stiilid korduvad mitmel lehel, eralda tingimused massiivi ja kontrolli in_array() abil.

Alusta auditist: ava DevTools → Coverage (kolm punkti Network sakis → More tools → Coverage), värskenda lehte ja vaata, kui palju kilobaitte JS-i ja CSS-i jääb kasutamata. See number üllatab sind. Millist tingimusliku laadimise tehnikat sina kasutad? Jaga seda kommentaarides.