Как WordPress правилно въвежда JavaScript?Персонализирано зареждане на JS и CSS файлове

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

• Обикновено хората използват етикети за връзка, скрипт директно за 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 в името на поставената в опашка или сортирана функция.
• С този начин на WordPress за поставяне на ресурси в опашка (Enqueue Scripts), препратките са отделени от съответните файлове и основния код.
• Ако потребителят иска да деактивира ресурса, той може да го изтрие, модифицира и коментира, без да го променя от основния код.

Освен това някои често използвани библиотеки като jQuery, jQuery UI и др. са вградени в WordPress.

Можем да използваме функцията 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Функцията получава директорията на родителската тема, за да получи съответните ресурси.