Du la til en tung slider på hele nettstedet bare for én animasjon på forsiden? Dusinvis av unødvendige kilobyte lastes på hver side: interne innlegg, kontaktsiden, sidekartet. Besøkende venter, og Google senker poengsummen din for Core Web Vitals.

Problemet er ikke utvidelser eller temaet. Problemet er at WordPress som standard ikke skiller mellom sider når det registrerer skript. En enkelt wp_enqueue_script-linje i functions.php, og filen lastes overalt: forsiden, administrasjonspanelet og innloggingssiden.

Nedenfor finner du tre fungerende metoder for å laste skript og stiler utelukkende for forsiden. Ingen optimaliseringsutvidelser. Bare PHP og betingede WordPress-tagger.

💡 Rask oversikt:

• Identifiser forsidetypen din: statisk side eller siste innlegg, for den betingede taggen avhenger av det
• Bruk is_front_page() for en statisk forside og is_home() for bloggsiden
• Plasser koden i barnetemaets functions.php eller via Code Snippets-utvidelsen
• Bekreft via DevTools → Nettverk at skript ikke lastes på interne sider

Trinn 1. Identifiser forsidetypen din

WordPress skiller mellom to konsepter: Forside, det den besøkende ser på nettstedets rot-URL, og Innleggsside, siden som viser blogginnlegg. De kan være den samme (forside = innleggsstrøm) eller forskjellige (forside = statisk side, mens bloggen ligger på en egen URL).

Åpne administrasjonspanelet: Innstillinger → Lesing. I seksjonen «Forsiden viser»:

• «Dine siste innlegg»: forsiden og bloggsiden er den samme. I kode bruker du is_home() eller is_front_page(); begge vil returnere true.
• «En statisk side» med en valgt forside: bruk is_front_page(). Her vil is_home() bare returnere true på bloggsiden (hvis en er tildelt separat).

Hvis du er usikker, gå for is_front_page(). Den er mer pålitelig fordi den utløses på forsiden uavhengig av innstillingen.

Trinn 2. Last skriptet kun for forsiden

Koden plasseres i barnetemaets functions.php-fil. Hvis du ikke har et barnetema, bruk Code Snippets-utvidelsen (trinn 5): redigering av hovedtemaets functions.php vil bli overskrevet ved neste oppdatering.

Eksemplet nedenfor laster en JavaScript-fil i bunnteksten bare når den besøkende er på forsiden:

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

Her er hva som skjer. wp_enqueue_scripts-hooken er det riktige stedet å registrere frontend-skript (ikke init, ikke wp_head). is_front_page() sjekker at vi er på forsiden. Funksjonen wp_enqueue_script legger filen til i køen, og WordPress selv setter inn <script>-taggen i bunnteksten, før avsluttende </body>.

Merk: get_template_directory_uri() returnerer URL-en til hovedtemaets mappe. Hvis filen ligger i barnetemaet, erstatt den med get_stylesheet_directory_uri().

Trinn 3. Last stiler på samme måte

For en CSS-fil er logikken identisk: betinget tagg + wp_enqueue_style. Koden går inn i samme funksjon som skriptene; en egen hook er ikke nødvendig.

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
}

Den femte parameteren til wp_enqueue_style er medietypen. Den er 'all' som standard. Hvis stilene bare er for skjermer bredere enn 768px, spesifiser 'screen and (min-width: 768px)'.

Kombiner skript og stiler i én enkelt funksjon. På denne måten unngår du overflødige sjekker:

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

En tidlig return øverst i funksjonen er ryddigere enn nestede if-blokker. Koden er lengre, men den leses raskere.

Trinn 4. Spesialtilfelle: forside og bloggside

Hvis Innstillinger → Lesing er satt til «Dine siste innlegg», fungerer is_front_page() og is_home() identisk. Men hvis forsiden er en statisk side og bloggen ligger på /blog/, trenger du en dobbel sjekk.

For å laste et skript KUN på bloggsiden (ikke på den statiske forsiden), bruk is_home():

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

For å laste på BÅDE forsiden OG bloggsiden, kombiner dem:

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

For den fullstendige listen over betingede tagger, se den offisielle WordPress-dokumentasjonen. Der finner du også is_page (side etter slug), is_single (enkeltinnlegg), is_category (kategoriarkiv) og dusinvis av andre sjekker for granulær kontroll over lasting.

Trinn 5. Uten å redigere functions.php: Code Snippets-utvidelsen

Hvis du foretrekker å ikke røre temafiler, installer den gratis Code Snippets-utvidelsen fra WordPress.org-katalogen. Den legger til en Snippets → Legg til ny-seksjon i administrasjonspanelet: lim inn koden din, velg å kjøre den «på frontend», og lagre. Effekten er den samme som functions.php, men koden overlever et temabytte.

En annen fordel med Code Snippets: hvis du gjør en syntaksfeil, fanger utvidelsen opp den fatale feilen og lar deg rulle tilbake endringen. Når du redigerer functions.php via administrasjonspanelet, vil en enkelt manglende parentes ta ned hele nettstedet. Ta alltid en full sikkerhetskopi før du redigerer temafiler.

Bekrefte resultatet

Åpne nettstedet ditt, trykk F12 → Nettverk-fanen, og oppdater siden. I forespørselslisten finner du skriptet ditt (frontpage.js eller hva du kalte det). Naviger nå til en hvilken som helst intern side og oppdater; skriptet skal ikke vises i listen.

Hvis skriptet fortsatt lastes overalt, sjekk følgende:

• Er hooken definitivt wp_enqueue_scripts og ikke init? init utløses før sidekonteksten er bestemt, så betingede tagger kan returnere feil resultater.
• Ligger filen i barnetemaets functions.php? Hovedtemaet kan ha overstyrt hooken.
• Er en optimaliseringsutvidelse som cacher? Tøm den.

⁉️🤔 Ofte stilte spørsmål

Hvordan skiller is_front_page() seg fra is_home()?

is_front_page() returnerer true på nettstedets forside under ENHVER innstilling, enten den viser de siste innleggene eller en statisk side. is_home() returnerer true bare på blogginnleggssiden. Hvis Innstillinger → Lesing er satt til «Dine siste innlegg», returnerer begge taggene true. Hvis forsiden er en statisk side, utløses is_home() bare på /blog/ (hvis en er tildelt).

Hvorfor virker ikke koden min i functions.php?

Tre vanligste årsaker. Første: bruk av init-hooken i stedet for wp_enqueue_scripts, fordi betingede tagger ikke er definert ennå ved init. Andre: hovedtemaets functions.php ble overskrevet av en oppdatering; bruk alltid et barnetema eller Code Snippets. Tredje: filbanen er feil. get_template_directory_uri() peker til hovedtemaets mappe, mens get_stylesheet_directory_uri() peker til barnetemaets mappe. Bekreft ved å ekko verdien og åpne URL-en i en nettleser.

Kan jeg laste et skript på flere spesifikke sider?

Ja. Erstatt is_front_page() med is_page(array('about', 'contact')), så lastes skriptet på sider med slugene about og contact. Eller bruk is_single('post-slug') for et spesifikt innlegg. Den fullstendige listen over betingede tagger finnes på developer.wordpress.org.

Hva er forskjellen mellom get_template_directory_uri() og get_stylesheet_directory_uri()?

Den første returnerer URL-en til hovedtemaets mappe; den andre returnerer URL-en til barnetemaets mappe. Hvis du jobber i et barnetema og filen er lagret der, bruk get_stylesheet_directory_uri(). Hvis filen er i hovedtemaet (eller du bare har ett tema, uten barn), bruk get_template_directory_uri(). En feil bane er den vanligste årsaken til at et skript ikke lastes.

Bør jeg bruke $_SERVER['REQUEST_URI'] for sjekken?

Nei. $_SERVER['REQUEST_URI'] bryter sammen på spørringsparametere: /?utm_source=twitter er ikke lenger lik /. I tillegg inkluderer noen verter hele banen med underkatalogen i REQUEST_URI. WordPress' betingede tagger er mer pålitelige og fungerer rett ut av boksen.

Oppsummering: tre linjer som forbedrer lastehastigheten

I praksis trenger de fleste nettsteder bare én is_front_page() og et par wp_enqueue_script/wp_enqueue_style-kall.

Betinget skriptlasting er ikke en mikrooptimalisering. En enkelt «tung» slider-utvidelse på 300 KB, lastet nettstedsdekkende for én forsideanimasjon, legger til et halvt sekund på lastetiden for hver interne side. Multipliser det med antall besøkende, så får du tapte søkerangeringer.

Regelen er enkel: en fil lastes der den brukes. For forsiden, is_front_page(). For bloggen, is_home(). For en spesifikk side, is_page('slug').

• Hvis du har en statisk forside, bruk is_front_page() og hold det enkelt.
• Hvis forsiden er strømmen av siste innlegg, vil begge taggene fungere.
• Hvis skript og stiler gjentas på tvers av flere sider, trekk ut betingelsene i en array og sjekk med in_array().

Start med en revisjon: åpne DevTools → Dekning (tre prikker i Nettverk → Flere verktøy → Dekning), oppdater siden og se hvor mange kilobyte med JS og CSS som ikke brukes. Tallet vil overraske deg. Hvilken teknikk for betinget lasting bruker du? Del den i kommentarene.