Lisäsit raskaan sliderin koko sivustolle vain yhtä etusivun animaatiota varten? Kymmeniä tarpeettomia kilotavuja latautuu jokaisella sivulla: sisäiset artikkelit, yhteystiedot, sivukartta. Vierailijat odottavat, ja Google laskee Core Web Vitals -pisteitäsi.

Ongelma ei ole lisäosissa eikä teemassa. Ongelma on siinä, että WordPress ei oletuksena erottele sivuja rekisteröidessään skriptejä. Yksi wp_enqueue_script-rivi functions.php-tiedostossa, ja tiedosto latautuu kaikkialle: etusivulle, hallintapaneeliin ja kirjautumissivulle.

Alla on kolme toimivaa tapaa lisätä skriptejä ja tyylejä ainoastaan etusivulle. Ei optimointilisäosia. Vain PHP:tä ja ehdollisia WordPress-tageja.

💡 Pikaopas:

• Tunnista etusivusi tyyppi: staattinen sivu vai uusimmat artikkelit, sillä ehdollinen tagi riippuu siitä
• Käytä is_front_page() staattiselle etusivulle ja is_home() blogisivulle
• Sijoita koodi lapsiteeman functions.php-tiedostoon tai Code Snippets -lisäosan kautta
• Varmista DevTools → Network -välilehdeltä, etteivät skriptit lataudu sisäisillä sivuilla

Vaihe 1. Tunnista etusivusi tyyppi

WordPress erottaa kaksi käsitettä: Front Page, jonka vierailija näkee sivuston juuri-URL-osoitteessa, ja Posts Page, sivu joka näyttää blogiartikkelit. Ne voivat olla sama asia (etusivu = artikkelisyöte) tai eri asia (etusivu = staattinen sivu, kun blogi sijaitsee erillisessä URL-osoitteessa).

Avaa hallintapaneeli: Asetukset → Lukeminen. Kohdassa "Etusivulla näytetään":

• "Uusimmat artikkelisi": etusivu ja blogisivu ovat sama asia. Koodissa käytä is_home() tai is_front_page(); molemmat palauttavat true.
• "Staattinen sivu" ja valittu etusivu: käytä is_front_page(). Tässä tapauksessa is_home() palauttaa true vain blogisivulla (jos sellainen on erikseen määritetty).

Jos olet epävarma, käytä is_front_page(). Se on luotettavampi, koska se toimii etusivulla asetuksesta riippumatta.

Vaihe 2. Lisää skripti vain etusivulle

Koodi sijoitetaan lapsiteemasi functions.php-tiedostoon. Jos sinulla ei ole lapsiteemaa, käytä Code Snippets -lisäosaa (vaihe 5): pääteeman functions.php-tiedoston muokkaaminen ylikirjoitetaan seuraavassa päivityksessä.

Alla oleva esimerkki lisää JavaScript-tiedoston footeriin vain, kun vierailija on etusivulla:

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
});

Tässä mitä tapahtuu. wp_enqueue_scripts-koukku on oikea paikka rekisteröidä front-end-skriptejä (ei init, ei wp_head). is_front_page() tarkistaa, että olemme etusivulla. wp_enqueue_script-funktio lisää tiedoston jonoon, ja WordPress itse lisää <script>-tagin footeriin, ennen sulkevaa </body>-tagia.

Huom: get_template_directory_uri() palauttaa pääteeman kansion URL-osoitteen. Jos tiedosto on lapsiteemassa, korvaa se funktiolla get_stylesheet_directory_uri().

Vaihe 3. Lisää tyylit samalla tavalla

CSS-tiedostolle logiikka on identtinen: ehdollinen tagi + wp_enqueue_style. Koodi menee samaan funktioon kuin skriptit; erillistä koukkua ei tarvita.

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-funktion viides parametri on mediatyyppi. Sen oletusarvo on 'all'. Jos tyylit on tarkoitettu vain yli 768px leveille näytöille, määritä 'screen and (min-width: 768px)'.

Yhdistä skriptit ja tyylit yhteen funktioon. Näin vältät turhat tarkistukset:

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
});

Aikainen return funktion alussa on selkeämpi kuin sisäkkäiset if-lohkot. Koodi on pidempi, mutta se on nopeampi lukea.

Vaihe 4. Erikoistapaus: etusivu ja blogisivu

Jos Asetukset → Lukeminen on asetettu kohtaan "Uusimmat artikkelisi", is_front_page() ja is_home() toimivat identtisesti. Mutta jos etusivu on staattinen sivu ja blogi sijaitsee osoitteessa /blog/, tarvitset kaksoistarkistuksen.

Lisätäksesi skriptin VAIN blogisivulle (ei staattiselle etusivulle), käytä is_home():

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

Lisätäksesi skriptin SEKÄ etusivulle ETTÄ blogisivulle, yhdistä ne:

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

Täydellinen lista ehdollisista tageista löytyy virallisesta WordPress-dokumentaatiosta. Sieltä löydät myös is_page (sivu polkutunnuksen mukaan), is_single (yksittäinen artikkeli), is_category (kategoria-arkisto) ja kymmeniä muita tarkistuksia latauksen hienojakoiseen hallintaan.

Vaihe 5. Ilman functions.php-tiedoston muokkausta: Code Snippets -lisäosa

Jos et halua koskea teematiedostoihin, asenna ilmainen Code Snippets -lisäosa WordPress.org-hakemistosta. Se lisää hallintapaneeliin Snippets → Add New -osion: liitä koodisi, valitse sen suoritettavaksi "front endissä" ja tallenna. Vaikutus on sama kuin functions.php-tiedostossa, mutta koodi säilyy teeman vaihdossa.

Toinen Code Snippetsin etu: jos teet syntaksivirheen, lisäosa havaitsee kriittisen virheen ja antaa sinun perua muutoksen. Kun muokkaat functions.php-tiedostoa hallintapaneelin kautta, yksi puuttuva sulje kaataa koko sivuston. Tee aina täysi varmuuskopio ennen teematiedostojen muokkaamista.

Tuloksen varmistaminen

Avaa sivustosi, paina F12 → Network-välilehti ja päivitä sivu. Pyyntölistasta etsi skriptisi (frontpage.js tai miksi sen nimesitkään). Siirry nyt mille tahansa sisäiselle sivulle ja päivitä; skriptin ei pitäisi näkyä listassa.

Jos skripti latautuu edelleen kaikkialla, tarkista seuraavat:

• Onko koukku varmasti wp_enqueue_scripts eikä init? init suoritetaan ennen kuin sivukonteksti on määritetty, joten ehdolliset tagit voivat palauttaa vääriä tuloksia.
• Onko tiedosto lapsiteeman functions.php-tiedostossa? Pääteema on saattanut ohittaa koukun.
• Onko optimointilisäosa välimuistissa? Tyhjennä se.

⁉️🤔 Usein kysytyt kysymykset

Miten is_front_page() eroaa is_home()-funktiosta?

is_front_page() palauttaa true sivuston etusivulla MILLÄ TAHANSA asetuksella, näyttipä se sitten uusimmat artikkelit tai staattisen sivun. is_home() palauttaa true vain blogiartikkelisivulla. Jos Asetukset → Lukeminen on asetettu kohtaan "Uusimmat artikkelisi", molemmat tagit palauttavat true. Jos etusivu on staattinen sivu, is_home() toimii vain osoitteessa /blog/ (jos sellainen on määritetty).

Miksi koodini functions.php-tiedostossa ei toimi?

Kolme yleisintä syytä. Ensimmäinen: init-koukun käyttö wp_enqueue_scripts-koukun sijasta, koska ehdollisia tageja ei ole vielä määritelty init-vaiheessa. Toinen: pääteeman functions.php-tiedosto ylikirjoitettiin päivityksessä; käytä aina lapsiteemaa tai Code Snippetsiä. Kolmas: tiedostopolku on väärä. get_template_directory_uri() osoittaa pääteeman kansioon, kun taas get_stylesheet_directory_uri() osoittaa lapsiteeman kansioon. Varmista tulostamalla arvo ja avaamalla URL selaimessa.

Voinko lisätä skriptin usealle tietylle sivulle?

Kyllä. Korvaa is_front_page() funktiolla is_page(array('about', 'contact')), ja skripti latautuu sivuilla, joiden polkutunnukset ovat about ja contact. Tai käytä is_single('post-slug') tietylle artikkelille. Täydellinen lista ehdollisista tageista on osoitteessa developer.wordpress.org.

Mitä eroa on get_template_directory_uri()- ja get_stylesheet_directory_uri()-funktioilla?

Ensimmäinen palauttaa pääteeman kansion URL-osoitteen; toinen palauttaa lapsiteeman kansion URL-osoitteen. Jos työskentelet lapsiteemassa ja tiedosto on tallennettu sinne, käytä get_stylesheet_directory_uri(). Jos tiedosto on pääteemassa (tai sinulla on vain yksi teema, ilman lasta), käytä get_template_directory_uri(). Väärä polku on yleisin syy skriptin latautumisen epäonnistumiseen.

Pitäisikö minun käyttää $_SERVER['REQUEST_URI']-muuttujaa tarkistukseen?

Ei. $_SERVER['REQUEST_URI'] hajoaa kyselyparametrien kanssa: /?utm_source=twitter ei enää vastaa osoitetta /. Lisäksi jotkut palveluntarjoajat sisällyttävät REQUEST_URI-muuttujaan koko polun alihakemistoineen. WordPressin ehdolliset tagit ovat luotettavampia ja toimivat suoraan.

Yhteenveto: kolme riviä, jotka parantavat latausnopeutta

Käytännössä useimmat sivustot tarvitsevat vain yhden is_front_page()-tarkistuksen ja pari wp_enqueue_script/wp_enqueue_style-kutsua.

Ehdollinen skriptien lataus ei ole mikro-optimointia. Yksi "raskas" slider-lisäosa, joka painaa 300 kt ja joka on lisätty koko sivuston laajuisesti yhtä etusivun animaatiota varten, lisää puoli sekuntia jokaisen sisäisen sivun latausaikaan. Kerro se kävijämäärälläsi, ja menetät hakusijoituksia.

Sääntö on yksinkertainen: tiedosto latautuu siellä, missä sitä käytetään. Etusivulle is_front_page(). Blogiin is_home(). Tietylle sivulle is_page('slug').

• Jos sinulla on staattinen etusivu, käytä is_front_page() ja pidä asia yksinkertaisena.
• Jos etusivu on uusimpien artikkelien syöte, kumpi tahansa tagi toimii.
• Jos skriptit ja tyylit toistuvat usealla sivulla, erota ehdot taulukkoon ja tarkista in_array()-funktiolla.

Aloita auditoinnilla: avaa DevTools → Coverage (kolme pistettä Network-välilehdellä → More tools → Coverage), päivitä sivu ja katso, kuinka monta kilotavua JS:ää ja CSS:ää jää käyttämättä. Luku yllättää sinut. Mitä ehdollisen latauksen tekniikkaa sinä käytät? Jaa se kommenteissa.