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

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

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

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

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

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

wp_enqueue_script('имяскрипта', get_template_directory_uri() . '/js/ФайлСкрипта.js');

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

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

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

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

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

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

wp_enqueue_script('имяскрипта', get_template_directory_uri() . '/js/ФайлСкрипта.js', array(), false, true);

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

<?php function myJS(){
$str='<script type="text/javascript" src="вашдомен.ру/js/вашскрипт.js"></script>';
return $str;
}
add_shortcode( 'myJS', 'myJS');?>

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

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

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

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

wp_enqueue_style('имяфайластилей', get_template_directory_uri() . '/css/Файлстилей.css');

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

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

* Нажимая на кнопку "Отправить" Вы соглашаетесь с политикой конфиденциальности.