WP Enqueue คืออะไรและคุณใช้งานอย่างไร

เผยแพร่แล้ว: 2017-10-28

เมื่อคุณเรียนรู้ HTML เป็นครั้งแรก วิธีเดียวที่คุณจะรู้วิธีแทรกการโต้ตอบแบบใดก็ได้คือการใช้แท็ก สคริปต์ ในส่วนหัวหรือส่วนท้ายของหน้าเพื่อกำหนดประเภทและแหล่งที่มาของไฟล์ JavaScript ภายนอก (หรือถ้าคุณเพิ่งจะเรียนรู้ จริงๆ ฟังก์ชัน JS ทั้งหมดระหว่างแท็ก สคริปต์ อยู่ในตัวมันเอง ซึ่งก็ดีสำหรับการเรียนรู้ แต่มันค่อนข้างแย่เมื่อคุณเข้าสู่การพัฒนาขั้นสูงของ WordPress ป้อนฟังก์ชัน enqueue

เมื่อคุณย้ายผ่านเว็บไซต์หน้าเดียวที่เรียบง่าย แนวทางปฏิบัติสำหรับผู้เริ่มต้นใช้งานเหล่านี้สามารถสร้างสถานการณ์ที่เหนียวแน่นได้ เมื่อคุณเริ่มเพิ่ม JavaScript มากขึ้นเรื่อยๆ เว็บไซต์ของคุณก็จะช้าลงเรื่อยๆ การอัปเดตใช้เวลานานขึ้น ในที่สุด คุณก็ได้สร้าง JavaScript-getti กองใหญ่ และไม่ว่าคุณจะพยายามแค่ไหน บะหมี่กองนั้นก็ไม่พันกัน

โชคดีที่คุณสามารถใช้ฟังก์ชัน enqueue ใน WordPress เพื่อเพิ่มสไตล์และสคริปต์ที่ CMS ดูแลให้คุณ ความยุ่งเหยิงทั้งหมดจะได้รับการจัดการสำหรับคุณ แม้ว่าจะไม่ง่ายเหมือนการวางสคริปต์หรือสไตล์ที่คุณต้องการโดยตรงในส่วนหัวหรือส่วนท้ายของแต่ละหน้า แต่ก็เป็นวิธีที่เหมาะสมในการจัดการ WordPress ไม่ได้มีความคิดเห็นที่เฉียบขาด มีแนวทางปฏิบัติที่ดีที่สุดมากมายที่คุณควรรู้

และ wp_enqueue_scripts อยู่ในระดับแนวหน้าของแนวปฏิบัติเหล่านั้น

เรื่องใหญ่คืออะไร?

เหตุผลหลักที่คุณต้องการใช้ wp_enqueue คือการทำให้ไซต์ของคุณทำงานได้อย่างราบรื่นและรวดเร็ว ความเร็วของหน้ามีความสำคัญ และการใช้สคริปต์และรูปแบบเดียวกันซ้ำแล้วซ้ำเล่าไม่ได้ช่วยอะไร เลย

โชคดีที่ wp_enqueue เป็นตัวอย่างของการเขียนโปรแกรมเชิงฟังก์ชัน ทั้งหมดนั้นหมายความว่าคุณเขียนโค้ดเพียงชิ้นเดียวเพื่อดำเนินการ (ข้อมูลโค้ด JavaScript ของคุณ) และคุณใช้ wp_enqueue เพื่อเรียกมันแทนที่จะต้องเขียนใหม่/วางสิ่งทั้งหมดทุกครั้งที่คุณต้องการ

นั่นคือ สุดยอด.

ยอดเยี่ยมยิ่งขึ้นไปอีก การใช้วิธีการ enqueue ทำให้ WordPress แทรกแท็ก _script_ ลงในส่วนหัวและส่วนท้ายของแท็กโดยอัตโนมัติ โหลดได้โดยไม่ต้องป้อนข้อมูลในแต่ละหน้าแยกกัน

WP Enqueue Syntax และ Params

การจัดคิวสคริปต์ไม่ใช่เรื่องยากจริงๆ หากคุณมีความเชี่ยวชาญในการทำงานกับ JavaScript ตั้งแต่แรก ฟังก์ชัน PHP ที่คุณใช้สำหรับการจัดคิวจะเป็นเรื่องง่าย

ในแท็ก สคริปต์ ทั่วไป คุณจะนำเข้าไฟล์ .js ภายนอกโดยตรงหรือวางโค้ดขนาดยาวทั้งหมดระหว่างแท็กเอง (นี่คือสิ่งที่คุณกำลังทำหากคุณวางบางสิ่งลงในโมดูลโค้ด Divi หรือวิดเจ็ต WP Custom HTML หรือ Text)

คุณเพียงแค่ต้องรู้พารามิเตอร์และไวยากรณ์พื้นฐานบางประการ

Codex ให้สิ่งนี้เป็นรหัสเข้าคิวฐาน: 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

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

  • wp_enqueue_script() เป็นฟังก์ชันทั้งหมดที่จะวางโค้ดทั้งหมดไว้ในหน้าที่ไป
  • $handle เป็นชื่อเฉพาะสำหรับตัวสคริปต์เอง
  • $src แสดงถึง URL ของไฟล์ .js จริงที่คุณกำลังเข้าคิว
  • $deps เป็น $handle ของการพึ่งพาใด ๆ ที่สิ่งนี้ต้องการ
  • $ver จะเป็นหมายเลขเวอร์ชัน หากไม่ได้ระบุ คุณจะได้รับเวอร์ชันการติดตั้ง WP ที่เพิ่มโดยอัตโนมัติ
  • $in_footer หรือ $in_header บอก WordPress ว่าจะวางสคริปต์ของคุณไว้ที่ใด

เอกสารฉบับสมบูรณ์สำหรับการจัดคิวสคริปต์สามารถดูได้ใน Codex

โปรดทราบ นักเรียน: การลงทะเบียน WP เริ่มแล้ว!

นอกจาก _wp_enqueue__ แล้ว WP ยังมีวิธีการที่มีประโยชน์ที่เรียกว่า _wp_register__ ด้วย ทั้งสองวิธีใช้พารามิเตอร์และไวยากรณ์เดียวกัน ดังนั้นคุณจะได้รับข้อตกลงสองต่อหนึ่งกับคู่ของพวกเขาจริงๆ โดยพื้นฐานแล้ว การลงทะเบียนสคริปต์เหมือนกับการตั้งชื่อฟังก์ชันใน JavaScript

แม้ว่าจะไม่จำเป็น แต่การลงทะเบียนสคริปต์ของคุณจะทำให้ชีวิตของคุณง่ายขึ้นมาก เพราะคุณไม่จำเป็นต้องประกาศว่าสคริปต์เหล่านี้เป็นการพึ่งพาในภายหลัง พวกเขาจะลงทะเบียนแล้ว ดังนั้น…_wp_register__ เมื่อลงทะเบียนสคริปต์แล้ว คุณสามารถโทรกลับได้โดย $handle ดังที่คุณจะเห็นในตัวอย่างด้านล่าง

คุณจะลงทะเบียนรหัสของคุณดังนี้: 

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

จากนั้นเมื่อคุณต้องการอีกครั้ง คุณสามารถโทรกลับได้ดังนี้:

wp_enqueue_script( 'jquery' );

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

คุณสามารถอ่านทั้งหมดเกี่ยวกับวิธีการใน Codex

นอกจากนี้ ผู้เขียนปลั๊กอินจะต้องจัดคิวสคริปต์หากต้องการรวมไว้ใน repo ของ WordPress.org ดังนั้นหากสิ่งนั้นอยู่บนจานของคุณ…ไปที่คิวดีกว่า

เอามารวมกัน

การใช้รหัสเป็นเรื่องง่าย เพียงวางข้อมูลโค้ดด้านล่างลงใน functions.php ของคุณ และ WordPress จัดการส่วนที่เหลือ ฉันหมายความว่า นี่เป็นตัวอย่างพื้นฐานจริงๆ ในการเรียก jQuery แต่คุณสามารถดูได้ว่าเนื้อหาเหล่านี้เล่นด้วยกันได้อย่างไร

ปกติแล้วคุณจะใช้สิ่งที่มีลักษณะดังนี้: 

<script type="text/javascript" src="jquery.js"></script>

เมื่อคุณเรียนรู้วิธีใช้ enqueue_scripts_ แล้ว คุณจะเห็นสิ่งนี้เพิ่มเติม: 

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

ตอนนี้ ให้สังเกตในโค้ดด้านบนว่าใช้ ฟังก์ชัน add_scripts()_ ซึ่งเป็นส่วนหนึ่งของ WordPress เพื่อสรุปลำดับของขั้นตอนต่อไป ขั้นแรก ฟังก์ชัน wp_register_ รับรายละเอียดทั้งหมดที่ระบุและวางสคริปต์ไว้ในส่วนท้ายของหน้า จากนั้นใช้ wp_enqueue เพื่อเรียกมันในที่สุดเมื่อตั้งค่าทุกอย่างแล้ว

ห่อ

นั่นคือทั้งหมดที่มีให้ นั่นไม่เป็นความจริง การเข้าคิวเป็นส่วนที่ฝังแน่นของ WP แต่สิ่งเหล่านี้เป็นพื้นฐานที่ทำให้คุณใช้งาน WordPress ได้มากกว่าที่คุณเคยทำมาก่อน

พื้นฐานที่เราทุกคนเรียนรู้เกี่ยวกับการใส่สคริปต์เมื่อเราเริ่มการพัฒนาเว็บยังคงใช้ได้ แต่ก็ไม่ใช่วิธีที่ดีที่สุดในการทำสิ่งต่างๆ เสมอไป ส่วนหนึ่งของความสวยงามของ WordPress ที่สร้างขึ้นบน PHP ก็คือ คุณสามารถนำตรรกะประเภทนี้มาใช้กับงานของคุณได้ ในขณะที่ยังคงรักษาโครงสร้างพื้นฐานและเวิร์กโฟลว์เดิมไว้เหมือนเดิม

ภาพขนาดย่อของบทความโดย hanss / shutterstock.com