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

คุณต้องการเรียนรู้วิธีเพิ่ม JavaScripts และ CSS สไตล์ชีทใน WordPress อย่างเหมาะสมหรือไม่? ผู้ใช้งาน DIY หลายคนมักทำผิดพลาดในการเรียกสคริปต์และสไตล์ชีทโดยตรงในปลั๊กอินและธีม ในบทความนี้เราจะแสดงวิธีเพิ่ม JavaScripts และสไตล์ชีทใน WordPress อย่างถูกต้อง สิ่งนี้จะเป็นประโยชน์อย่างยิ่งสำหรับผู้ที่เพิ่งเริ่มเรียนรู้เกี่ยวกับธีม WordPress และการพัฒนาปลั๊กอิน.


เพิ่ม JavaScripts และสไตล์ใน WordPress อย่างถูกต้อง

ข้อผิดพลาดทั่วไปเมื่อเพิ่มสคริปต์และสไตล์ชีทใน WordPress

ปลั๊กอิน WordPress และนักพัฒนาชุดรูปแบบใหม่หลายคนทำผิดพลาดในการเพิ่มสคริปต์หรืออินไลน์ CSS ลงในปลั๊กอินและธีมโดยตรง.

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

<?PHP
add_action (‘wp_head’, ‘wpb_bad_script’);
ฟังก์ชั่น wpb_bad_script () {
echo ‘jQuery ไปที่นี่’;
}
?>

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

ตัวอย่างเช่นหากคุณโหลด jQuery ด้วยตนเองและปลั๊กอินอื่นโหลด jQuery ผ่านวิธีการที่เหมาะสมคุณจะต้องโหลด jQuery สองครั้ง หากโหลดทุกหน้าสิ่งนี้จะส่งผลเสียต่อความเร็วและประสิทธิภาพของ WordPress.

อาจเป็นไปได้ว่าทั้งสองรุ่นต่างกันซึ่งอาจทำให้เกิดความขัดแย้งได้.

ดังที่ได้กล่าวมาลองดูวิธีการเพิ่มสคริปต์และสไตล์ชีทที่ถูกต้อง.

ทำไมต้องเข้าคิวสคริปต์และสไตล์ใน WordPress?

WordPress มีชุมชนนักพัฒนาที่แข็งแกร่ง ผู้คนหลายพันคนจากทั่วโลกพัฒนาชุดรูปแบบและปลั๊กอินสำหรับ WordPress.

เพื่อให้แน่ใจว่าทุกอย่างทำงานได้อย่างถูกต้องและไม่มีใครเหยียบบนนิ้วเท้าอื่น WordPress มีระบบจัดคิว ระบบนี้มีวิธีโหลดโปรแกรม JavaScript และ CSS สไตล์ชีท.

ด้วยการใช้ฟังก์ชั่น wp_enqueue_script และ wp_enqueue_style คุณจะบอก WordPress เมื่อใดที่จะโหลดไฟล์ตำแหน่งที่จะโหลดและสิ่งที่อ้างอิง.

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

วิธีการเข้าคิวสคริปต์อย่างเหมาะสมใน WordPress?

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

?PHP
ฟังก์ชั่น wpb_adding_scripts () {

wp_register_script (‘my_amazing_script’, plugins_url (‘amazing_script.js’, __FILE__), อาร์เรย์ (‘jquery’), ‘1.1’, จริง);

wp_enqueue_script ( ‘my_amazing_script’);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’);
?>

คำอธิบาย:

เราเริ่มต้นด้วยการลงทะเบียนสคริปต์ของเราผ่านฟังก์ชั่น wp_register_script () ฟังก์ชั่นนี้ยอมรับพารามิเตอร์ 5 ตัว:

  • $ จับ – หมายเลขอ้างอิงเป็นชื่อเฉพาะของสคริปต์ของคุณ เราเรียกว่า“ my_amazing_script”
  • $ src – src เป็นที่ตั้งของสคริปต์ของคุณ เราใช้ฟังก์ชัน plugins_url เพื่อรับ URL ที่ถูกต้องของโฟลเดอร์ปลั๊กอินของเรา เมื่อ WordPress พบสิ่งนั้นแล้วมันจะค้นหาชื่อไฟล์ amazing_script.js ของเราในโฟลเดอร์นั้น.
  • $ deps – deps สำหรับการอ้างอิง เนื่องจากสคริปต์ของเราใช้ jQuery เราได้เพิ่ม jQuery ในพื้นที่การพึ่งพา WordPress จะโหลด jQuery โดยอัตโนมัติหากยังไม่ได้โหลดบนเว็บไซต์.
  • $ เวอร์ชั่น – นี่คือหมายเลขเวอร์ชันของสคริปต์ของเรา ไม่จำเป็นต้องใช้พารามิเตอร์นี้.
  • $ in_footer – เราต้องการโหลดสคริปต์ของเราในส่วนท้ายดังนั้นเราจึงตั้งค่าเป็นจริง หากคุณต้องการโหลดสคริปต์ในส่วนหัวแล้วคุณจะทำให้มันเป็นเท็จ.

หลังจากระบุพารามิเตอร์ทั้งหมดใน wp_register_script เราสามารถเรียกใช้สคริปต์ใน wp_enqueue_script () ซึ่งทำให้ทุกอย่างเกิดขึ้น.

ขั้นตอนสุดท้ายคือการใช้ตะขอการกระทำ wp_enqueue_scripts เพื่อโหลดสคริปต์จริง เนื่องจากนี่คือโค้ดตัวอย่างเราได้เพิ่มข้อมูลนั้นไว้ที่ด้านล่างทุกอย่าง.

หากคุณกำลังเพิ่มสิ่งนี้ลงในธีมหรือปลั๊กอินของคุณคุณสามารถวางเบ็ดการกระทำนี้ที่จำเป็นต้องใช้สคริปต์จริง สิ่งนี้ช่วยให้คุณลดขนาดหน่วยความจำของปลั๊กอินของคุณ.

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

จัดวางสไตล์อย่างเหมาะสมใน WordPress

เช่นเดียวกับสคริปต์คุณสามารถจัดคิวสไตล์ของคุณ ดูตัวอย่างด้านล่าง:

<?PHP
ฟังก์ชั่น wpb_adding_styles () {
wp_register_style (‘my_stylesheet’, plugins_url (‘my-stylesheet.css’, __FILE__));
wp_enqueue_style ( ‘my_stylesheet’);
}
add_action (‘wp_enqueue_scripts’, ‘wpb_adding_styles’);
?>

แทนที่จะใช้ wp_enqueue_script เรากำลังใช้ wp_enqueue_style เพื่อเพิ่มสไตล์ชีทของเรา.

โปรดสังเกตว่าเราได้ใช้ตะขอการกระทำ wp_enqueue_scripts สำหรับทั้งสไตล์และสคริปต์ ฟังก์ชั่นนี้ใช้ได้กับทั้งคู่.

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

อย่างไรก็ตามหากคุณใช้ฟังก์ชันสคริปต์เข้าคิวในธีมของคุณให้ใช้เพียง get_template_directory_uri () แทน หากคุณทำงานกับธีมลูกให้ใช้ get_stylesheet_directory_uri ().

ด้านล่างนี้คือตัวอย่างรหัส:

<?PHP

ฟังก์ชั่น wpb_adding_scripts () {
wp_register_script (‘my_amazing_script’, get_template_directory_uri (). ‘/js/amazing_script.js’, อาร์เรย์ (‘jquery’), ‘1.1’, จริง);
wp_enqueue_script ( ‘my_amazing_script’);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’);
?>

เราหวังว่าบทความนี้จะช่วยให้คุณเรียนรู้วิธีเพิ่ม jacvascript และสไตล์ใน WordPress อย่างถูกต้อง คุณอาจต้องการศึกษาซอร์สโค้ดของปลั๊กอิน WordPress อันดับต้น ๆ สำหรับตัวอย่างโค้ดจริง ๆ.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map