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 скриптүүдийн нөөцийн механизм

Бидний мэдэж байгаагаар 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Функц нь энэ тугтай тохирох нөөцийг дууддаг.

WordPress дээр JS болон CSS файлуудыг хэрхэн зөв импортлох вэ?

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 файлуудыг хуудасны доод талд байрлуулах ёстой бөгөөд та энэ параметрийг Үнэн гэж тохируулж, хоосон орхиж эсвэл дээд талд гаргахын тулд худал болгож болно.

Илүү бүрэн гүйцэд 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Уг функц нь холбогдох нөөцийг авахын тулд үндсэн сэдвийн лавлахыг авдаг.