Як 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 у назве функцыі, пастаўленай у чаргу або адсартаванай.
• З дапамогай гэтага спосабу пастаноўкі рэсурсаў у чаргу ў WordPress (скрыпты Enqueue) спасылкі аддзеленыя ад адпаведных файлаў і асноўнага кода.
• Калі карыстальнік хоча адключыць рэсурс, ён можа выдаліць, змяніць і пракаментаваць яго, не мадыфікуючы яго з асноўнага кода.

Акрамя таго, у 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) $ ручка:Ідэнтыфікатар рэсурсу.

• 由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Функцыя атрымлівае каталог бацькоўскай тэмы, каб атрымаць адпаведныя рэсурсы.