Правильное подключение 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, он действительно классный, о нём вы можете прочитать в этом отзыве.