Хотите узнать, как правильно добавлять JavaScripts и таблицы стилей CSS в WordPress?? Многие пользователи DIY часто совершают ошибку, напрямую вызывая свои скрипты и таблицы стилей в плагинах и темах. В этой статье мы покажем вам, как правильно добавить JavaScripts и таблицу стилей в WordPress. Это будет особенно полезно для тех, кто только начинает изучать разработку тем и плагинов WordPress.
Распространенные ошибки при добавлении скриптов и таблиц стилей в WordPress
Многие новые разработчики плагинов и тем для WordPress совершают ошибку, напрямую добавляя свои скрипты или встроенный CSS в свои плагины и темы.
Некоторые ошибочно используют функцию wp_head для загрузки своих скриптов и таблиц стилей.
Хотя приведенный выше код может показаться проще, это неправильный способ добавления скриптов в WordPress, и он приводит к большим конфликтам в будущем.
Например, если вы загружаете jQuery вручную, а другой плагин загружает jQuery соответствующим способом, то у вас jQuery загружается дважды. Если он загружается на каждой странице, то это негативно скажется на скорости и производительности WordPress.
Также возможно, что эти две темы имеют разные версии, что также может вызвать конфликты.
Учитывая это, давайте рассмотрим правильный способ добавления скриптов и таблиц стилей.
Зачем в WordPress использовать Enqueue Scripts и Styles?
WordPress имеет сильное сообщество разработчиков. Тысячи людей со всего мира разрабатывают темы и плагины для WordPress.
Чтобы убедиться, что все работает должным образом, и никто не наступает на пятки другому, WordPress имеет систему регистрации. Эта система обеспечивает программируемый способ загрузки JavaScripts и таблиц стилей CSS.
Используя функции wp_enqueue_script и wp_enqueue_style, вы сообщаете WordPress, когда загружать файл, куда его загружать и каковы его зависимости.
Эта система также позволяет разработчикам использовать встроенные библиотеки JavaScript, которые поставляются в комплекте с WordPress, вместо того, чтобы загружать один и тот же сторонний скрипт несколько раз. Это уменьшает время загрузки страницы и помогает избежать конфликтов с другими темами и плагинами.
Как правильно запустить скрипты в WordPress?
Правильная загрузка скриптов в WordPress очень проста. Ниже приведен пример кода, который вы вставите в файл плагинов или в функции вашей темы.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 — Handle — это уникальное имя вашего скрипта. Наш скрипт называется «my_amazing_script»
- $src — src — это местоположение вашего скрипта. Мы используем функцию plugins_url, чтобы получить правильный URL папки plugins. Как только 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
Подобно скриптам, вы также можете включить в список ваши таблицы стилей. Посмотрите на пример ниже:
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); ?>
Вместо использования wp_enqueue_script мы теперь используем wp_enqueue_style для добавления нашей таблицы стилей.
Обратите внимание, что мы использовали хук действия wp_enqueue_scripts как для стилей, так и для скриптов. Несмотря на название, эта функция работает для обоих.
В примерах выше мы использовали функцию plugins_url, чтобы указать на местоположение скрипта или стиля, который мы хотели вызвать.
Однако, если вы используете функцию enqueue scripts в вашей теме, то просто используйте get_template_directory_uri() вместо этого. Если вы работаете с дочерней темой, используйте get_stylesheet_directory_uri() .
Ниже приведен пример кода:
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); ?>
Мы надеемся, что эта статья помогла вам узнать, как правильно добавить jacvascript и стили в WordPress. Вы также можете изучить исходный код лучших плагинов WordPress для получения примеров из реальной жизни.
Источник: www.wpbeginner.com