Нет ничего в этой жизни ближе нашему сердцу, как умереть возможно скорее (Тертуллиан).

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

3 мин для чтения
FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (11 оценок, среднее: 4,81 из 5)
Загрузка...
3 октября 2015
Как правильно добавлять JavaScript и стили в WordPress

Недавно читал обзор кода для плагина. Плагин работал нормально, но разработчик сделал не в соответствии с рекомендациями по загрузке внешних JavaScript. WordPress имеет в системе управления очередями для добавления внешних скриптов и стилей, которая помогает предотвратить конфликтов плагинов. Поскольку у большинства пользователей работают более чем один плагин на их сайте, это всегда хорошо для разработчиков следовать лучшей практике. В этой статье рассказывается, как правильно добавить скрипты и стили в WordPress. Это будет очень полезно для начинающих заниматься изучением тем WordPress и только начали разрабатывать плагины.

Ошибка

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

<?php
add_action('wp_head', 'wpa_bad_script');
function wpa_bad_script() {
echo 'здесь должен быть код jQuery';
}
?>

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

Давайте рассмотрим правильный способ как сделать это.

Зачем ставить скрипты в WordPress?

WordPress имеет сильное сообщество программистов. Тысячи разработчиков по всему миру разрабатывают темы и плагины для WordPress. Чтобы убедиться, что все работает должным образом и никто не наступает на чужие носки, WordPress имеет метод enqueue функции сценария. Эта функция позволяет систематически загружать java-скрипты и стили. С помощью функции wp_enqueue_script, вы указываете WordPress когда загружать скрипт, где загрузить его, и каковы его зависимости.

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

Как правильно ставить скрипты в WordPress

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

<?php
&nbsp;
function wpa_adding_scripts() {
wp_register_script('moy_amazing_script', plugins_url('moy_script.js', __FILE__),array('jquery'),'1.1', true);
wp_enqueue_script('moy_amazing_script');
}
&nbsp;
add_action( 'wp_enqueue_scripts', 'wpa_adding_scripts' );
?>

Объяснение:

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

  • $handle – это уникальное имя вашего скрипта. Наш скрипт называется “moy_amazing_script”
  • $src – это расположение скрипта. Мы используем функцию plugins_url, чтобы получить правильный URL-адрес нашей папки plugins. Она будет выглядеть для нашего файла amazing_script.js в этой папке.
  • $deps – это зависимости. Поскольку наш скрипт использует jQuery, мы добавили jQuery в зависимость. WordPress будет автоматически загружать jQuery если он уже не загружен.
  • $ver– это номер версии нашего скрипта. Этот параметр не требуется.
  • $in_footer – мы хотим загрузить наш скрипт в подвале, поэтому мы должны установить значение на true. Если вы хотите загрузить скрипт в Заголовок, то вы бы написали false.

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

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

Как правильно ставить стили

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

<?php
function wpa_adding_styles() {
wp_register_script('moy_stylesheet', plugins_url('moy-stylesheet.css', __FILE__));
wp_enqueue_script('moy_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpa_adding_styles' );
?>

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

В примерах выше мы использовали plugins_url, чтобы указать на местоположение скрипта или стиля мы хотели ставить в очередь. Однако, если вы используете скрипты, добавляют функцию в вашу тему, затем просто использовать get_template_directory_uri() вместо этого. Если вы работаете с дочерней темой, а затем использовать get_stylesheet_directory_uri(). Ниже приведен пример кода:

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

Надеюсь, данная статья поможет вам в разработке JavaScript и стилей в WordPress для тем и плагинов. Для вопросов и комментариев, оставьте комментарий ниже.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 489

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Размер шрифта

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close