Як WordPress правильно запроваджує JavaScript?Спеціальне завантаження файлів JS і CSS

ВикористовуйтеВеб-сайт WordPressпрограмістів, розробПлагін WordPressАбо під час налаштування теми WordPress посилаються на деякі ресурси сценаріїв JavaScript і CSS.

• Зазвичай люди використовують посилання, теги сценарію безпосередньо для HTML.
• Фактично, WordPress має вбудовані складні функції та методи для посилань на сценарії.
• Отже, використання посилань на вбудовані методи WordPress є більш професійним і розширюваним.

Помилка методу цитування

Є два поширених методи цитування, це добре, але це не ідеально чи розумно.

Тип 1:теги посилань стосуються файлів CSS

• Теги сценарію застосовують файли 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 в назві поставленої в чергу або відсортованої функції.
• За допомогою способу постановки ресурсів у чергу (Enqueue Scripts) у 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Функція отримує каталог батьківської теми для отримання відповідних ресурсів.