Подключение js и css файлов в WordPress

Подключить js или css в движок Вордпресс — нелегкая задача для новичков. Но мы пошагово разберемся, как это сделать для всего сайта или для какой-то конкретной страницы.

В Вордпресс не принято добавлять скрипты и файлы стилей в стандартные места — header или footer, независимо от того, используется ли готовая тема или создается собственная. Здесь предусмотрен стандартный метод инклюда, который нивелирует возможные проблемы совместимости скриптов и обеспечивает корректную работу сайта.

Метод заключается в том, чтобы все необходимое добавлялось в файл темы functions.php. Для скриптов используется функция wp_enqueue_script(), а для стилей — wp_enqueue_style(). Задача функций сводится к тому, чтобы цеплять только те вещи, которые еще не используются темой.

Как подключить js

Первым шагом необходимо зарегистрировать в системе новый скрипт. Для этого применяется следующий код в functions.php:

В этом коде функция wp_enqueue_script инициализирует ваш скрипт всего по двум параметрам — имени и адресу, которые заключены внутри скобок. Чтобы воспользоваться кодом просто замените слова “имяскрипта” и “ФайлСкрипта” на свои:

  • ‘имяскрипта’название скрипта, который нужно включить в тему WordPress. Пишется строго маленькими буквами. Соответствует системной переменной $handle.
  • ‘файлскрипта’ — прописывается через запятую после имени скрипта. Указывает системе, где конкретно она должна искать скрипт. Соответствует системной переменной $src. Часть адреса get_template_directory_uri() — это всего лишь системный путь к папке вашей темы, достаточно залить в папку /js/ свой файлик с расширением .js.

По умолчанию конструкция пропишется в <head> темы.

Чтобы подключение прописалось в футере, нужно добавить в скобках после url дополнительные параметры — array(), false, true:

  • array() — это массив, который обработает все зависимости вашего скрипта.
  • false — говорит системе, что номер версии не нужен.
  • true — разрешает загрузку вашего javascript в футере.

В итоге получится следующий код:

Чтобы добавить скрипт к определенной странице или посту, проще всего указать в файле functions.php короткий код, который сможет вызывать необходимые функции одной строкой.

Здесь myJS — название созданной вами функции. После сохранения можно вызывать скрипт на конкретных страницах просто добавив в нужное место шорткод — [myJS].

Как подключить CSS

Подключение css происходит по аналогии с js, только используется соответствующая функция — wp_enqueue_style().

Таким образом, чтобы подключить стили, берем этот код, меняя выделенные части на свои:

Способ поможет привязать к теме wp любой кастомный файл стилей.

Добавьте комментарий