Как правильно добавлять JavaScripts и стили в WordPress? Статья-инструкция

Как правильно добавлять Javascript и стили в Wordpress

16 декабря, 2017 Максим Метелев 6436 просмотров Комментариев нет

Хотите научиться правильно добавлять JavaScripts и CSS в WordPress? Многие начинающие сайтоделы часто допускают ошибку, прописывая скрипты и стили непосредственно в код тем и плагинов.

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

Как правильно добавлять JavaScripts и стили в WordPress?

Содержание

1 Частые ошибки при добавлении скриптов и таблиц стилей в WordPress
2 Зачем нужна поочередная загрузка скриптов и стилей в WordPress?
3 Как правильно поочередно загружать скрипты в WordPress?
4 Правильная постановка в очередь стилей в WordPress

Частые ошибки при добавлении скриптов и таблиц стилей в WordPress

Многие неопытные разработчики сайтов и плагинов совершают ошибку, добавляя встроенный CSS или скрипты прямо в код плагинов и тем.

Некоторые ошибочно используют функцию wp_head для загрузки своих скриптов и таблиц стилей.

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

<?php

add_action('wp_head', 'wpb_bad_script');

function wpb_bad_script() {

echo 'jQuery goes here';

}

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

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

Может оказаться, что сами библиотеки будут разных версий, что тоже приведет к конфликту.

Поэтому очень важно уметь правильно добавлять таблицы стилей и скрипты.

Зачем нужна поочередная загрузка скриптов и стилей в WordPress?

У WordPress очень большое и развитое сообщество разработчиков. Тысячи людей со всего мира ежедневно разрабатывают все новые темы и плагины для WordPress. Для того чтобы все правильно работало и никто не наступал друг другу на пятки WordPress ввел систему последовательной загрузки Java-скриптов и таблиц стилей.

Используя функции wp_enqueue_script и wp_enqueue_style , вы указываете WordPress, когда и куда загружать файл, а также взаимосвязи. Эта система также позволяет разработчикам использовать встроенные библиотеки JavaScript, которые идут в коробке WordPress, а не несколько раз загружать один и тот же сторонний скрипт. Все это уменьшает время загрузки страницы и помогает избежать конфликтов с другими темами и плагинами.

Как правильно поочередно загружать скрипты в WordPress?

Загружать скрипты в WordPress очень легко и просто. Ниже пример кода, который необходимо вставить в свой файл плагинов или в файл темы functions.php для того, чтобы правильно загружать скрипты в WordPress.

<?php
function wpb_adding_scripts() {
 
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
 
wp_enqueue_script('my_amazing_script');
}
  
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

<?php

function wpb_adding_scripts() {

wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

wp_enqueue_script('my_amazing_script');

}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Пояснение:

Мы начали регистрировать наш скрипт через функцию wp_register_script(, которая принимает 5 параметров.

$handle – это уникальное имя скрипта. В нашем случае – это “my_amazing_script”
$src – это расположение скрипта. Мы используем функцию plugins_url для того, чтобы получить корректный урл папки с плагинами. Зная его, WordPress начнет искать наш файл amazing_script.js в указанной папке.
$deps – т.е. совместимость. Так как наш скрипт использует jQuery, то мы добавили эту библиотеку в данную область. WordPress автоматически загрузит jQuery, если ее еще нет на сайте.
$ver – это номер версии вашего скрипта. Этот параметр опционален.
$in_footer – если вы хотите подгружать скрипт в футере, то здесь необходимо прописать значение «true». Если хотите загрузить в шапке – то «false».

После прописания всех параметров в wp_register_script , мы можем вызвать скрипт в wp_enqueue_script() , который заставит все работать.

И последнее что останется сделать – это использовать активационный хук wp_enqueue_scripts, который нужен для фактической загрузки скрипта.

Так как это пример кода, то мы добавили его в самом конце.

Если вы добавляете его в тему или в плагин, то вы можете поместить этот активационный хук туда, где необходим скрипт. Это позволит вам уменьшить объем памяти вашего плагина.

Многие могут задаться вопросом: зачем мы сначала регистрируем скрипт, а потом ставим его в очередь? Делается это для того, чтобы другие владельцы сайтов могли отменить регистрацию скрипта без изменения основного кода вашего плагина.

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

Как и скрипты в очередь можно поставить и таблицу стилей. Вот пример:

<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

<?php

function wpb_adding_styles() {

wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));

wp_enqueue_style('my_stylesheet');

}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );

Для добавления таблицы стилей вместо wp_enqueue_script мы используем wp_enqueue_style .

Обратите внимание, что мы используем активационный хук wp_enqueue_scripts как для скриптов, так и стилей. Несмотря на название функции она работает в обоих случаях.

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

Однако если вы используете функцию поочередной загрузки скриптов в своей теме, то вместо нее используйте get_template_directory_uri() . Если вы работаете с дочерней темой, то используйте get_stylesheet_directory_uri() .

Вот код:

<?php
  
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
  
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

<?php

function wpb_adding_scripts() {

wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);

wp_enqueue_script('my_amazing_script');

}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Надеюсь, эта статья помогла вам разобраться, как правильно добавлять jacvascript и стили в WordPress. Возможно, вам также будет интересно изучить исходный код популярных WordPress плагинов.

Если вам понравилась статья, то не забывайте ставить лайк. Подписывайтесь и находите меня в ВКонтакте, в YouTube

Рубрики: WordPress