Podłączyli Państwo ciężki slider na całą witrynę dla jednej animacji na stronie głównej? Dziesiątki zbędnych kilobajtów ładują się na każdej podstronie, wpisie, stronie kontaktowej, mapie witryny. Odwiedzający czekają, Google obniża punktację za Core Web Vitals.

Problem nie leży we wtyczkach ani w motywie. Problem polega na tym, że WordPress domyślnie nie rozróżnia stron podczas rejestracji skryptów. Jedna linijka wp_enqueue_script w functions.php i plik jest podłączany wszędzie: na stronie głównej, w panelu administracyjnym i na stronie logowania.

Poniżej trzy sprawdzone sposoby na podłączenie skryptów i stylów wyłącznie na stronie głównej. Bez wtyczek optymalizacyjnych. Tylko PHP, tylko znaczniki warunkowe WordPress.

💡 Szybki przegląd:

• Proszę określić typ strony głównej: statyczna czy lista wpisów, od tego zależy znacznik warunkowy
• Proszę używać is_front_page() dla statycznej strony głównej oraz is_home() dla strony bloga
• Proszę umieścić kod w functions.php motywu potomnego lub za pomocą wtyczki Code Snippets
• Proszę sprawdzić w DevTools → Network, czy skrypty nie ładują się na podstronach

Krok 1. Proszę określić, jaką mają Państwo stronę główną

WordPress rozróżnia dwa pojęcia: Front Page, czyli to, co widzi odwiedzający pod głównym adresem URL witryny, oraz Posts Page, czyli stronę wyświetlającą wpisy z bloga. Mogą one być tożsame (strona główna = lista wpisów) lub różne (strona główna = strona statyczna, a blog pod osobnym adresem).

Proszę otworzyć panel administracyjny: Ustawienia → Czytanie. W sekcji „Strona główna wyświetla":

• „Twoje najnowsze wpisy", strona główna i blog są tożsame. W kodzie proszę użyć is_home() lub is_front_page(), oba zwrócą true.
• „Statyczną stronę" z wybraną stroną jako główną, proszę użyć is_front_page(). is_home() zwróci tutaj true tylko na stronie bloga (jeśli została ona osobno ustawiona).

Jeśli mają Państwo wątpliwości, proszę stosować is_front_page(). Jest to bardziej niezawodne: działa na stronie głównej przy każdym ustawieniu.

Krok 2. Proszę podłączyć skrypt tylko dla strony głównej

Kod umieszcza się w pliku functions.php motywu potomnego. Jeśli nie mają Państwo motywu potomnego, proszę użyć wtyczki Code Snippets (krok 5): edycja functions.php motywu nadrzędnego zostanie nadpisana przy najbliższej aktualizacji.

Poniższy przykład podłącza plik JavaScript w stopce tylko wtedy, gdy odwiedzający jest na stronie głównej:

1
/**
2
 * Подключает кастомный скрипт только на главной странице.
3
 * Место запуска: functions.php дочерней темы или 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',                         // хендл — уникальное имя
12
        get_template_directory_uri() . '/js/frontpage.js', // путь к файлу
13
        array(),                                       // зависимости (jquery, etc.)
14
        '1.0.0',                                       // версия для сброса кеша
15
        true                                           // true = в футер, false = в head
16
    );
17
});

Co tu się dzieje. Hak wp_enqueue_scripts, właściwe miejsce do rejestracji skryptów na froncie (nie init, nie wp_head). is_front_page() sprawdza, czy jesteśmy dokładnie na stronie głównej. Funkcja wp_enqueue_script ustawia plik w kolejce, WordPress sam doda <script> w stopce, przed zamykającym </body>.

Proszę zwrócić uwagę: get_template_directory_uri() zwraca URL folderu motywu nadrzędnego. Jeśli plik znajduje się w motywie potomnym, proszę zamienić na get_stylesheet_directory_uri().

Krok 3. Proszę podłączyć style według tej samej zasady

Dla pliku CSS logika jest taka sama: znacznik warunkowy + wp_enqueue_style. Kod dodaje się do tej samej funkcji co skrypty, osobny hak nie jest potrzebny.

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
}

Piąty parametr w wp_enqueue_style, typ mediów. Domyślnie 'all'. Jeśli style są tylko dla ekranów szerszych niż 768px, proszę podać 'screen and (min-width: 768px)'.

Proszę połączyć skrypty i style w jednej funkcji. W ten sposób nie tworzą Państwo zbędnych sprawdzeń:

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

Wczesne return na początku funkcji, czystsze rozwiązanie niż zagnieżdżone if. Kodu jest więcej, ale czyta się go szybciej.

Krok 4. Przypadek szczególny: strona główna i strona bloga

Jeśli w Ustawienia → Czytanie wybrano „Twoje najnowsze wpisy", is_front_page() i is_home() działają tak samo. Jeśli jednak strona główna jest stroną statyczną, a blog został przeniesiony na /blog/, potrzebne jest podwójne sprawdzenie.

Aby podłączyć skrypt TYLKO na stronie bloga (nie na statycznej stronie głównej), proszę użyć is_home():

1
if (is_home()) {
2
    // Код сработает только на странице вывода записей
3
}

Aby podłączyć ZARÓWNO na stronie głównej, JAK I na stronie bloga, proszę połączyć:

1
if (is_front_page() || is_home()) {
2
    // Код сработает на обеих «главных» страницах
3
}

Pełną listę znaczników warunkowych znajdą Państwo w oficjalnej dokumentacji WordPress. Znajdą tam Państwo również is_page (strona wg bezpośredniego odnośnika), is_single (pojedynczy wpis), is_category (kategoria) i kilkanaście innych sprawdzeń do precyzyjnego zarządzania ładowaniem.

Krok 5. Bez edycji functions.php: wtyczka Code Snippets

Jeśli nie chcą Państwo dotykać plików motywu, proszę zainstalować bezpłatną wtyczkę Code Snippets z katalogu WordPress.org. Dodaje ona sekcję Snippets → Add New w panelu administracyjnym: wklejają Państwo kod, wybierają uruchamianie „na froncie" i zapisują. Efekt jest taki sam jak przy functions.php, ale kod przetrwa zmianę motywu.

Zaleta Code Snippets: jeśli popełnią Państwo błąd składni, wtyczka przechwytuje błąd krytyczny i pozwala cofnąć zmiany. Podczas edycji functions.php przez panel administracyjny jeden brakujący nawias całkowicie zawiesza witrynę. Przed każdą edycją plików motywu proszę wykonać pełną kopię zapasową.

Weryfikacja rezultatu

Proszę otworzyć witrynę, nacisnąć F12 → zakładka Network, odświeżyć stronę. Na liście żądań proszę znaleźć swój skrypt (frontpage.js lub jak go Państwo nazwali). Następnie proszę przejść na dowolną podstronę i odświeżyć, skryptu nie powinno być na liście.

Jeśli skrypt nadal ładuje się wszędzie, proszę sprawdzić:

• Czy hak to na pewno wp_enqueue_scripts, a nie init? init uruchamia się przed określeniem kontekstu strony, znaczniki warunkowe mogą wtedy nie działać poprawnie.
• Czy plik to functions.php motywu potomnego? Motyw nadrzędny mógł nadpisać hak.
• Czy to cache wtyczki optymalizacyjnej? Proszę go wyczyścić.

⁉️🤔 Często zadawane pytania

Czym is_front_page() różni się od is_home()?

is_front_page() zwraca true na stronie głównej witryny przy KAŻDYM ustawieniu, zarówno gdy jest tam lista wpisów, jak i strona statyczna. is_home() zwraca true tylko na stronie wyświetlającej wpisy z bloga. Jeśli w Ustawienia → Czytanie ustawiono „Twoje najnowsze wpisy", oba znaczniki zwracają true. Jeśli strona główna jest stroną statyczną, is_home() zadziała tylko na /blog/ (jeśli został on przypisany).

Dlaczego mój kod w functions.php nie działa?

Trzy najczęstsze przyczyny. Pierwsza: hak init zamiast wp_enqueue_scripts, na init znaczniki warunkowe nie są jeszcze zdefiniowane. Druga: functions.php motywu nadrzędnego został nadpisany przez aktualizację, proszę zawsze używać motywu potomnego lub Code Snippets. Trzecia: ścieżka do pliku jest nieprawidłowa. get_template_directory_uri() prowadzi do folderu motywu nadrzędnego, a get_stylesheet_directory_uri() do folderu motywu potomnego. Proszę to sprawdzić za pomocą echo i otworzyć URL w przeglądarce.

Czy można podłączyć skrypt na kilku konkretnych stronach?

Tak. Proszę zamienić is_front_page() na is_page(array('about', 'contact')), skrypt podłączy się na stronach z bezpośrednimi odnośnikami about i contact. Lub proszę użyć is_single('post-slug') dla konkretnego wpisu. Pełna lista znaczników warunkowych znajduje się na developer.wordpress.org.

Jaka jest różnica między get_template_directory_uri() a get_stylesheet_directory_uri()?

Pierwsza zwraca URL folderu motywu nadrzędnego, druga motywu potomnego. Jeśli edytują Państwo motyw potomny i plik się w nim znajduje, proszę użyć get_stylesheet_directory_uri(). Jeśli plik jest w motywie nadrzędnym (lub jest tylko jeden motyw, bez potomnego), proszę użyć get_template_directory_uri(). Błąd w ścieżce to przyczyna numer 1, dla której skrypt się nie ładuje.

Czy warto używać $_SERVER['REQUEST_URI'] do sprawdzania?

Nie warto. $_SERVER['REQUEST_URI'] psuje się przy parametrach zapytania: /?utm_source=twitter nie jest już równe /. Ponadto na niektórych hostingach REQUEST_URI zawiera pełną ścieżkę z podfolderem. Znaczniki warunkowe WordPress są bardziej niezawodne i działają od razu.

Podsumowanie: trzy linijki, które zmieniają szybkość ładowania

W praktyce większości witryn wystarczy jedno is_front_page() i kilka wywołań wp_enqueue_script/wp_enqueue_style.

Warunkowe ładowanie skryptów to nie mikrooptymalizacja. Jedna „ciężka" wtyczka z sliderem ważąca 300 KB, podłączona na całej witrynie dla animacji na stronie głównej, dodaje pół sekundy do ładowania każdej podstrony. Proszę pomnożyć to przez liczbę odwiedzających, a otrzymają Państwo utracone pozycje w wynikach wyszukiwania.

Zasada jest prosta: plik ładuje się tam, gdzie jest używany. Dla strony głównej is_front_page(). Dla bloga is_home(). Dla konkretnej strony is_page('slug').

• Jeśli mają Państwo statyczną stronę główną, proszę użyć is_front_page() i nie komplikować.
• Jeśli strona główna = lista wpisów, odpowiedni będzie dowolny z tych dwóch znaczników.
• Jeśli skrypty i style powtarzają się na kilku stronach, proszę wynieść warunki do tablicy i sprawdzać przez in_array().

Proszę zacząć od audytu: otworzyć DevTools → Coverage (trzy kropki w Network → More tools → Coverage), odświeżyć stronę i sprawdzić, ile kilobajtów JS i CSS nie jest używanych. Ta liczba Państwa zaskoczy. A jaką technikę warunkowego ładowania stosują Państwo u siebie, proszę napisać w komentarzach.