Стандартный способ включения JavaScript и CSS в WordPress

Если вы разработчик WordPress, то вы слышали о таких словах, как wp_enqueue_script, wp_enqueue_style и wp_enqueue_scripts. Это методы, которые мы должны использовать для включения JavaScript и CSS в WordPress.

Когда дело доходит до WordPress, не следует использовать теги скриптов и ссылок для добавления файлов JavaScript и CSS.

Преимущества использования стандартных методов

На веб-сайтах обычно используются различные эффекты, анимации для улучшения взаимодействия с пользователем. В Интернете доступно множество готовых плагинов, которые позволяют нам добавлять на ваш сайт слайдеры, контактные формы, карусели и т.д. Когда мы используем эти внешние ресурсы, нам необходимо использовать предоставленные ими файлы JS и CSS. Используя методы, предоставляемые WordPress, мы можем контролировать страницы, на которых могут использоваться только такие плагины. Например, если мы показываем слайдер на домашней странице, тогда нет необходимости включать файлы JS и CSS слайдера на другую страницу. Всегда рекомендуется включать JS и CSS только при необходимости. Это хорошая практика, которая используется для повышения производительности сайта и ускорения загрузки нашего сайта.

Фактический код для включения JavaScript и CSS

Предположим, у нас есть файлы custom.js и custom.css, которые нужно добавить на наш сайт. Для этого нам нужно разместить ниже код.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Примечание: 3-й параметр в функции wp_register_script. Мы передали массив (‘jquery’), что означает, что наш custom.js зависит от файла jquery.js. Вы можете использовать массив emapy здесь, если ваш скрипт не имеет зависимостей.

Последний параметр имеет значение true, что означает включение файла custom.js в нижний колонтитул (до конца тега body).

Описание параметров функции wp_register_script ()

$ handle (Обязательно): имя сценария. Должен быть уникальным.
$ src (обязательно): полный URL-адрес сценария или путь сценария относительно корневого каталога WordPress.
$ deps (Необязательно): массив зарегистрированных скриптов, от которых зависит этот скрипт.
Значение по умолчанию: array ()
$ ver (Необязательно): строка, определяющая номер версии скрипта, если он есть, который добавляется к URL-адресу в виде строки запроса для очистки кеша. Если для версии установлено значение false, автоматически добавляется номер версии, равный текущей установленной версии WordPress. Если установлено значение null, версия не добавляется. Значение по умолчанию – false.
$ In_footer (Необязательно): ставить ли скрипт в очередь перед закрытием тега body, а не в заголовке. По умолчанию false.

Описание параметров функции wp_register_style ()

$ handle (Обязательно): имя таблицы стилей. Должен быть уникальным.
$ src (обязательно): полный URL-адрес таблицы стилей или путь к таблице стилей относительно корневого каталога WordPress.
$ deps (необязательно): массив зарегистрированных стилей обрабатывает эту таблицу стилей, от которой зависит.
Значение по умолчанию: array ()
$ ver (Необязательно): строка, определяющая номер версии таблицы стилей, если она есть, которая добавляется к URL-адресу в виде строки запроса для очистки кеша. Если для версии установлено значение false, автоматически добавляется номер версии, равный текущей установленной версии WordPress. Если установлено значение null, версия не добавляется. Значение по умолчанию: false
$ media(Необязательно): носитель, для которого была определена эта таблица стилей. Принимает типы мультимедиа, такие как «все», «печать» и «экран», или мультимедийные запросы, такие как «(ориентация: портрет)» и «(максимальная ширина: 640 пикселей)». Значение по умолчанию: «все».

Все дело в том, как включить JavaScript и CSS в WordPress. Если у вас есть вопросы или предложения, оставляйте комментарии ниже.