Как подключить свои javascript или css в WordPress?

javascript css wordpressНаверняка все знают, что шаблон для WordPress состоит из нескольких файлов. Header.php содержит инструкции по выводу заголовка страницы, footer.php отвечает за «подвал», index.php — за организацию вывода данных, page.php и single.php — за вывод содержимого страниц и записей соответственно, functions.php — за подготовку данных для вывода. Такая система позволяет легко менять вид сайта, слегка изменив один из этих (или других, которые используются в шаблоне) файлов. Однако, не всем известно, что не всегда прямое редактирование даёт положительный результат. Иногда оно даже вредно. Например, если для нашего шаблона нам необходимо подключить свой javascript или свою таблицу стилей. Можно напрямую вписать в header.php между <head> и </head>:

<script src="/js/my_scripts.js" type="text/javascript"></script>

Однако, такая запись означает, что папка js, в которой лежат наши скрипты, будет находиться не в папке шаблона, что было бы удобно. Можно сделать по-другому:

<script src="<?php echo get_template_directory_uri(); ?>/js/my_scripts.js" type="text/javascript"></script>

В этом случае папка js будет находиться в папке с шаблоном. Однако, это тоже не совсем правильный вариант. Дело в том, что перед </head> вы наверняка заметили вызов функции wp_head (). Получится, что автоматически добавляемые скрипты (такие, как jquery, например) будут добавлены (и загружены браузером) после наших скриптов, а это не всегда хорошо.

Так как правильно подключить свои javascript или css в WordPress?

Для этих целей существует файл functions.php и функции add_actionwp_enqueue_script и wp_enqueue_style. Add_action позволяет подвесить на событие wordpress'а свою функцию. Что нам в данном случае и требуется. Итак, открываем файл functions.php и вставляем туда следующее:

function register_my_js() {
    wp_enqueue_script( 'my_scripts', get_template_directory_uri().'/js/my_scripts.js', array( 'jquery' ), '1.0' );
}
add_action('wp_enqueue_scripts', 'register_my_js');

Некоторые советуют перехватывать событие 'main', а не 'wp_enqueue_scripts', но Справочник по функциям WordPress советует писать именно так. Теперь о параметрах функции wp_enqueue_scripts. Первый параметр — это просто название скрипта, второй параметр — URL нашего скрипта относительно корня сайта, в третьем параметре в массиве через запятую перечисляются скрипты, от которых наз скрипт зависит; в примере — это jquery. Если нет зависимостей, то надо указать false. Четвёртый параметр обозначает версию нашего скрипта. Последний параметр (не указан в примере) по умолчанию имеет значение false. Если установить его в  true, то скрипты будут вставлены перед закрывающим тегом </body>. Есть ещё один момент. Файл functions.php срабатывает не только в пользовательской части, но и в админке, что в большинстве случаев излишне. Чтобы избежать этого, немного изменим код нашей вставки:

if ( !is_admin() ) {
function register_my_js() {
    wp_enqueue_script( 'my_scripts', get_template_directory_uri().'/js/my_scripts.js', array( 'jquery' ), '1.0' );
}
add_action('wp_enqueue_scripts', 'register_my_js');
}

Теперь функция не будет срабатывать в админке. Таким же образом работает подключение css, только используется функция wp_enqueue_style:

if ( !is_admin() ) {
function register_my_css() {
    wp_enqueue_style( 'my_style', get_template_directory_uri().'/css/my_style.css', false, '1.0' );
}
add_action('wp_enqueue_scripts', 'register_my_css');
}

Таким образом можно подключить любое количество javascript и css в свой шаблон WordPress.