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

/

Хотите узнать, как правильно добавлять сценарии JavaScripts и таблицы стилей CSS в WordPress? Многие пользователи DIY часто совершают ошибку, вызывая свои скрипты и таблицы стилей напрямую в плагинах и темах. В этой статье мы покажем вам, как правильно добавлять сценарии Java и таблицу стилей в WordPress. Это будет особенно полезно для тех, кто только начинает изучать разработку тем и плагинов WordPress.

Правильное добавление JavaScripts и стилей в WordPress

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

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

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

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

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

Например, если вы загружаете jQuery вручную, а другой плагин загружает jQuery с помощью правильного метода, то jQuery загружается дважды. Если он загружается на каждой странице, это негативно скажется на скорости и производительности WordPress.

Также возможно, что это две разные версии, что также может вызвать конфликты.

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

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

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

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

Используя функции 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' ); 
?>

Пояснение:

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

  • $ handle - Ручка - это уникальное имя вашего скрипта. Наш называется «my_amazing_script»
  • $ src - src - это расположение вашего скрипта. Мы используем функцию plugins_url, чтобы получить правильный URL-адрес нашей папки с плагинами. Как только WordPress обнаружит это, он будет искать в этой папке имя файла amazing_script.js.
  • $ deps - deps для зависимости. Поскольку наш скрипт использует jQuery, мы добавили 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' ); 
?>

Вместо использования 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' ); 
?>

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

Нужна помощь с WordPress? Свяжитесь сейчас
[email protected]

Это переведенная версия оригинальной статьи от wpbeginner, весь контент, изображения и авторство принадлежит автору

Как составить список будущих запланированных сообщений в WordPress

Недавно один из наших пользователей спросил нас, как они могут отображать запланированные или будущие публикации в WordPress. Отображение предстоящих

Как показать всплывающее окно подтверждения для форм в WordPress

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

Как отображать популярные сообщения по дням, неделям и месяцам в WordPress

Вы хотите, чтобы в WordPress отображались самые популярные записи по дням, неделям, месяцам и за все время? Популярные сообщения позволяют вашим посетителям

Как клонировать сайт WordPress за 7 простых шагов

Вообще говоря, клонирование считается неэтичной практикой. Однако, когда вы думаете о клонировании с точки зрения создания дубликата сайта WordPress,