Skip to content

Всё для WordPress, веб-разработки — и не только

🛠 Как подключить скрипт и стили только для главной страницы WordPress

🛠 Как подключить скрипт и стили только для главной страницы 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 */
5add_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. Код добавляется в ту же функцию, что и скрипты, отдельный хук не нужен.

1if (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)'.

Объедините скрипты и стили в одной функции. Так вы не плодите лишних проверок:

1add_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():

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

Чтобы подключить И на главную, И на страницу блога, комбинируйте:

1if (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 не используется. Цифра вас удивит. А какой приём условной загрузки используете вы, напишите в комментариях.