Sie haben einen schwergewichtigen Slider über die gesamte Website eingebunden, nur für eine Animation auf der Startseite? Dutzende überflüssige Kilobyte laden auf jeder Seite: interne Beiträge, Kontakt, die Sitemap. Besucher warten, und Google stuft Ihre Core Web Vitals-Werte herab.

Das Problem sind nicht Plugins oder das Theme. Das Problem ist, dass WordPress bei der Registrierung von Skripten standardmäßig nicht zwischen Seiten unterscheidet. Eine einzige wp_enqueue_script-Zeile in der functions.php, und die Datei lädt überall: auf der Startseite, im Admin-Bereich und auf der Login-Seite.

Nachfolgend finden Sie drei funktionierende Methoden, um Skripte und Styles ausschließlich für die Startseite einzubinden. Keine Optimierungs-Plugins. Nur PHP und konditionale WordPress-Tags.

💡 Kurzüberblick:

• Ermitteln Sie Ihren Startseitentyp: statische Seite oder neueste Beiträge, denn davon hängt das konditionale Tag ab
• Verwenden Sie is_front_page() für eine statische Startseite und is_home() für die Blog-Seite
• Platzieren Sie den Code in der functions.php Ihres Child-Themes oder über das Code-Snippets-Plugin
• Prüfen Sie über DevTools → Netzwerk, dass Skripte nicht auf internen Seiten laden

Schritt 1. Ermitteln Sie Ihren Startseitentyp

WordPress unterscheidet zwei Konzepte: Front Page, das, was der Besucher unter der Root-URL der Website sieht, und Posts Page, die Seite, die Blog-Beiträge anzeigt. Sie können identisch sein (Startseite = Beitrags-Feed) oder unterschiedlich (Startseite = statische Seite, während der Blog unter einer separaten URL liegt).

Öffnen Sie das Admin-Panel: Einstellungen → Lesen. Im Abschnitt „Deine Startseite zeigt":

• „Deine neuesten Beiträge": Startseite und Blog-Seite sind identisch. Verwenden Sie im Code is_home() oder is_front_page(); beide geben true zurück.
• „Eine statische Seite" mit ausgewählter Startseite: Verwenden Sie is_front_page(). Hier gibt is_home() nur auf der Blog-Seite true zurück (sofern eine separat zugewiesen ist).

Wenn Sie unsicher sind, nehmen Sie is_front_page(). Das ist zuverlässiger, da es unabhängig von der Einstellung auf der Startseite greift.

Schritt 2. Skript nur für die Startseite einbinden

Der Code gehört in die functions.php Ihres Child-Themes. Wenn Sie kein Child-Theme haben, nutzen Sie das Code-Snippets-Plugin (Schritt 5): Eine Bearbeitung der functions.php des Parent-Themes wird beim nächsten Update überschrieben.

Das folgende Beispiel bindet eine JavaScript-Datei nur dann im Footer ein, wenn der Besucher auf der Startseite ist:

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

Hier ist, was passiert. Der wp_enqueue_scripts-Hook ist die korrekte Stelle, um Frontend-Skripte zu registrieren (nicht init, nicht wp_head). is_front_page() prüft, ob wir uns auf der Startseite befinden. Die Funktion wp_enqueue_script fügt die Datei der Warteschlange hinzu, und WordPress selbst fügt den <script>-Tag im Footer ein, vor dem schließenden </body>.

Hinweis: get_template_directory_uri() gibt die URL des Parent-Theme-Ordners zurück. Liegt die Datei im Child-Theme, ersetzen Sie es durch get_stylesheet_directory_uri().

Schritt 3. Styles auf dieselbe Weise einbinden

Für eine CSS-Datei ist die Logik identisch: konditionales Tag + wp_enqueue_style. Der Code kommt in dieselbe Funktion wie die Skripte; ein separater Hook ist nicht nötig.

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
}

Der fünfte Parameter von wp_enqueue_style ist der Medientyp. Standard ist 'all'. Wenn die Styles nur für Bildschirme breiter als 768px gelten, geben Sie 'screen and (min-width: 768px)' an.

Fassen Sie Skripte und Styles in einer einzigen Funktion zusammen. So vermeiden Sie redundante Prüfungen:

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

Ein frühes return am Anfang der Funktion ist sauberer als verschachtelte if-Blöcke. Der Code ist länger, liest sich aber schneller.

Schritt 4. Sonderfall: Startseite und Blog-Seite

Wenn Einstellungen → Lesen auf „Deine neuesten Beiträge" gesetzt ist, funktionieren is_front_page() und is_home() identisch. Ist die Startseite jedoch eine statische Seite und der Blog liegt unter /blog/, benötigen Sie eine doppelte Prüfung.

Um ein Skript NUR auf der Blog-Seite einzubinden (nicht auf der statischen Startseite), verwenden Sie is_home():

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

Um es sowohl auf der Startseite ALS AUCH auf der Blog-Seite einzubinden, kombinieren Sie beide:

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

Die vollständige Liste der konditionalen Tags finden Sie in der offiziellen WordPress-Dokumentation. Dort finden Sie auch is_page (Seite nach Slug), is_single (Einzelbeitrag), is_category (Kategorie-Archiv) und Dutzende weiterer Prüfungen für eine granulare Kontrolle des Ladeverhaltens.

Schritt 5. Ohne Bearbeitung der functions.php: das Code-Snippets-Plugin

Wenn Sie Theme-Dateien nicht anfassen möchten, installieren Sie das kostenlose Code-Snippets-Plugin aus dem WordPress.org-Verzeichnis. Es fügt im Admin-Panel einen Bereich Snippets → Neu hinzufügen hinzu: Fügen Sie Ihren Code ein, wählen Sie die Ausführung „auf dem Frontend" und speichern Sie. Der Effekt ist derselbe wie bei der functions.php, aber der Code überlebt einen Theme-Wechsel.

Ein weiterer Vorteil von Code Snippets: Wenn Sie einen Syntaxfehler machen, fängt das Plugin den fatalen Fehler ab und lässt Sie die Änderung rückgängig machen. Wenn Sie die functions.php über das Admin-Panel bearbeiten, legt eine einzige fehlende Klammer die gesamte Website lahm. Erstellen Sie immer ein vollständiges Backup, bevor Sie Theme-Dateien bearbeiten.

Ergebnis überprüfen

Öffnen Sie Ihre Website, drücken Sie F12 → den Tab Netzwerk und laden Sie die Seite neu. Suchen Sie in der Liste der Anfragen Ihr Skript (frontpage.js oder wie Sie es genannt haben). Navigieren Sie nun zu einer beliebigen internen Seite und laden Sie neu; das Skript sollte nicht in der Liste erscheinen.

Wenn das Skript immer noch überall lädt, prüfen Sie Folgendes:

• Ist der Hook definitiv wp_enqueue_scripts und nicht init? init feuert, bevor der Seitenkontext feststeht, daher können konditionale Tags falsche Ergebnisse liefern.
• Ist die Datei in der functions.php des Child-Themes? Das Parent-Theme könnte den Hook überschrieben haben.
• Cacht ein Optimierungs-Plugin? Leeren Sie es.

⁉️🤔 Häufig gestellte Fragen

Wie unterscheidet sich is_front_page() von is_home()?

is_front_page() gibt unter JEDER Einstellung true auf der Startseite der Website zurück, egal ob diese die neuesten Beiträge oder eine statische Seite anzeigt. is_home() gibt nur auf der Blog-Beitragsseite true zurück. Wenn Einstellungen → Lesen auf „Deine neuesten Beiträge" gesetzt ist, geben beide Tags true zurück. Ist die Startseite eine statische Seite, feuert is_home() nur auf /blog/ (sofern eine zugewiesen ist).

Warum funktioniert mein Code in der functions.php nicht?

Drei häufigste Gründe. Erstens: Verwendung des init-Hooks anstelle von wp_enqueue_scripts, da konditionale Tags bei init noch nicht definiert sind. Zweitens: Die functions.php des Parent-Themes wurde durch ein Update überschrieben; verwenden Sie immer ein Child-Theme oder Code Snippets. Drittens: Der Dateipfad ist falsch. get_template_directory_uri() zeigt auf den Parent-Theme-Ordner, während get_stylesheet_directory_uri() auf den Child-Theme-Ordner zeigt. Überprüfen Sie dies, indem Sie den Wert ausgeben und die URL im Browser öffnen.

Kann ich ein Skript auf mehreren bestimmten Seiten einbinden?

Ja. Ersetzen Sie is_front_page() durch is_page(array('about', 'contact')), und das Skript lädt auf Seiten mit den Slugs about und contact. Oder verwenden Sie is_single('post-slug') für einen bestimmten Beitrag. Die vollständige Liste der konditionalen Tags finden Sie auf developer.wordpress.org.

Was ist der Unterschied zwischen get_template_directory_uri() und get_stylesheet_directory_uri()?

Ersteres gibt die URL des Parent-Theme-Ordners zurück; letzteres die URL des Child-Theme-Ordners. Wenn Sie in einem Child-Theme arbeiten und die Datei dort liegt, verwenden Sie get_stylesheet_directory_uri(). Liegt die Datei im Parent-Theme (oder Sie haben nur ein Theme, ohne Child), verwenden Sie get_template_directory_uri(). Ein falscher Pfad ist der Hauptgrund, warum ein Skript nicht lädt.

Sollte ich $_SERVER['REQUEST_URI'] für die Prüfung verwenden?

Nein. $_SERVER['REQUEST_URI'] scheitert an Query-Parametern: /?utm_source=twitter entspricht nicht mehr /. Darüber hinaus nehmen manche Hoster den vollständigen Pfad mit dem Unterverzeichnis in REQUEST_URI auf. Konditionale Tags von WordPress sind zuverlässiger und funktionieren direkt.

Fazit: Drei Zeilen, die die Ladegeschwindigkeit verbessern

In der Praxis benötigen die meisten Websites nur ein einziges is_front_page() und ein paar wp_enqueue_script-/wp_enqueue_style-Aufrufe.

Konditionales Laden von Skripten ist keine Mikrooptimierung. Ein einzelnes „schwergewichtiges" Slider-Plugin mit 300 KB, das site-weit für eine Startseiten-Animation eingebunden wird, fügt jeder internen Seite eine halbe Sekunde Ladezeit hinzu. Multiplizieren Sie das mit Ihrer Besucherzahl, und Sie erhalten verlorene Suchmaschinenplatzierungen.

Die Regel ist einfach: Eine Datei lädt dort, wo sie verwendet wird. Für die Startseite is_front_page(). Für den Blog is_home(). Für eine bestimmte Seite is_page('slug').

• Wenn Sie eine statische Startseite haben, verwenden Sie is_front_page() und halten Sie es einfach.
• Wenn die Startseite der Feed der neuesten Beiträge ist, funktionieren beide Tags.
• Wenn sich Skripte und Styles über mehrere Seiten wiederholen, extrahieren Sie die Bedingungen in ein Array und prüfen Sie mit in_array().

Beginnen Sie mit einem Audit: Öffnen Sie DevTools → Abdeckung (drei Punkte im Netzwerk-Tab → Weitere Tools → Abdeckung), laden Sie die Seite neu und sehen Sie, wie viele Kilobyte an JS und CSS ungenutzt bleiben. Die Zahl wird Sie überraschen. Welche Technik zum konditionalen Laden verwenden Sie? Teilen Sie sie in den Kommentaren.