Есть пара способов подключения скриптов и стилей к нашему шаблону.
Давайте на примере рассмотрим их.

Первый (не правильный, но рабочий)

Код:

<link href="<?= bloginfo('template_directory'); ?>/css/style.css?v=1.5" rel="stylesheet" type="text/css" />
<link href="<?= bloginfo('template_directory'); ?>/css/addon.css?v=1.1" rel="stylesheet" type="text/css" />
<link href="<?= bloginfo('template_directory'); ?>/libs/owl-carousel/owl.carousel.css" rel="stylesheet">

Код:

<script src="<?= bloginfo('template_directory'); ?>/libs/owl-carousel/owl.carousel.min.js"></script>
<script src="<?= bloginfo('template_directory'); ?>/libs/reveal/jquery.reveal.js" type="text/javascript"></script>
<script src="<?= bloginfo('template_directory'); ?>/js/common.js"></script>

Способ рабочий, но могут возникнуть проблемы с плагинами кэширования — они не будут корректно видеть css и js файлы темы, которые необходимо минифицировать, объединить в один и закэшировать.

Верный способ подключения css стилей и js скриптов в тему WordPress

Правильнее подключать специальными PHP функциями, внутри файла functions.php вашей темы.

Код:

// Заносим CSS стили и JS скрипты в функцию twentytwelve_scripts_styles
function twentytwelve_scripts_styles(){

    // Регистрирую стили
    wp_register_style( 'my_reset', get_template_directory_uri() . '/css/reset.min.css', array(), '1.2', 'screen');
    wp_register_style( 'my_style', get_template_directory_uri() . '/css/style.css', array('my_reset'), '1.47', 'screen');

    // Подключаю стили
    wp_enqueue_style( 'my_reset');
    wp_enqueue_style( 'my_style');

    // Подключать стили можно и сразу, без регистрации. Тогда необходимо прописать все параметры внутри wp_enqueue_style();
    // Пример подключение стандартного обязательного файла стилей style.css
    wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );

    // Регистируем файл с JS скриптом
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', array(), '1.0', false);
    
    // Подключаем файл с JS скриптом
    wp_enqueue_script( 'jquery');

    // Подключаем файл с JS скриптом сразу без регистрации
    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}

// Создаем экшн в котором подключаем скрипты подключенные внутри функции twentytwelve_scripts_styles
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles', 1 );

Регистрация происходит функцией wp_register_style(); и wp_register_script(); в которые передаются 5 параметров:

  • Имя стиля или скрипта, которое в дальнейшем будем использовать при подключении данного стиля. Имя придумываем самостоятельно.
  • Путь к CSS или JS файлу. В примере выше он содержит переменную для определения пути каталога с темой.
  • Массив с перечислением зависимостей. Например мы подключаем reset.css для сброса стилей, и все остальные CSS файлы должны быть подключены после него. Соответственно при подключения файла style.css мы поставим ему зависимость от файла у него будет зависимость от файла reset.min.css которому мы дали имя my_reset и поэтому параметр с зависимостями будет выглядеть вот так array(‘my_reset’)
  • Четвертый параметр — версия файла. Параметр необязательный.
  • Пятый — тип устройства для которого должен быть применен данный стиль. В нашем случае со скриптами это размещение в футере (true) или хеадере (false).

После регистрации подключаем зарегистрированные файлы стилей функцией wp_enqueue_style( ‘style_name’); и wp_register_script(‘script_name’); в которые передаем один параметр — имя зарегистрированного стиля и скрипта.

Можно делать подключение файла сразу через функцию wp_enqueue_style(); передав в нее те же параметры которые мы передаем в функцию wp_register_style(); при регистрации стилей, и со скриптами аналогично.

Добавление скрипта только для главной страницы сайта

Добавляем в нашу функцию (в которой регистрируем скрипты) следующий код.

Код:

if ($_SERVER[REQUEST_URI]=='/'){
        wp_register_script('slider', get_template_directory_uri() . '/js/slider.js', array(), '1.0', true);
        wp_enqueue_script('slider');
 }