Как WordPress правильно внедряет JavaScript?Пользовательская загрузка файлов JS и CSS

Программисты, использующие WordPress для создания веб-сайтов, будут обращаться к некоторым ресурсам по JavaScript и CSS-скриптам при разработке плагинов WordPress или настройке тем WordPress.

• Обычно люди используют теги link, script непосредственно для HTML.
• На самом деле WordPress имеет встроенные сложные функции и методы для обращения к скриптам.
• Таким образом, использование встроенных ссылок на методы WordPress является более профессиональным и более расширяемым.

Метод ошибочного цитирования

Есть два распространенных метода цитирования, это нормально, это просто не идеально и не разумно.

Метод 1: Использование тега <link> для ссылки на CSS-файл

• Теги Script применяют файлы JS.Здесь не подробно.

Метод 2: Использование функции wp_head

• Функция wp_head используется для вывода пользовательского или системного контента.
• Иногда мы используем следующий код для ссылки на этот файл:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Скопируйте приведенный выше код в файл functions.php для ссылки на соответствующие файлы.

Механизм ресурсов WordPress Enqueue Scripts

Как мы все знаем, WordPress имеет множество плагинов:

• Почти каждый плагин ссылается на какой-то файл ресурсов.
• Неизбежно возникнут конфликты между ресурсами, на которые ссылаются два плагина, которые станут нестабильными и могут повлиять на эффективность.

Используйте функцию wp_enqueue_script

• Чтобы сослаться на ресурс в WordPress, вы должны использоватьwp_enqueue_scriptФункция, которая имеет слово enqueue в имени поставленной в очередь или отсортированной функции.
• С помощью этого способа постановки ресурсов в очередь WordPress (сценариев постановки в очередь) ссылки отделяются от соответствующих файлов и основного кода.
• Если пользователь хочет отключить ресурс, он может удалить, изменить и прокомментировать его, не изменяя его из основного кода.

Кроме того, в WordPress встроены некоторые часто используемые библиотеки, такие как jQuery, jQuery UI и т. д.

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

Если вы используете эту функцию для ссылки на свои собственные файлы JS и CSS, вам необходимо использоватьwp_register_scriptФункция регистрирует идентификатор (дескриптор) и затем используетwp_enqueue_scriptФункция вызывает ресурс, соответствующий этому флагу.

Как правильно импортировать файлы JS и CSS в WordPress?

WordPress предоставляет разумные методы импорта для методов JS и CSS.

Вы можете использовать следующий код для импорта файла plugin.css в плагин ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

В приведенном выше примере используется функция wp_register_script для создания ресурса с идентификатором plugin_stylesheet.

Затем добавьте его запросы в очередь вwp_enqueue_scriptsдействия находятся в работе.

Хотя имя функции является сценарием, оно не имеет ничего общего с типом файла ресурсов и допустимо как для CSS, так и для JS.

Функция wp_register_script на самом деле не так проста, она может иметь пять параметров:

1) $handle: Идентификатор ресурса.

• 由wp_enqueue_scriptпередача.

2) $src: Местоположение ресурса.

• Относительные или абсолютные адреса используют встроенные функции WordPress для получения адресов и т. д.
• ОбщиеПозиционированиефункция имеетplugins_url,get_template_directory_uri等.

3) $deps: Зависимость.

• Если вы имеете в виду плагин jQuery и вам нужно полагаться на сборку jQuery, вам нужно заполнить jQuery.
• Обратите внимание, что он передается как массив.

4) $ver: Версия ресурса, необязательно.

5) $in_footer: Следует ли размещать его внизу?

• Обычно файлы JS следует размещать внизу страницы, вы можете установить для этого параметра значение True, оставить его пустым или False для вывода вверху.

Давайте рассмотрим более полный справочный пример файла JavaScript ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

Темы WordPress используют wp_enqueue_script для импорта ресурсов

Программисты в разработке темы WordPress, используютwp_enqueue_scriptИмпорт ресурсов.

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

Основное отличие заключается в использовании соответствующей функции для получения каталога темы для получения адреса файла ресурсов в теме.

вы можете использоватьget_template_directory_uriфункция для получения текущего каталога темы.

Если вы используете дочернюю тему, вам нужно будет использоватьget_stylesheet_directory_uriФункция получает каталог родительской темы для получения соответствующих ресурсов.