Правильное подключение JS и CSS в WordPress

Йоу-йоу! Те кто уже читали мой блог знают, что я SEO-оптимизатор, следовательно, я постоянно пользуюсь системами аналитики, например, «Яндекс Метрика». В этих системах хочется видеть действительную картину (точные данные), но этого не всегда получается достичь на начальных этапах, т.к. большинство заходов — это как правило владельцы сайта или вебмастера. Иногда их «любовь» к своему сайту достигает космических масштабов и в «метрике» куча посещений, которых на самом деле нет.

Чтобы видеть правильную статистику сайта, исключая таких пользователей, нужно правильно подключать скрипты. Правильное подключение скриптов нужно не только для систем статистики, но и для плагинов или просто подключение только нужных css и js файлов на странице. 

Одна из частых задач в плагинах — это подключить css или js -файл, только если на странице задействован шорткод.  Итак, как же всё-таки правильно подключать скрипт в wordpress?!

Начало

Для разработчиков сайтов на wordpress нет никакого секрета, что в этом CMS существует событие (речь не про функцию) wp_enqueue_scripts, которое осуществляет подключение ваших css и js. Правильным решением для подключения стилей и javascript’ов своей темы, будет создать функцию и добавить её к событию. Такой подход реализован во множестве тем и (для тех кто шарит) в underscores.me. Итак, как это выглядит. 

* в файле functions.php
*/
function your_preffix_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'your_preffix_scripts' );

Такой код подключит на ваш сайт файл style.css из корня вашей темы. Тут важно упомянуть функции wp_enqueue_style и wp_enqueue_style. С их помощью вы и подключаете свои скрипты. Если вы не знаете как они работают, то настоятельно рекомендую прочитать про них. 

Подключение для скриптов аналитики

Тут я говорю в контексте подключения Analitycs от Google , Метрика.Яндекс, ROIstat и т.д. Поместите свои скрипты в файл в папку js в папку с темой (допустим metrika.js). Далее, чтобы определить что вошёл на сайт человек зарегистрированный, например администратор, нужно использовать функцию is_user_logged_in(). Она возвращает true если пользователь вошел под паролем на сайт. Нам нужно обратное значение, надо использовать отрицание. Ваш код для подключения скрипта примет следующий вид: 

* в файле functions.php
*/
function your_preffix_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );

    // Metrika Yandex and others
    if( !is_user_logged_in() ){
        wp_enqueue_script('yandex-metrika', get_template_directory_uri() . '/js/metrika.js', array(), null, false);
    }
}
add_action( 'wp_enqueue_scripts', 'your_preffix_scripts' );

Таким образом, вы исключите из метрики авторизированных пользователей. Если вам нужны авторизированные пользователи, но не нужны администраторы. то можете is_user_logged_in() заменить на is_admin(). Если вам нужны более точные настройки по типам пользователей, то вы, например, можете проверить права на действия.

Подключение скриптов для плагинов

Плагины — это очень сложна штука. Надо понимать, что нужно на данной странице пользователю в этот момент, а что нет. На своём сайте в плагине для определения вхождений ключей в текст я подключаю стили и js дважды. В первый раз при загрузке страницы (загружается плагин по шорткоду) и во второй раз в момент отображения ответа по ajax. Как же достичь такого же в своём плагине.

Допустим, у нас есть задача по шорткоду вывести текст и подключить текст для него. В нашем файле мы пишем следующее:

/**
* В файле плагине
*/
// Регистрируем стиль
function your_preffix_reg_script() {
    wp_register_style( 'my_style', 'https://example.ru/style.css');
}
add_action( 'wp_enqueue_scripts', 'your_preffix_reg_script' );

// Регистрируем шорткод
add_shortcode('shortcode_name', 'shortcode_func');
function shortcode_func(){
    // Print string
    do_action('your_preffix_desc');
    // Include script
    wp_enqueue_script( 'your_preffix_reg_script' );
}
add_action('your_preffix_desc', 'your_preffix_desc_func');
function your_preffix_desc_func(){
    echo 'some string';  
}

Таким образом, мы зарегистрировали свой стиль и вызвали его в функцию, которая выполняется на странице с шорткодом. Теперь, если вызвать шорткод shortcode_name, то мы увидим строку ‘some string’ и подключенный наш стиль. То же самое касается и javascript-файлов.

Подключение на определённых страница

На самом деле это очень обширная тема, она явно не для одной статьи. Я вам покажу всего пару приёмов. 

Подключение только на главной странице

Продолжу наш файл

/**
* в файле functions.php
*/
function your_preffix_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );

    // Metrika Yandex and others
    if( !is_user_logged_in() ){
        wp_enqueue_script('yandex-metrika', get_template_directory_uri() . '/js/metrika.js', array(), null, false);
    }

   // Подключить только на главной если на ней выводятся последние новости
   if ( is_front_page() && is_home() ){
      wp_enqueue_script('some_script', get_template_directory_uri() . '/js/some_script.js', array(), null, false);
   }
   // Подключить только на главной если на ней не выводятся последние новости
   if ( !is_front_page() && is_home() ){
      wp_enqueue_script('another_script', get_template_directory_uri() . '/js/another_script.js', array(), null, false);
   }

}
add_action( 'wp_enqueue_scripts', 'your_preffix_scripts' );

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

Подключение скриптов для страницы по адресу

Я конечно бы мог вам показать как подключать скрипты на страницах с проверками is_page(), is_single, is_singular() и т.д., но это не очень интересно. Покажу вам как проверить страницу по адресу.

Допустим у нас есть две страницы example.com/contact и example.com/отзывы. В одном случае ссылка на страницу на английском языке, во втором на русском. К каждой странице нужно подключить разные стили. Код:

/**
* в файле functions.php
*/
function your_preffix_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );

    // Для ссылки на английском
    if(is_page('contact')){
       wp_enqueue_script('some_script', get_template_directory_uri() . '/js/some_script.js', array(), null, false); 
    }
    // Для ссылки на русском
    if(is_page( sanitize_title('отзывы') ) ){
        wp_enqueue_script('another_script', get_template_directory_uri() . '/js/another_script.js', array(), null, false);
    }   

}
add_action( 'wp_enqueue_scripts', 'your_preffix_scripts' );

P.S

Думаю что смогу вам помочь, а пока подписывайтесь на меня в инстаграме, в контакте (ссылки в подвале), пользуйтесь моим сервисом строки, ищите вхождения ключевых фраз. Поддержите проект, зарегистрируйтесь по реферальной ссылке на хостинге beget, он действительно классный. О нём вы можете прочитать в этом отзыве.