Підключили важкий слайдер на весь сайт заради однієї анімації на головній? Десяток зайвих кілобайт вантажиться на кожній сторінці, внутрішньому записі, контактах, карті сайту. Відвідувачі чекають, Google знижує бали за Core Web Vitals.

Проблема не в плагінах чи темі. Проблема в тому, що WordPress за замовчуванням не розрізняє сторінки під час реєстрації скриптів. Один рядок wp_enqueue_script у functions.php, і файл підключається всюди: і на головній, і в адмінці, і на сторінці входу.

Нижче, три робочі способи підключити скрипти та стилі суто для головної. Без плагінів-оптимізаторів. Тільки PHP, тільки умовні теги WordPress.

💡 Швидкий огляд:

• Визначте тип головної сторінки: статична чи стрічка записів, від цього залежить умовний тег
• Використовуйте is_front_page() для статичної головної та is_home() для сторінки блогу
• Розмістіть код у functions.php дочірньої теми або через плагін Code Snippets
• Перевірте через DevTools → Network, що скрипти не вантажаться на внутрішніх сторінках

Крок 1. Визначте, яка у вас головна сторінка

WordPress розрізняє два поняття: Front Page, те, що бачить відвідувач за кореневою URL сайту, і Posts Page, сторінка виведення записів блогу. Вони можуть збігатися (головна = стрічка дописів) або різнитися (головна = статична сторінка, а блог, за окремою адресою).

Відкрийте адмінку: Settings → Reading. У блоці «На головній сторінці відображати»:

• «Ваші останні записи», головна і блог збігаються. У коді використовуйте is_home() або is_front_page(), обидва повернуть true.
• «Статичну сторінку» з вибраною сторінкою для головної, використовуйте is_front_page(). is_home() тут поверне true тільки на сторінці блогу (якщо її задано окремо).

Якщо сумніваєтеся, ставте is_front_page(). Він надійніший: спрацьовує на головній за будь-якого налаштування.

Крок 2. Підключіть скрипт тільки для головної

Код розміщується у файлі functions.php дочірньої теми. Якщо дочірньої теми немає, використовуйте плагін Code Snippets (крок 5): правка functions.php батьківської теми скинеться під час найближчого оновлення.

Приклад нижче підключає JavaScript-файл у футер, тільки коли відвідувач на головній сторінці:

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

Що тут відбувається. Хук wp_enqueue_scripts, правильне місце для реєстрації скриптів на фронті (не init, не wp_head). is_front_page() перевіряє, що ми саме на головній. Функція wp_enqueue_script ставить файл у чергу, WordPress сам додасть <script> у футер, перед закривальним </body>.

Зверніть увагу: get_template_directory_uri() повертає URL папки батьківської теми. Якщо файл лежить у дочірній, замініть на get_stylesheet_directory_uri().

Крок 3. Підключіть стилі за тим самим принципом

Для CSS-файлу логіка та сама: умовний тег + wp_enqueue_style. Код додається в ту саму функцію, що й скрипти, окремий хук не потрібен.

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, медіатип. За замовчуванням 'all'. Якщо стилі тільки для екранів, ширших за 768px, вкажіть 'screen and (min-width: 768px)'.

Об’єднайте скрипти та стилі в одній функції. Так ви не плодите зайвих перевірок:

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

Ранній return на початку функції, чистіше, ніж вкладені if. Коду більше, але читається швидше.

Крок 4. Особливий випадок: головна та сторінка блогу

Якщо в Settings → Reading вибрано «Ваші останні записи», is_front_page() і is_home() працюють однаково. Але якщо головна, статична сторінка, а блог винесено на /blog/, потрібна подвійна перевірка.

Щоб підключити скрипт ТІЛЬКИ на сторінку блогу (не на статичну головну), використовуйте is_home():

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

Щоб підключити І на головну, І на сторінку блогу, комбінуйте:

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

Повний список умовних тегів дивіться в офіційній документації WordPress. Там само знайдете is_page (сторінка за ярликом), is_single (окремий запис), is_category (рубрика) і десяток інших перевірок для точкового керування завантаженням.

Крок 5. Без правки functions.php: плагін Code Snippets

Не хочете чіпати файли теми, поставте безплатний плагін Code Snippets з каталогу WordPress.org. Він додає розділ Snippets → Add New в адмінку: вставляєте код, вибираєте запуск «на фронті» та зберігаєте. Ефект той самий, що й від functions.php, але код переживе зміну теми.

Плюс Code Snippets: якщо помилилися в синтаксисі, плагін перехоплює фатальну помилку й дає відкотити зміни. Під час правки functions.php через адмінку одна пропущена дужка вішає сайт повністю. Перед будь-якою правкою файлів теми робіть повний бекап.

Перевірка результату

Відкрийте сайт, натисніть F12 → вкладка Network, оновіть сторінку. У списку запитів знайдіть ваш скрипт (frontpage.js або як ви його назвали). Тепер перейдіть на будь-яку внутрішню сторінку й оновіть, скрипта в списку бути не повинно.

Якщо скрипт усе ще вантажиться всюди, перевірте:

• Хук точно wp_enqueue_scripts, а не init? init спрацьовує до визначення контексту сторінки, умовні теги можуть брехати.
• Файл functions.php дочірньої теми? Батьківська тема могла перевизначити хук.
• Кеш плагіна оптимізації? Скиньте.

⁉️🤔 Часті запитання

Чим is_front_page() відрізняється від is_home()?

is_front_page() повертає true на головній сторінці сайту за БУДЬ-ЯКОГО налаштування, і коли там стрічка записів, і коли статична сторінка. is_home(), true тільки на сторінці виведення записів блогу. Якщо в Settings → Reading стоїть «Ваші останні записи», обидва теги повертають true. Якщо головна, статична сторінка, is_home() спрацює тільки на /blog/ (якщо його призначено).

Чому мій код у functions.php не працює?

Три найчастіші причини. Перша: хук init замість wp_enqueue_scripts, на init умовні теги ще не визначені. Друга: functions.php батьківської теми перезаписано оновленням, завжди використовуйте дочірню тему або Code Snippets. Третя: шлях до файлу неправильний. get_template_directory_uri() веде в папку батьківської теми, а get_stylesheet_directory_uri(), у папку дочірньої. Перевірте через echo і відкрийте URL у браузері.

Чи можна підключити скрипт на кілька конкретних сторінок?

Так. Замініть is_front_page() на is_page(array('about', 'contact')), скрипт підключиться на сторінках із ярликами about і contact. Або використовуйте is_single('post-slug') для конкретного запису. Повний список умовних тегів, на developer.wordpress.org.

У чому різниця між get_template_directory_uri() і get_stylesheet_directory_uri()?

Перша повертає URL папки батьківської теми, друга, дочірньої. Якщо ви правите дочірню тему і файл лежить у ній, беріть get_stylesheet_directory_uri(). Якщо файл у батьківській темі (або тема одна, без дочірньої), get_template_directory_uri(). Помилка зі шляхом, причина №1, чому скрипт не вантажиться.

Чи варто використовувати $_SERVER['REQUEST_URI'] для перевірки?

Не варто. $_SERVER['REQUEST_URI'] ламається об query-параметри: /?utm_source=twitter уже не дорівнює /. До того ж на деяких хостингах REQUEST_URI містить повний шлях із підпапкою. Умовні теги WordPress надійніші й працюють із коробки.

Підсумки: три рядки, які змінюють швидкість завантаження

На практиці більшості сайтів вистачає одного is_front_page() і пари викликів wp_enqueue_script/wp_enqueue_style.

Умовне завантаження скриптів, не мікрооптимізація. Один «важкий» плагін зі слайдером на 300 КБ, підключений на весь сайт заради анімації на головній, додає пів секунди до завантаження кожної внутрішньої сторінки. Помножте на кількість відвідувачів, отримаєте втрачені позиції у видачі.

Правило просте: файл вантажиться там, де використовується. Для головної, is_front_page(). Для блогу, is_home(). Для конкретної сторінки, is_page('slug').

• Якщо у вас статична головна, беріть is_front_page() і не ускладнюйте.
• Якщо головна = стрічка записів, підійде будь-який із двох тегів.
• Якщо скрипти та стилі повторюються на кількох сторінках, винесіть умови в масив і перевіряйте через in_array().

Почніть з аудиту: відкрийте DevTools → Coverage (три крапки в Network → More tools → Coverage), оновіть сторінку й подивіться, скільки кілобайт JS і CSS не використовується. Цифра вас здивує. А який прийом умовного завантаження використовуєте ви, напишіть у коментарях.