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

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

^

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

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

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

^
Хотя приведенный выше код может показаться более простым, это неправильный способ добавления скриптов в 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.

^
Объяснение:

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

$ handle – Handle – это уникальное имя вашего скрипта. Наш называется «my_amazing_script»
$ src – src – это местоположение вашего скрипта. Мы используем функцию plugins_url, чтобы получить правильный URL-адрес нашей папки плагинов. Как только WordPress обнаружит это, он будет искать наше имя amazing_script.js в этой папке.
$ deps – deps для зависимости. Поскольку наш скрипт использует jQuery, мы добавили jQuery в область зависимостей. WordPress автоматически загрузит jQuery, если он еще не загружен на сайт.
$ ver – это номер версии нашего скрипта. Этот параметр не обязателен.
$ in_footer – мы хотим загрузить наш скрипт в нижний колонтитул, поэтому мы установили значение true. Если вы хотите загрузить скрипт в заголовок, вы должны сделать его ложным.
После предоставления всех параметров в wp_register_script, мы можем просто вызвать скрипт в wp_enqueue_script (), который заставляет все происходить.

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

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

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

Правильно ставить в очередь стили в WordPress

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

^

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

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

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

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

Ниже приведен пример кода:

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