วิธีเพิ่ม JavaScript และสไตล์อย่างเหมาะสมใน WordPress

ในบทความนี้เราจะมาดู วิธีการเพิ่ม JavaScript และรูปแบบอย่างถูกต้องใน WordPress

มีนักพัฒนา WordPress หน้าใหม่หลายคนที่ชอบเขียนโค้ดและพัฒนาปลั๊กอินสำหรับเว็บไซต์ของตนเองโดยเฉพาะ หรือขายในตลาดซื้อขายต่างๆ และได้ผลตอบแทนที่ดี

มีหลายวิธีในการเขียนโค้ด แต่มีเฉพาะบางวิธีที่เลือกเท่านั้นที่จะเขียนโค้ดได้อย่างมีประสิทธิภาพ

หากคุณสามารถเขียนโค้ดสองบรรทัดแทนที่จะเป็นสิบ แสดงว่าคุณกำลังบันทึกการประมวลผลและหน่วยความจำจำนวนมาก

หากเว็บไซต์ขนาดเล็กและน้ำหนักเบาอาจไม่สำคัญ แต่สำหรับเว็บไซต์ขนาดใหญ่ อาจมีความหมายมาก

ถ้าคุณไม่เขียนโค้ดที่คมชัดและใช้ทรัพยากรที่มีอยู่อย่างมีประสิทธิภาพ คุณจะสร้างข้อขัดแย้งมากมายสำหรับโปรแกรมอื่นๆ

ตัวอย่างเช่น มีหลายวิธีในการโหลด Javascript สำเร็จรูปภายนอกใน WordPress สำหรับปลั๊กอินของคุณ

แต่ถ้าคุณไม่ปฏิบัติตามมาตรฐานที่เหมาะสม ปลั๊กอินที่เปิดใช้งานทั้งหมดอาจติดขัดได้ไม่ดี

บทความนี้มีไว้สำหรับนักพัฒนา WordPress ใหม่ที่ต้องการพัฒนาธีมและปลั๊กอินของ WordPress

ถ้าคุณไม่เขียนโค้ดอย่างถูกต้อง โค้ดของคุณจะไม่เป็นมืออาชีพและผลิตภัณฑ์ใดๆ ที่คุณทำ ไม่ว่าแนวคิดจะดีแค่ไหน คุณก็จะไม่มีวันได้รับการยอมรับ

ดังนั้นจึงเป็นการดีกว่าที่จะรู้ วิธีเพิ่ม JavaScript และสไตล์ใน WordPress อย่างเหมาะสม

ข้อผิดพลาดในการเพิ่ม JavaScript

พวกคุณบางคนอาจทราบแล้วว่า WordPress มีฟังก์ชันที่เรียกว่า wp_head ที่ช่วยให้คุณโหลดอะไรก็ได้ในส่วนหัวของเว็บไซต์

สิ่งที่คุณต้องทำคือเพิ่มโค้ดบรรทัดต่อไปนี้ในไฟล์สคริปต์ จากนั้นทุกอย่างจะปรากฏในส่วนหัว

add_action('wp_head', 'wpb_bad_script');
ฟังก์ชั่น wpb_bad_script () {
echo 'jQuery ไปที่นี่';
}

นี่เป็นทางลัดในการเพิ่มสิ่งต่างๆ แต่ไม่ใช่วิธีที่ดีที่สุด คุณต้องปฏิบัติตามมาตรฐานที่เหมาะสมโดยละเว้นทางลัด และนั่นคือประเด็นทั้งหมดของภาพประกอบนี้

ตัวอย่างเช่น คุณโหลด JQuery ด้วยตนเองในปลั๊กอินของคุณ และนักพัฒนารายอื่นก็โหลด JQuery เดียวกันด้วยตนเองหรือผ่านมาตรฐานที่เหมาะสม หากมีคนเปิดใช้งานปลั๊กอินทั้งสองของคุณ JQuery จะถูกโหลดสองครั้งในหน่วยความจำซึ่งเป็นการสิ้นเปลือง

นอกจากนี้ หาก JQuery โหลดแตกต่างกันในเวอร์ชัน ปลั๊กอินจะมีปัญหามากมายเนื่องจากข้อขัดแย้ง คุณจำเป็นต้องรู้ วิธีเพิ่ม JavaScript และสไตล์อย่างถูกต้องใน WordPress ก่อนเขียนโค้ดใดๆ

จะหลีกเลี่ยงข้อผิดพลาดดังกล่าวได้อย่างไร - แนวคิดของฟังก์ชันการเข้าคิว?

อย่างที่คุณอาจทราบแล้วว่าชุมชนนักพัฒนา WordPress เป็นชุมชนที่ใหญ่และแข็งแกร่ง มีนักพัฒนาหลายพันคนที่พัฒนาธีมและปลั๊กอินใหม่ทุกวัน

แต่สิ่งที่พวกเขากำลังทำเพื่อให้แน่ใจว่าจะไม่มีการขัดแย้งใดๆ กับวิธีการเข้ารหัสของกันและกันคือการใช้ฟังก์ชันสคริปต์เข้าคิว

นี่คือฟังก์ชันที่รับผิดชอบในการ เพิ่ม JavaScript และสไตล์ ใน WordPress อย่างเหมาะสม เพื่อไม่ให้เกิดความขัดแย้งและการบล็อกหน่วยความจำโดยไม่จำเป็น

ช่วยให้มั่นใจถึงวิธีการโหลด JavaScript และสไตล์ที่เป็นระบบ ฟังก์ชัน qp_enquque_function จะบอก Wordless ว่าเมื่อใดควรโหลด JavaScript และสไตล์เหล่านั้น ตำแหน่งที่จะโหลด JavaScript และโดยเฉพาะอย่างยิ่งภายใต้เงื่อนไขใด

ด้วยความช่วยเหลือเหล่านี้ คุณไม่จำเป็นต้องโหลด JQuery และอะไรทำนองนั้นด้วยตนเอง และด้วยเหตุนี้ จะไม่มีเงื่อนไขของการปิดกั้นหน่วยความจำเนื่องจากการโหลดไฟล์เดียวกันครั้งแล้วครั้งเล่า

เหตุผลก็คือฟังก์ชัน Enqueue ให้คุณใช้ไลบรารีในตัวที่มาพร้อมกับ WordPress เองได้ นอกจากนี้ยังช่วยลดภาระในการโหลดหน้าเว็บที่ช้าเนื่องจากไม่มีการโหลด JavaScript ด้วยตนเอง

ขั้นตอนในการ เพิ่ม JavaScript และสไตล์อย่างเหมาะสมใน WordPress-

1. จัดคิวสคริปต์ใน WordPress

โค้ดต่อไปนี้จะโหลดกลุ่ม JavaScript ในตัวที่มาพร้อมกับ WordPress คุณต้องวางบรรทัดเหล่านี้ในไฟล์ปลั๊กอินเมื่อคุณสร้างปลั๊กอินหรือต้องวางไว้ใน functions.php หากคุณกำลังสร้างธีม

ฟังก์ชั่น wpb_adding_scripts () {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', จริง);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

คำอธิบายของรหัส

สคริปต์ถูกลงทะเบียนผ่านฟังก์ชัน wp_register_script() ซึ่งมีห้าพารามิเตอร์ที่แตกต่างกัน

1. $handle – เป็นชื่อเฉพาะสำหรับสคริปต์ นี่คือ 'my_amazing_script'

2. $src – กำหนดตำแหน่งของสคริปต์ของคุณ ฟังก์ชันไลบรารี plugins_url ดึง URL ที่เหมาะสมของโฟลเดอร์ปลั๊กอินของคุณ เมื่อดึงข้อมูลแล้ว จะเริ่มค้นหาไฟล์ amazing_script.js ข้างใน

3. $deps – กำหนดการอ้างอิง คุณต้องเพิ่มเข้าไปเมื่อคุณขอให้ WordPress โหลดไลบรารีสคริปต์ เช่น Jquery

หากสคริปต์ถูกโหลดในหน่วยความจำแล้ว สคริปต์จะไม่ถูกโหลดอีก และการโหลดใหม่จะเกิดขึ้น สิ่งนี้ทำให้แน่ใจได้ว่าไม่มีข้อขัดแย้ง ไม่มีการบล็อกหน่วยความจำ และไม่เสียเวลา

4. $ver – กำหนดหมายเลขเวอร์ชันของสคริปต์ มันไม่ได้บังคับ

5. $in_footer – ใช้สำหรับโหลดสคริปต์ในส่วนท้าย หากคุณต้องการโหลดสคริปต์ในส่วนหัว คุณควรเก็บไว้เป็นเท็จ

เมื่อกำหนดทุกอย่างแล้ว คุณเพียงแค่เรียกใช้สคริปต์ด้วย wp_enqueue_script()

2. จัดคิวสไตล์ใน WordPress

เช่นเดียวกับ JavaScript คุณต้องเข้าคิวสไตล์ชีต ใช้โค้ดต่อไปนี้ในไฟล์ปลั๊กอินหรือไฟล์ functions.php เพื่อสร้างธีม

ฟังก์ชั่น wpb_adding_styles () {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); 

โค้ดด้านบนนี้เหมาะสมในขณะที่คุณกำลังสร้างปลั๊กอิน เมื่อคุณสร้างธีม คุณต้องเปลี่ยน plugins_url() เป็น get_template_directory_uri() สิ่งที่เหลืออยู่จะยังคงเหมือนเดิมทุกประการ

ฟังก์ชั่น wpb_adding_scripts () {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', จริง);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); 

หากคุณกำลังสร้างธีมลูก คุณจะต้องใช้ get_stylesheet_direcoy_uri() แทน get_template_directory_uri()

นี่เป็นวิธีมาตรฐานในการ เพิ่ม JavaScript และสไตล์ใน WordPress อย่างเหมาะสม

หากปลั๊กอินหรือธีมของคุณประสบปัญหาใดๆ คุณควรแก้ไขโค้ดของสิ่งเหล่านั้นด้วยบรรทัดโค้ดที่กล่าวถึงข้างต้น และอาจแก้ไขข้อบกพร่องได้

ปฏิบัติตามมาตรฐานของการเขียนโค้ดตามทั่วโลกเสมอเพื่อให้เป็นข้อมูลเดียวกันกับนักพัฒนาที่ประสบความสำเร็จคนอื่นๆ