Du har lagt till en tung slider över hela webbplatsen bara för en animation på startsidan? Dussintals onödiga kilobyte laddas på varje sida: interna inlägg, kontakter, webbplatskartan. Besökare väntar, och Google sänker dina Core Web Vitals-poäng.

Problemet är inte plugins eller temat. Problemet är att WordPress inte skiljer mellan sidor när skript registreras som standard. En enda wp_enqueue_script-rad i functions.php, och filen laddas överallt: startsidan, adminpanelen och inloggningssidan.

Nedan finns tre fungerande metoder för att köa skript och stilmallar strikt för startsidan. Inga optimeringsplugins. Bara PHP och villkorliga WordPress-taggar.

💡 Snabb översikt:

• Identifiera din startsidetyp: statisk sida eller senaste inlägg, eftersom den villkorliga taggen beror på det
• Använd is_front_page() för en statisk startsida och is_home() för bloggsidan
• Placera koden i ditt barntemas functions.php eller via Code Snippets-pluginet
• Verifiera via DevTools → Nätverk att skript inte laddas på interna sidor

Steg 1. Identifiera din startsidetyp

WordPress skiljer på två koncept: Startsida, det besökaren ser på webbplatsens rot-URL, och Inläggssida, sidan som visar blogginlägg. De kan vara samma (startsida = inläggsflöde) eller olika (startsida = statisk sida, medan bloggen finns på en separat URL).

Öppna adminpanelen: Inställningar → Läsa. I avsnittet "Din startsida visar":

• "Dina senaste inlägg": startsidan och bloggsidan är samma. I kod, använd is_home() eller is_front_page(); båda returnerar true.
• "En statisk sida" med en vald startsida: använd is_front_page(). Här returnerar is_home() true endast på bloggsidan (om en sådan har tilldelats separat).

Om du är osäker, använd is_front_page(). Den är mer tillförlitlig eftersom den aktiveras på startsidan oavsett inställning.

Steg 2. Köa skriptet endast för startsidan

Koden placeras i ditt barntemas functions.php-fil. Om du inte har ett barntema, använd Code Snippets-pluginet (steg 5): redigering av huvudtemat functions.php skrivs över vid nästa uppdatering.

Exemplet nedan köar en JavaScript-fil i sidfoten endast när besökaren är på startsidan:

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

Här är vad som händer. Hooken wp_enqueue_scripts är rätt plats att registrera front-end-skript (inte init, inte wp_head). is_front_page() kontrollerar att vi är på startsidan. Funktionen wp_enqueue_script lägger till filen i kön, och WordPress själv infogar <script>-taggen i sidfoten, före den avslutande </body>.

Notera: get_template_directory_uri() returnerar URL:en till huvudtemats mapp. Om filen finns i barntemat, ersätt med get_stylesheet_directory_uri().

Steg 3. Köa stilmallar på samma sätt

För en CSS-fil är logiken identisk: villkorlig tagg + wp_enqueue_style. Koden placeras i samma funktion som skripten; en separat hook behövs inte.

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 parametern i wp_enqueue_style är mediatypen. Standard är 'all'. Om stilarna endast är för skärmar bredare än 768px, ange 'screen and (min-width: 768px)'.

Kombinera skript och stilmallar i en enda funktion. På så sätt undviker du redundanta kontroller:

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 tidig return högst upp i funktionen är renare än nästlade if-block. Koden är längre, men den läses snabbare.

Steg 4. Specialfall: startsida och bloggsida

Om Inställningar → Läsa är inställt på "Dina senaste inlägg" fungerar is_front_page() och is_home() identiskt. Men om startsidan är en statisk sida och bloggen finns på /blog/, behöver du en dubbel kontroll.

För att köa ett skript ENDAST på bloggsidan (inte på den statiska startsidan), använd is_home():

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

För att köa på BÅDE startsidan OCH bloggsidan, kombinera dem:

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

För den fullständiga listan över villkorliga taggar, se den officiella WordPress-dokumentationen. Där hittar du också is_page (sida efter slug), is_single (enskilt inlägg), is_category (kategoriarkiv) och dussintals andra kontroller för granulär kontroll över laddning.

Steg 5. Utan att redigera functions.php: Code Snippets-pluginet

Om du föredrar att inte röra temafiler, installera det kostnadsfria Code Snippets-pluginet från WordPress.org-katalogen. Det lägger till en Snippets → Lägg till ny-sektion i adminpanelen: klistra in din kod, välj att köra den "på front-end" och spara. Effekten är densamma som functions.php, men koden överlever ett temabyte.

En annan fördel med Code Snippets: om du gör ett syntaxfel fångar pluginet det fatala felet och låter dig återställa ändringen. När du redigerar functions.php via adminpanelen kan en enda saknad parentes ta ner hela webbplatsen. Gör alltid en fullständig säkerhetskopia innan du redigerar temafiler.

Verifiera resultatet

Öppna din webbplats, tryck F12 → fliken Nätverk och uppdatera sidan. I förfrågningslistan, hitta ditt skript (frontpage.js eller vad du nu döpte det till). Navigera nu till en intern sida och uppdatera; skriptet ska inte visas i listan.

Om skriptet fortfarande laddas överallt, kontrollera följande:

• Är hooken definitivt wp_enqueue_scripts och inte init? init aktiveras innan sidkontexten är fastställd, så villkorliga taggar kan returnera felaktiga resultat.
• Finns filen i barntemats functions.php? Huvudtemat kan ha åsidosatt hooken.
• Cachar ett optimeringsplugin? Rensa det.

⁉️🤔 Vanliga frågor

Hur skiljer sig is_front_page() från is_home()?

is_front_page() returnerar true på webbplatsens startsida under ALLA inställningar, oavsett om den visar de senaste inläggen eller en statisk sida. is_home() returnerar true endast på blogginläggssidan. Om Inställningar → Läsa är inställt på "Dina senaste inlägg" returnerar båda taggarna true. Om startsidan är en statisk sida aktiveras is_home() endast på /blog/ (om en sådan har tilldelats).

Varför fungerar inte min kod i functions.php?

Tre vanligaste orsakerna. För det första: användning av init-hooken istället för wp_enqueue_scripts, eftersom villkorliga taggar inte är definierade vid init. För det andra: huvudtemat functions.php skrevs över av en uppdatering; använd alltid ett barntema eller Code Snippets. För det tredje: filsökvägen är fel. get_template_directory_uri() pekar på huvudtemats mapp, medan get_stylesheet_directory_uri() pekar på barntemats mapp. Verifiera genom att eka värdet och öppna URL:en i en webbläsare.

Kan jag köa ett skript på flera specifika sidor?

Ja. Ersätt is_front_page() med is_page(array('about', 'contact')), så laddas skriptet på sidor med slugsen about och contact. Eller använd is_single('post-slug') för ett specifikt inlägg. Den fullständiga listan över villkorliga taggar finns på developer.wordpress.org.

Vad är skillnaden mellan get_template_directory_uri() och get_stylesheet_directory_uri()?

Den första returnerar URL:en till huvudtemats mapp; den andra returnerar URL:en till barntemats mapp. Om du arbetar i ett barntema och filen är lagrad där, använd get_stylesheet_directory_uri(). Om filen finns i huvudtemat (eller om du bara har ett tema, utan barntema), använd get_template_directory_uri(). En felaktig sökväg är den främsta orsaken till att ett skript misslyckas med att laddas.

Ska jag använda $_SERVER['REQUEST_URI'] för kontrollen?

Nej. $_SERVER['REQUEST_URI'] går sönder på frågeparametrar: /?utm_source=twitter är inte längre lika med /. Utöver det inkluderar vissa värdar hela sökvägen med underkatalogen i REQUEST_URI. WordPress villkorliga taggar är mer tillförlitliga och fungerar direkt.

Sammanfattning: tre rader som förbättrar laddningshastigheten

I praktiken behöver de flesta webbplatser bara en enda is_front_page() och ett par wp_enqueue_script/wp_enqueue_style-anrop.

Villkorlig skriptladdning är inte en mikrooptimering. En enda "tung" slider-plugin som väger 300 KB, köad över hela webbplatsen för en startsidesanimation, lägger till en halv sekund på laddningstiden för varje intern sida. Multiplicera det med ditt besökarantal, så får du förlorade sökrankningar.

Regeln är enkel: en fil laddas där den används. För startsidan, is_front_page(). För bloggen, is_home(). För en specifik sida, is_page('slug').

• Om du har en statisk startsida, använd is_front_page() och håll det enkelt.
• Om startsidan är flödet för senaste inlägg fungerar båda taggarna.
• Om skript och stilmallar upprepas över flera sidor, extrahera villkoren till en array och kontrollera med in_array().

Börja med en granskning: öppna DevTools → Coverage (tre punkter i Nätverk → Fler verktyg → Coverage), uppdatera sidan och se hur många kilobyte JS och CSS som är oanvända. Siffran kommer att överraska dig. Vilken teknik för villkorlig laddning använder du? Dela den i kommentarerna.