Подключить js или css в движок Вордпресс — нелегкая задача для новичков. Но мы пошагово разберемся, как это сделать для всего сайта или для какой-то конкретной страницы.
В Вордпресс не принято добавлять скрипты и файлы стилей в стандартные места — header или footer, независимо от того, используется ли готовая тема или создается собственная. Здесь предусмотрен стандартный метод инклюда, который нивелирует возможные проблемы совместимости скриптов и обеспечивает корректную работу сайта.
Метод заключается в том, чтобы все необходимое добавлялось в файл темы functions.php. Для скриптов используется функция wp_enqueue_script(), а для стилей — wp_enqueue_style(). Задача функций сводится к тому, чтобы цеплять только те вещи, которые еще не используются темой.
Как подключить js
Первым шагом необходимо зарегистрировать в системе новый скрипт. Для этого применяется следующий код в functions.php:
1 |
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 в футере.
В итоге получится следующий код:
1 |
wp_enqueue_script('имяскрипта', get_template_directory_uri() . '/js/ФайлСкрипта.js', array(), false, true); |
Чтобы добавить скрипт к определенной странице или посту, проще всего указать в файле functions.php короткий код, который сможет вызывать необходимые функции одной строкой.
1 2 3 4 5 |
<?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().
Таким образом, чтобы подключить стили, берем этот код, меняя выделенные части на свои:
1 |
wp_enqueue_style('имяфайластилей', get_template_directory_uri() . '/css/Файлстилей.css'); |
Способ поможет привязать к теме wp любой кастомный файл стилей.