Как правильно добавлять JavaScript и стили в WordPress
Опубликовано: 2021-08-02
В этой статье мы увидим, как правильно добавлять JavaScript и стили в WordPress .
Есть много новых разработчиков WordPress, которым нравится писать код и разрабатывать плагины исключительно для своих собственных веб-сайтов или продавать их на различных торговых площадках и получать приличную прибыль.
Существуют различные способы написания кода, но есть только избранные способы эффективного написания кода.
Если вы можете написать код в две строки вместо десяти, вы сэкономите много времени и памяти.
Если это не имеет значения для небольшого и легкого веб-сайта, но для тяжелого веб-сайта это может иметь большое значение.
Если вы не будете писать четкий код и эффективно использовать доступные ресурсы, вы создадите множество конфликтов для других программ.
Например, есть разные способы загрузки внешнего готового Javascript в WordPress для вашего плагина.
Но если вы не будете следовать надлежащему стандарту, все активированные плагины могут сильно заклинить.
Эта статья в основном предназначена для новых разработчиков WordPress, которые хотят разрабатывать темы и плагины WordPress.
Если вы не кодируете правильно, ваш код будет непрофессиональным, и любой продукт, который вы создали, независимо от того, насколько хороша концепция, вас никогда не примут.
Итак, лучше знать, как правильно добавлять JavaScript и стили в WordPress .
Ошибки добавления JavaScript
Некоторые из вас, возможно, знают о том, что в WordPress есть функция wp_head, которая помогает вам загружать что-либо в разделе заголовка веб-сайта.
Все, что вам нужно сделать, это добавить следующие строки кода в файл сценария, и в заголовке появится все, что угодно.
add_action('wp_head', 'wpb_bad_script');
функция wpb_bad_script() {
echo 'jQuery идет сюда';
}
Это довольно быстрый способ добавления вещей, но это не лучший способ. Вы должны следовать надлежащему стандарту, отказываясь от ярлыков, и в этом весь смысл этой иллюстрации.
Например, вы загружаете JQuery вручную в свой плагин, а другой разработчик также загружает тот же JQuery вручную или через соответствующий стандарт. Если человек активировал оба ваших плагина, JQuery будет загружен в память дважды, что является пустой тратой времени.
Кроме того, если загружаемый JQuery отличается по версии, тогда в плагинах будет много сбоев из-за конфликтов. Вам нужно знать, как правильно добавлять JavaScript и стили в WordPress, прежде чем писать какой-либо код.
Как избежать таких ошибок — концепция функции постановки в очередь?
Как вы, возможно, знаете, сообщество разработчиков WordPress большое и сильное. Буквально тысячи и тысячи разработчиков разрабатывают новые темы и плагины каждый день.
Но то, что они делают, чтобы убедиться, что нет никакого конфликта с методом кодирования друг друга, - это функция сценария постановки в очередь.
Это функция, отвечающая за правильное добавление JavaScript и стилей в WordPress, чтобы никогда не возникало конфликтов и ненужной блокировки памяти.
Это обеспечивает систематический способ загрузки JavaScript и стилей. Функция qp_enquque_function сообщает Wordless, когда загружать эти сценарии JavaScript и стили, где их загружать и особенно при каких условиях.
С их помощью вам не нужно загружать JQuery и тому подобное вручную, и, следовательно, никогда не будет состояния блокировки памяти из-за загрузки одних и тех же файлов снова и снова.
Причиной этого является тот факт, что функция Enqueue позволяет вам использовать встроенные библиотеки, которые поставляются с самим WordPress. Это также уменьшит нагрузку на медленную загрузку страниц из-за отсутствия ручной загрузки JavaScript.
Шаги по правильному добавлению JavaScript и стилей в WordPress-
1. Ставьте скрипты в очередь в WordPress
Следующие строки кода загружают встроенный пакет JavaScript, который поставляется с WordPress. Вы должны поместить эти строки в файл плагинов, когда вы создаете плагины, или вы должны поместить их в functions.php, если вы создаете тему.
функция 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(), которая имеет пять различных параметров.
1. $handle — это уникальное имя скрипта. Вот это «my_amazing_script».
2. $src — определяет местоположение вашего скрипта. Библиотечная функция plugins_url извлекает правильный URL папки вашего плагина. Как только он будет получен, он начнет искать внутри него файл Amazing_script.js.
3. $deps — определяет зависимость. Вам нужно добавить его, когда вы просите WordPress загрузить библиотечный скрипт, такой как Jquery.
Если скрипты уже загружены в память, то повторно она не будет загружена, а произойдет новая загрузка. Это гарантирует отсутствие конфликтов, блокировки памяти и пустой траты времени.
4. $ver — определяет номер версии скрипта. Это не обязательно.
5. $in_footer — используется для загрузки скрипта в нижний колонтитул. Если вы хотите загрузить скрипт в заголовок, вы должны оставить значение false.
Как только все определено, вы просто вызываете скрипт с помощью wp_enqueue_script().
2. Добавление стилей в очередь в WordPress
Как и в JavaScript, вы должны ставить таблицы стилей в очередь. Используйте следующий фрагмент кода в вашем файле плагина или файле functions.php для создания темы.
функция wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action('wp_enqueue_scripts', 'wpb_adding_styles');
Приведенные выше коды подходят для создания плагина. Когда вы создаете тему, вы должны изменить plugins_url() на get_template_directory_uri(). Остальные вещи останутся точно такими же.
функция 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');
Если вы создаете дочернюю тему, вам нужно использовать get_stylesheet_direcroy_uri() вместо get_template_directory_uri().
Это стандартный способ правильно добавить JavaScript и стили в WordPress.
Если ваш плагин или тема сталкиваются с какими-либо сбоями, вам следует изменить их код с помощью вышеупомянутых строк кода, и, возможно, сбои будут устранены.
Всегда следуйте стандартам кодирования, принятым во всем мире, чтобы быть на одной волне с другими успешными разработчиками.