วิธีที่มีประสิทธิภาพที่สุดในการเพิ่มอินไลน์สคริปต์ใน WordPress

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

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

การเพิ่มผ่าน Wp_print_scripts

หากคุณต้องการเพิ่มข้อความอินไลน์ของ WordPress ฟังก์ชัน WordPress wp_print_scripts หรือ/และ admin_print_scripts คือคำตอบของคุณ WordPress wp_print_scripts สามารถแสดงแท็กข้อความในส่วนหัวของเอกสาร ซึ่งโดยทั่วไปจะทำได้เมื่อรวมไฟล์ JS หรือ CSS ฟังก์ชัน WordPress นี้จะช่วยให้คุณทำให้ไซต์ของคุณมีการโต้ตอบมากขึ้นหรือเพิ่มฟังก์ชันการทำงานใหม่ เช่นเดียวกับฟังก์ชัน WordPress ใดๆ มีกฎง่ายๆ บางประการที่ต้องปฏิบัติตามก่อนใช้งานบนเว็บไซต์ของคุณ

ฟังก์ชันนี้สร้างตัวแปรสามตัวตามตัวเลือกปลั๊กอินของ WordPress และส่งออกไปที่ส่วนหน้า (ส่วนหัว) โดยใช้เบ็ด admin_print_scripts ในการเพิ่มอักขระแบบอินไลน์ลงในพื้นที่ Admin คุณยังสามารถแทนที่ wp_print_scripts ด้วยฟังก์ชัน admin_print_scripts และเรียกมันว่า a day

เมื่อติดตั้ง WordPress เป็นครั้งแรก จะมีข้อความจำนวนมากที่เพิ่มลงในเว็บไซต์โดยอัตโนมัติ ซึ่งอาจส่งผลให้เวลาในการโหลดและการใช้งาน CPU บนเซิร์ฟเวอร์ของคุณเพิ่มขึ้น วิธีหนึ่งในการแก้ปัญหานี้คือการใช้ฟังก์ชัน wp_print_scripts ดังนั้นคุณจึงโหลดข้อความเมื่อจำเป็นหรือต้องการเท่านั้น ที่กล่าวว่า มาดูข้อดีและข้อเสียของการใช้ฟังก์ชัน wp_print_script เพื่อเพิ่มอักขระแบบอินไลน์ในโพสต์ WordPress ของคุณ:

ข้อดี:

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

จุดด้อย:

• ไม่มีวิธีเฉพาะเจาะจงในการเชื่อมโยงรหัสที่คุณเพิ่มเข้ากับสคริปต์ที่ลงทะเบียน
• ในกรณีส่วนใหญ่ โค้ดเอาต์พุตบนปัจจัยต่างๆ อาจไม่ใช่วิธีที่แท้จริงและสม่ำเสมอในการควบคุมตำแหน่งโค้ดเอาต์พุต อย่างไรก็ตาม คุณสามารถใช้พารามิเตอร์ <priority> ใต้ <add_action> เพื่อควบคุมตำแหน่งของโค้ดที่คุณเพิ่มได้เสมอ

ใช้ฟังก์ชัน wp_add_inline_script()

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

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

ข้อดี:

• ฟังก์ชัน wp_add_inline_script() เป็นวิธีที่มีคุณค่าในการเพิ่มอักขระแบบอินไลน์ในบล็อก WordPress ของคุณ
• อาจเป็นวิธีที่ง่ายและสะดวกสำหรับนักพัฒนาในการเพิ่มโค้ด JS โดยไม่ต้องเปลี่ยนธีม WordPress หรือไฟล์ปลั๊กอิน หรือแก้ไขไฟล์เทมเพลต header.php
• ซึ่งจะเป็นประโยชน์สำหรับการเพิ่มสคริปต์ เช่น โค้ด Google Analytics ช่วยให้คุณไม่ต้องแก้ไขไฟล์ header.php ทุกครั้งที่มีการอัปเดตคุณลักษณะหรือการตั้งค่าของ Google Analytics

จุดด้อย:

• ข้อเสียเปรียบเพียงอย่างเดียวของฟังก์ชัน wp_add_inline_script() คือใช้งานได้เฉพาะในเวอร์ชัน 4.5 WordPress เท่านั้น

ใช้ฟังก์ชัน wp_localize_script()

ฟังก์ชัน wp_localize_script() เป็นโปรแกรมอรรถประโยชน์ WordPress ที่เป็นประโยชน์ในการเพิ่มอักขระแบบอินไลน์ให้กับแต่ละหน้าในเว็บไซต์ WordPress ของคุณ เหมาะอย่างยิ่งหากคุณต้องการฟังก์ชันการทำงานที่รวดเร็วและชั่วคราวบนไซต์ของคุณ เช่น งานกิจกรรมหรือโปรโมชัน ฟังก์ชันนี้ยอมรับจำนวนตัวแปรของอาร์กิวเมนต์และแสดงรายการสตริง JS ที่เพิ่มในส่วนหัวของเอกสาร การทำเช่นนี้จะมีประโยชน์ ตัวอย่างเช่น คุณกำลังใช้ jQuery และต้องการโค้ดของสคริปต์เฉพาะในบางหน้าเท่านั้น

Wp_localize_script() เข้าคิวไฟล์ JS ของคุณและให้ ID/handle ของ "shapeSpace_script" ซึ่งกำหนดอาร์เรย์ที่เชื่อมโยงที่มีตัวแปรของคุณ สุดท้ายนี้ ตัวแปร JS เหล่านี้จะถูกส่งต่อไปยัง wp_localize_script() เพื่อรวมเข้ากับ shapeSpace_script ที่ลงทะเบียนไว้ ส่งผลให้คุณสามารถใช้ตัวแปร JS เช่น shapeSpace.varl และอื่นๆ ฟังก์ชันนี้ใช้สำหรับการแปลตัวแปร JS สำหรับการแปลภาษาและการทำให้เป็นสากล อย่างไรก็ตาม นักพัฒนา WordPress ส่วนใหญ่ใช้เป็นวิธีทั่วไปในการเพิ่มอักขระแบบอินไลน์ในเว็บไซต์ของตน

ข้อดี:

• Wp_localize_script() เปิดใช้งานการเชื่อมโยง "read:require" กับสคริปต์ที่ลงทะเบียนที่มีอยู่ของคุณ ซึ่งหมายความว่ามีวิธีที่ยอดเยี่ยมและสม่ำเสมอในการควบคุมตำแหน่งสัมพัทธ์ของเอาต์พุตข้อความที่กำหนดเองของเว็บไซต์ของคุณ

จุดด้อย:

• ข้อเสียเปรียบเพียงอย่างเดียวคือคุณสามารถเพิ่มได้เฉพาะตัวแปร JS ( var = 'value' ) ดังนั้นจึงเป็นไปไม่ได้ที่จะเพิ่มสคริปต์อินไลน์อื่นๆ เช่น ฟังก์ชัน เงื่อนไข สมการ และอื่นๆ โดยใช้ wp_localize_script()

ใช้ทางเลือกสำรอง

ดังที่ได้กล่าวไว้ก่อนหน้านี้ วิธีการเฉพาะ เช่น wp_add_inline_script() มีให้บริการตั้งแต่เวอร์ชัน 4.5 WordPress ขึ้นไปเท่านั้น อย่างไรก็ตาม เมื่อรวมทุกอย่างเข้าด้วยกัน คุณสามารถสร้างวิธีการป้องกันข้อผิดพลาดในการเพิ่มอักขระในบรรทัดไปยังไฟล์ WordPress ของคุณได้ ไม่ว่าคุณจะใช้ WordPress เวอร์ชันใดก็ตาม วิธีที่มีประสิทธิภาพที่สุดในการทำเช่นนี้คือผ่านสามฟังก์ชันในส่วนหัว (ส่วนหน้า) โพสต์ปลั๊กอิน

สิ่งสำคัญอันดับแรกที่ต้องทำคือจัดคิวไฟล์ JS ของคุณและเรียกใช้ฟังก์ชันต่อไปนี้เพื่อเพิ่มบรรทัดแบบอินไลน์ผ่านฟังก์ชัน wp_add_inline_script() ฟังก์ชันที่สามคือทางเลือกที่เก่ากว่าเวอร์ชัน 4.5 สิ่งนี้จะใช้ได้กับ WordPress 4.5 และเวอร์ชันพิเศษอื่นๆ อย่างไม่ต้องสงสัย นี่คือที่ที่เวทมนตร์ที่แท้จริงเกิดขึ้น คุณสามารถใช้วิธีสำรองเพื่อให้งานของคุณเสร็จสิ้นบน WordPress รุ่นที่คุณเลือกกลับไปเป็น 2.1 หรืออะไรก็ได้

ข้อดี:

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

จุดด้อย:

• เมื่อสคริปต์ล้มเหลว ผู้ใช้จะเห็นพื้นที่ว่างแทนโค้ดในบางกรณี นี้อาจดูเหมือนไม่ใช่เรื่องใหญ่ แต่เป็นสิ่งสำคัญที่ควรทราบในฐานะนักพัฒนา WordPress

สรุปการเพิ่มอินไลน์สคริปต์ใน WordPress

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

• wp_add_inline_script() อนุญาตให้คุณเพิ่มโค้ด JS ใด ๆ ให้กับสคริปต์ที่ลงทะเบียน
• wp_print_scripts หรือ admin_print_scripts อนุญาตให้คุณติดตั้งโค้ดใด ๆ ที่ส่วนหน้าหรือส่วนหัว

• wp_localize_script() ยังอนุญาตให้คุณเพิ่มตัวแปร JS ให้กับสคริปต์ที่ลงทะเบียนใดๆ
• Fallback ช่วยให้คุณสร้างเทคนิคที่สมบูรณ์ซึ่งทำงานได้อย่างแม่นยำกับ WordPress ทุกรุ่น

หมายเหตุ: หากคุณต้องการเพิ่มสไตล์อินไลน์/CSS แทน JavaScript WordPress มีชุดฟังก์ชัน "เพิ่มสไตล์" ที่คล้ายกับที่ใช้เพื่อเพิ่มสคริปต์ ตัวอย่างเช่น ตรวจสอบ wp_print_styles และ wp_add_inline_styles

บทสรุป

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

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

ชีวประวัติของผู้แต่ง:

Arthur เป็นผู้เชี่ยวชาญด้านการตลาดดิจิทัลและบล็อกเกอร์ธุรกิจ เขาพัฒนาสตาร์ทอัพที่น่าสนใจผ่านโซเชียลมีเดียต่างๆ และแบ่งปันประสบการณ์กับลูกค้าเพื่อส่งเสริมธุรกิจของพวกเขาให้ดียิ่งขึ้น ในเวลาว่าง Arthur เรียนภาษาญี่ปุ่นและเขียนบทความเกี่ยวกับแนวโน้มการเปลี่ยนแปลงทางดิจิทัล