WordPress ແນະນໍາ JavaScript ຢ່າງຖືກຕ້ອງແນວໃດ?ການໂຫຼດໄຟລ໌ JS ແລະ CSS ແບບກຳນົດເອງ

ນັກຂຽນໂປຣແກຣມທີ່ ໃຊ້ WordPress ເພື່ອສ້າງເວັບໄຊທ໌ ຈະອ້າງອີງເຖິງຊັບພະຍາກອນສະຄຣິບ JavaScript ແລະ CSS ບາງຢ່າງ ເມື່ອພັດທະນາ ປລັກອິນ WordPress ຫຼືປັບແຕ່ງຮູບແບບ WordPress.

• ປົກກະຕິແລ້ວ, ປະຊາຊົນໃຊ້ການເຊື່ອມຕໍ່, tags script ໂດຍກົງສໍາລັບ HTML.
• ໃນ​ຄວາມ​ເປັນ​ຈິງ, WordPress ມີ​ການ​ສ້າງ​ໃນ​ຫນ້າ​ທີ່​ຊັບ​ຊ້ອນ​ແລະ​ວິ​ທີ​ການ​ສໍາ​ລັບ​ການ​ອ້າງ​ອີງ scripts.
• ດັ່ງນັ້ນ, ການນໍາໃຊ້ການອ້າງອີງວິທີການສ້າງໃນ 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 ມີ plugins ຫຼາຍ:

• ເກືອບທຸກປລັກອິນອ້າງອີງບາງໄຟລ໌ຊັບພະຍາກອນ.
• ຫຼີກລ່ຽງບໍ່ໄດ້, ຈະມີຄວາມຂັດແຍ້ງລະຫວ່າງຊັບພະຍາກອນທີ່ອ້າງອີງໂດຍສອງ plugins, ເຊິ່ງຈະກາຍເປັນຄວາມບໍ່ຫມັ້ນຄົງແລະອາດຈະສົ່ງຜົນກະທົບຕໍ່ປະສິດທິພາບ.

ໃຊ້ຟັງຊັນ wp_enqueue_script

• ເພື່ອອ້າງອີງຊັບພະຍາກອນໃນ WordPress ທ່ານຄວນໃຊ້wp_enqueue_scriptຟັງຊັນທີ່ມີຄຳ enqueue ໃນຊື່ຂອງຟັງຊັນ enqueued ຫຼື sorted.
• ດ້ວຍ WordPress 'ວິທີການ enqueueing ຊັບພະຍາກອນ (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 ເຂົ້າໄປໃນ plugin ▼

<?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ການປະຕິບັດແມ່ນຢູ່ໃນການດໍາເນີນງານ.

ໃນຂະນະທີ່ຊື່ຟັງຊັນເປັນ script, ມັນບໍ່ມີຫຍັງກ່ຽວຂ້ອງກັບປະເພດຂອງໄຟລ໌ຊັບພະຍາກອນແລະຖືກຕ້ອງສໍາລັບທັງ CSS ແລະ JS.

ຟັງຊັນ wp_register_script ແມ່ນບໍ່ງ່າຍດາຍ, ມັນສາມາດມີຫ້າຕົວກໍານົດການ:

1) $handle: ຕົວລະບຸຊັບພະຍາກອນ.

• 由wp_enqueue_scriptໂອນ.

2) $src: ສະຖານທີ່ຂອງຊັບພະຍາກອນ.

• ທີ່ຢູ່ທີ່ກ່ຽວຂ້ອງຫຼືຢ່າງແທ້ຈິງໃຊ້ຫນ້າທີ່ສ້າງໃນ WordPress ເພື່ອໃຫ້ໄດ້ຮັບທີ່ຢູ່, ແລະອື່ນໆ.
• ສາມັນການຈັດຕໍາ ແໜ່ງຫນ້າ​ທີ່​ມີ​plugins_url,get_template_directory_uri。。

3) $deps: ການເພິ່ງພາອາໄສ.

• ຖ້າທ່ານກໍາລັງອ້າງອີງໃສ່ plugin jQuery ແລະຈໍາເປັນຕ້ອງອີງໃສ່ jQuery ເພື່ອສ້າງ, ທ່ານຈໍາເປັນຕ້ອງຕື່ມຂໍ້ມູນໃສ່ jQuery.
• ໃຫ້ສັງເກດວ່າມັນຖືກສົ່ງຜ່ານເປັນ array.

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 plugin.
• ວິທີການອ້າງອີງໃນຫົວຂໍ້ແມ່ນຄ້າຍຄືກັນ.

ຄວາມແຕກຕ່າງຕົ້ນຕໍແມ່ນການໃຊ້ຟັງຊັນທີ່ສອດຄ້ອງກັນເພື່ອໃຫ້ໄດເລກະທໍລີຫົວຂໍ້ເພື່ອໃຫ້ໄດ້ຮັບທີ່ຢູ່ໄຟລ໌ຊັບພະຍາກອນພາຍໃຕ້ຫົວຂໍ້.

ທ່ານສາມາດນໍາໃຊ້get_template_directory_uriຟັງຊັນເພື່ອເອົາໄດເລກະທໍລີຫົວຂໍ້ປະຈຸບັນ.

ຖ້າທ່ານກໍາລັງໃຊ້ຫົວຂໍ້ເດັກນ້ອຍ, ທ່ານຈະຕ້ອງໃຊ້get_stylesheet_directory_uriຟັງຊັນໄດ້ຮັບໄດເລກະທໍລີຂອງຫົວຂໍ້ຫຼັກເພື່ອໃຫ້ໄດ້ຊັບພະຍາກອນທີ່ສອດຄ້ອງກັນ.