
🛠 Как подключить скрипт и стили только для главной страницы WordPress
Подключили тяжёлый слайдер на весь сайт ради одной анимации на главной? Десяток ненужных килобайт грузится на каждой странице, внутренней записи, контактах, карте сайта. Посетители ждут, 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 не используется. Цифра вас удивит. А какой приём условной загрузки используете вы, напишите в комментариях.



