WordPress css and javascript

Подключение файлов CSS и JavaScript в теме WordPress

В этом уроке расскажу вам, как правильно подключать файлы стилей и скриптов при создании темы WordPress.

Вставить в HTML шаблона теги или – не катит. Потому что в таком случае вы их захардкодите и например у вас не будут работать плагины оптимизации, которые объединяют все стили и скрипты в один файл. Или же у вас не получится перестроить порядок скриптов.

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

Пример подключения файла CSS и файла JS

Написал для вас вот такой код, чтобы вам удобно было копировать его отсюда при необходимости:

add_action( 'wp_enqueue_scripts', 'true_enqueue_js_and_css' ); function true_enqueue_js_and_css() { // CSS wp_enqueue_style( 'misha_css', // идентификатор стиля get_stylesheet_directory_uri() . '/css/misha.css', // URL стиля array(), // без зависимостей '5.0' // версия, это например ". /misha.css?ver=5.0" ); // JavaScript wp_enqueue_script( 'misha_js', // идентификатор скрипта get_stylesheet_directory_uri() . '/js/misha.js', // URL скрипта array( 'jquery' ), // зависимости от других скриптов time(), // версия каждую секунду разная, чтоб не кэшировать во время разработки true // true - в футере, false – в хедере ); }

• При разработке своих тем вставляем код подключения JS / CSS в functions.php , либо в какой-либо произвольный файл, подключаемый также к functions.php через include() / require() .
• Можете также почитать документацию функций wp_enqueue_style() и wp_enqueue_script().
• Не переживайте так из-за того, что я записал функцию не в одну строчку, а в 7 – согласно кодгайду WordPress, мы можем записывать функцию, чтобы каждый её параметр был на новой строке.

Хуки wp_enqueue_scripts, admin_enqueue_scripts и login_enqueue_scripts

И хотя в уроке мы использовали только хук wp_enqueue_scripts , но есть и другие, а вот их полный список:

• wp_enqueue_scripts – для подключения на страницах сайта.
• admin_enqueue_scripts – для подключения на страницах админки WordPress /wp-admin/.
• login_enqueue_scripts – для подключения на странице авторизации / восстановления пароля / регистрации (wp-login.php).

Есть ещё enqueue_block_editor_assets , но давайте немного притормозим, ладно? 😅

Что делать с кэшированием?

Конечно же обновлять кэш браузера после каждого изменения в style.css вообще не особо вариант?

Поэтому мы и воспользуемся 4-м параметром функции, в который мы можем передать версию, осталось только придумать, как передавать её динамически, чтобы можно было бы забыть о кэше на время разработки.

В уроке мы использовали функцию time() , потому что каждый раз она возвращает нам новое значение, каждую следующую секунду.

Давайте сейчас я покажу вам более хитрый, но чуть более правильный метод – мы можем использовать другую PHP функцию filemtime() , которая возвращает также время, но только не время вообще, а время последнего изменения файла! В секундах.

add_action( 'wp_enqueue_scripts', 'misha_js_and_css' ); function misha_js_and_css(){ wp_enqueue_script( 'scripts', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), filemtime( dirname( __FILE__ ) . '/js/scripts.js' ), // или filemtime( get_stylesheet_directory() . '/js/scripts.js' ), true ); }

Но как же работает filemtime() ?

Как вы возможно догадались, мы передали в неё что-то вроде пути до файла? Да, это именно путь к файлу на сервере, а не URL. Для того, чтобы убедиться наглядно, можете прямо в index.php попробовать вывести echo dirname( __FILE__ );

Перенос уже зарегистрированного в WordPress jQuery в футер сайта

Вообще главный аргумент здесь – что, когда мы переносим наши JS файлы в футер, мы делаем наш сайт чуточку быстрее (да, это не влияет сильно (!) на скорость загрузки сайта, однако Google PageSpeed будет счастлив).

Для того, чтобы это сделать, мы производим следующие манипуляции:

add_action( 'wp_enqueue_scripts', function() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', includes_url('/js/jquery/jquery.js'), array(), null, true ); wp_enqueue_script( 'jquery' ); } );

Так скрипт jquery уже зарегистрирован в WordPress ядре по умолчанию (полный список таких скриптов – в таблице), то нам нужно сначала снять его с регистрации функцией wp_deregister_script().

В уроке, для того, чтобы сильно вас не загружать, я не стал использовать includes_url() – она возвращает динамически путь к директории wp-includes .

Также обратите внимание, что в этом примере я не стал создавать какую-то отдельную функцию, а прописал её сразу внутри хука! Типа такая анонимная функция – подобная запись, насколько я знаю, не соответствует WordPress кодгайду, но позволит вам каждый раз не напрягать воображение для придумывания названий функций. Такая возможность записи появилась в PHP 5.3, поэтому, если вдруг каким-то чудесный образом у вас более старая версия, не рекомендую так делать.

Ну а главная суть в этом примере – это 5-й параметр функции wp_register_script(), который равен true, а значит скрипт должен подключиться в футере! Этот параметр есть только у функций скриптов, потому что, что бы там не говорил пейджспид, перенос CSS в футер – это бред.

• 21 видеоурок
• Можно скачать готовый код после каждого урока
• Можно начать проходить курс сразу же после оплаты
• Достаточно базовых знаний HTML и CSS, чтобы пройти курс
• Единоразовый платёж
• Доступ навсегда
• Уроки актуальны в 2023-м году

Источник

WordPress css and javascript

When saving CSS as external file, I’m disappointed that you can’t name the css file, you can change the permalink and then a duplicate CSS file is created with the name but it is still not used by this plugin.It is much better than Jetpack’s version which is horrible. I have now stopped using it as it also forces you to load the CSS where I needed to conditionally include it, I am now using a text editor, FTP, and wp_enqueue_style() in a child functions.php. Much easier (at least after working it out), the below code added before the html header started (not sure if that matters): //=========================================================================== function CompanyHeaderAssets() //=========================================================================== < //--- Main Company CSS ------------------------------------------------ $CssDir = '/wp-content/themes/oceanwp-child-theme-master/'; $CssName = 'Company CSS for Dynamic Pages.css'; wp_enqueue_style("CompanyCss4All", "", '', time()); //--- Main Company CSS 4 ADMINS --------------------------------------- if (IsCompanyVolunteer()) < //--- Not displaying to visitors ------------------------------------ $CssName = 'Company CSS for Image Gallery Metadata Tooltips (Volunteers Only).css'; wp_enqueue_style("CompanyCss4StaffOnly4ImageMetadata", "", '', time()); > > add_action( ‘wp_enqueue_scripts’, ‘CompanyHeaderAssets’ );

Повалил сайт

Отличный плагин. Действительно ускоряет сайт, но перед установкой делайте резервную копию, может конфликтовать с другими плагинами, но в целом достоит внимания. БД хорошо чистит от мусора.

Источник

Правильное подключение 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()

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

Источник