Как правильно подключать CSS стили и JS скрипты в тему WordPress

Как правильно подключать css стили и js скрипты в тему WordPress

Эта короткая заметка, которая будет полезна тем кто начинает создавать темы на WordPress. Или возможно вы занимаетесь этим уже некоторое время, и делаете это не на 100% эффективно. Сегодня мы рассмотрим как правильно и корректно подключить CSS стили и JS скрипты к своей теме.

Самый простой способ подключения, это открыть файл header.php и с помощью обычной директивы <link> подключить свои CSS стили. Примерно также можно поступить и с JS скриптами, подключив их тегом  <script> в шапке или футере сайта — header.php или footer.php. Выглядеть это будет вот так.

Подключаем стили:

<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 вашей темы. Рассмотрим в качестве примера, то как это организовано в официальной теме twentytwelve для WordPress.

Финальный код подключения стилей и скриптов будет в конце статьи. А пока разберем все по частям.

// Описываем функцию в которй будем подключать CSS и JS
function twentytwelve_scripts_styles(){
    global $wp_styles;
    //... код подключения стилей
}

// Добавляем action для запуска этой функции
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles', 1 );

Выглядит это следующим образом, есть функция twentytwelve_scripts_styles , ее название может быть любой. Внутри которой мы будем подключать CSS стили и JS скрипты. После ого как эта функция объявлена, мы вызываем ее через add_action

Аналогичная конструкция скорее всего уже присутствует в вашем шаблоне, если вы взяли за основу готовую WordPress тему.

Теперь нам остается только подключить наши CSS и JS, в данном случае внутри функции twentytwelve_scripts_styles(){ ... }

Рассмотрим пример подключения стилей.

Подключаем CSS стили в теме WordPress

Сначала необходимый CSS файл регистрируем, и затем подключаем его. Выглядит это вот так:

// Регистрирую стили
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_register_style(); в которую передаются 4-ре параметра:

  1. Имя стиля, которое в дальнейшем будем использовать при подключении данного стиля. Имя придумываем самостоятельно.
  2. Путь к CSS файлу. В примере выше он содержит переменную для определения пути каталога с темой.
  3. Массив с перечислением зависимостей. Например мы подключаем reset.css для сброса стилей, и все остальные CSS файлы должны быть подключены после него. Соответственно при подключения файла style.css мы поставим ему зависимость от файла у него будет зависимость от файла reset.min.css которому мы дали имя my_reset и поэтому параметр с зависимостями будет выглядеть вот так array('my_reset')
  4. Четвертый параметр — версия файла. Параметр необязательный.
  5. Пятый — тип устройства для которого должен быть применен данный стиль. В нашем случае это 'screen'

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

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

Подключаем JS скрипты в теме WordPress

Аналогично стилям, JS скрипты сначала регистрируются, и затем подключаются.

// Регистируем файл с 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');

Либо их можно сразу подключить, записав все необходимые параметры в wp_enqueue_script(); функцию.

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

Готовый пример подключения CSS и JS файлов в файле function.php в теме WordPress

Привожу итоговый рабочий пример подключения CSS и JS файлов в шаблоне WordPress в файле 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 );

 

Как я уже писал выше, плюс такого подключения в том, что теперь CSS и JS файлы будут корректно определятся и обрабатываться плагинами в WordPress. Например плагином для кэширования и минификации стилей и скриптов.

Подключив скрипты образом как указано выше и установив плагин WP Rocket я получил ощутимый прирост в скорости работы сайта. Чего не было ранее, когда стили и скрипты подключались в HTML коде.

  • для чего нужно указывать глобальную $wp_styles? :)

    • Точно, она тут не нужна. Спасибо что заметили! 😉

  • Здравствуйте.

    Меня интересует размещение банера и обзоров на вашем сайте (блоге).

    Напишите мне информацию о том, где и сколько это будет стоить, и как мне с вами связываться.

    Если можно, то в таком виде :

    Ваш Сайт /обратная связь/ стоимость рекламы/ посещаемость(траффик).

    Если у вас есть еще блоги и форумы тематики вебмастеров, то так же расмотрю ваши предложения.

    Мой емейл : snebavpala@ukr.net

    Спасибо за внимание. Успехов в делах.

    Антина.

  • кирилл

    я не как не могу подключить стили и скрипты, меню и sidebar подключил без проблем, подскажите может надо прописать что-нибудь в index

    • В индекс должен быть подключен header и footer. Остальное как в инструкции выше.