JavaScript แบบอินไลน์ใน WordPress Child Themes

หากคุณกำลังทำงานกับธีมลูกใน WordPress คุณอาจต้องการใช้ JavaScript แบบอินไลน์เพื่อปรับแต่ง ซึ่งสามารถทำได้โดยการเพิ่มอินไลน์ JavaScript ลงในไฟล์ functions.php ของธีมลูกของคุณ เมื่อเพิ่ม JavaScript แบบอินไลน์ให้กับธีมย่อยของ WordPress มีบางสิ่งที่ต้องคำนึงถึง ขั้นแรก ตรวจสอบให้แน่ใจว่าได้เพิ่มอินไลน์ JavaScript ภายในแท็กในไฟล์ functions.php ของคุณ ถัดไป คุณจะต้องจัดคิว JavaScript แบบอินไลน์ในธีมลูกของคุณ สามารถทำได้โดยการเพิ่มโค้ดต่อไปนี้ลงในไฟล์ functions.php ของธีมลูกของคุณ: function my_inline_script () { wp_enqueue_script( 'my-inline-script', get_stylesheet_directory_uri() . ' /js/my-inline-script.js', array(), '1.0', จริง ); } add_action( 'wp_enqueue_scripts', 'my_inline_script' ); เมื่อคุณเพิ่มโค้ดลงในไฟล์ functions.php ของธีมลูกแล้ว คุณจะต้องสร้างไฟล์ใหม่ชื่อ my-inline-script.js และเพิ่มลงในไดเร็กทอรี /js/ ของธีมลูก ภายในไฟล์นี้ คุณสามารถเพิ่ม JavaScript แบบอินไลน์ของคุณได้

คุณสามารถฝัง Javascript ใน WordPress ได้หรือไม่?

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

ปลั๊กอิน WordPress และ Theme Hooks สำหรับการโหลดสคริปต์

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

คุณเพิ่มอินไลน์ในสคริปต์ WordPress ได้อย่างไร?

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

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

สคริปต์อินไลน์ใน WordPress

ควรติดตั้งสคริปต์อินไลน์ PHP ใน WordPress โดยใช้คำแนะนำในการติดตั้งสคริปต์อินไลน์ของ WordPress ต่อไปนี้เป็นวิธีการกำหนดค่าส่วนหัวของ WP_print_scripts: *INCLUDE รหัสใด ๆ WordPress_localize_script() วิธีการช่วยให้คุณสามารถเพิ่ม ตัวแปร JS ใด ๆ ให้กับสคริปต์ที่ลงทะเบียน ตัวเลือกนี้ช่วยให้คุณเพิ่มโค้ด JS ใดๆ ลงในสคริปต์ที่คุณกำลังสร้าง การใช้ JavaScript แบบอินไลน์นั้นง่ายพอๆ กับการใช้แท็ก Script ภายในเนื้อหา HTML แต่แทนที่จะระบุแหล่งที่มา (src=”…”) ของไฟล์ JavaScript ในแท็ก Script เราต้องกำหนดโค้ด JavaScript ทั้งหมดภายในแท็ก Script . สคริปต์อินไลน์เป็นสคริปต์ที่ไม่มี asrc ซึ่งเป็นแท็กสคริปต์ประเภทหนึ่ง สคริปต์ถูกส่งเร็วขึ้นตามค่าเริ่มต้น เนื่องจากเบราว์เซอร์ไม่จำเป็นต้องร้องขอจากเซิร์ฟเวอร์

เราสามารถเพิ่ม Inline Javascript ได้หรือไม่?

URL สามารถเป็น JavaScript แบบอินไลน์ได้โดยใช้แท็ก Script ในส่วนเนื้อหาของ HTML แต่แทนที่จะระบุแหล่งที่มาของไฟล์ JavaScript ในแท็ก Script เราต้องประกาศ โค้ด JavaScript ทั้งหมด ภายใน URL

ฟังก์ชันอินไลน์ถูกกำหนดให้เป็นตัวแปรที่มีฟังก์ชันอินไลน์ ฟังก์ชันนี้ไม่เหมือนกับฟังก์ชันปกติ ถูกกำหนดไว้ในไฟล์แยกต่างหากและเข้าถึงได้เมื่อมีการเรียกเท่านั้น เมื่อคุณต้องการรวมฟังก์ชันเป็นส่วนหนึ่งของโค้ดของคุณโดยไม่รวมคำจำกัดความของฟังก์ชันทั้งหมด ฟังก์ชัน อินไลน์ เป็นตัวเลือกที่ดี ในการสร้างฟังก์ชันแบบอินไลน์ คีย์เวิร์ดของฟังก์ชันจะต้องตามด้วยชื่อฟังก์ชัน ไม่จำเป็นสำหรับข้อความประเภทนี้ คุณสามารถรวมไว้ได้หากต้องการ ในตัวอย่างต่อไปนี้ ฉันจะแสดงวิธีสร้างฟังก์ชันอินไลน์ที่เรียกว่า myFunction ชื่อของฟังก์ชันคือ myFunction(); มันคือชื่อของฟังก์ชัน ในตัวอย่างก่อนหน้านี้ myFunction ถูกกำหนดให้เป็นฟังก์ชันแบบอินไลน์ ฟังก์ชันอินไลน์สามารถเรียกได้จากภายในฟังก์ชันอื่น ฟังก์ชัน myFunction2() ดังแสดงในรูปที่ 1 function('myFunction')); ฟังก์ชันของฉัน MyFunction2 ในตัวอย่างนี้เป็นฟังก์ชันที่อ้างถึง myFunction

Wp_add_inline_script

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

เพิ่ม Inline Script Html

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

ข้อดีและข้อเสียของการเขียนสคริปต์แบบอินไลน์

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