วิธีเพิ่ม JavaScript ใน WordPress

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

JavaScript ควรอยู่ใน *head เอกสาร HTML สามารถใช้เพื่อให้มีสคริปต์ต่างๆ สคริปต์สามารถวางในเนื้อหาหรือในส่วนหัวของหน้า HTML ขึ้นอยู่กับตำแหน่งของสคริปต์

แท็ก HTML เฉพาะ *สคริปต์* ที่ล้อมรอบโค้ด JavaScript สามารถใช้เพื่อเพิ่มลงในเอกสาร HTML โค้ดที่กำหนด โค้ด HTML ที่โหลด JavaScript จะปรากฏในส่วน [head] หรือ [body] ขึ้นอยู่กับว่าคุณต้องการโหลดเมื่อใด

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

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

เมื่อคุณเพิ่มโค้ดลงในบทความหรือเพจของคุณโดยตรง WordPress ไม่อนุญาต หากคุณเปลี่ยนธีม คุณต้องโค้ดไฟล์ header.html หรือ footer.html ใหม่ด้วยตนเอง แต่การเปลี่ยนแปลงเหล่านี้จะถือเป็นโมฆะ WPCode เป็นวิธีที่สะดวกที่สุดในการเพิ่ม JavaScript ลงในไซต์ WordPress ในการเริ่มต้น เพียงไปที่ ส่วนหัวของข้อมูลโค้ด ในส่วนนี้ คุณจะเห็นสามฟิลด์แยกกันที่มีป้ายกำกับ 'หัว' 'เนื้อหา' และ 'ส่วนท้าย' กล่องเหล่านี้สามารถมีโค้ด JavaScript ได้แล้ว ตอนนี้ WPCode จะสร้างรหัสสำหรับทุกหน้าของเว็บไซต์ของคุณโดยอัตโนมัติ

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

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

อันตรายจากการแก้ไขธีม WordPress ของคุณเอง

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

ฉันจะเพิ่มไฟล์ Javascript ลงในปลั๊กอิน WordPress ได้อย่างไร

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

WordPress มีปลั๊กอินมากกว่า 33,000 ตัวและธีม 2,600 ธีม พวกเขาสามารถสร้างโปรแกรมได้หลากหลาย และ JavaScript เป็นวิธีการดำเนินการทั่วไป คุณไม่จำเป็นต้องเป็นโปรแกรมเมอร์เพื่อรวมโค้ด JavaScript เข้ากับธีมหรือปลั๊กอิน ในกรณีนั้น หน้าผลลัพธ์จะหนักเกินไป สคริปต์ของทุกคนจะถูกเว้นไว้ สคริปต์ที่อยู่ในคิวจะรวมอยู่ในคิวหากใช้ฟังก์ชัน WP_enqueue_script() กล่าวอีกนัยหนึ่ง แท็กสคริปต์ จะไม่ปรากฏที่ด้านบนของหน้า ต้องใช้ชื่อของสคริปต์, URL, การขึ้นต่อกัน, หมายเลขเวอร์ชัน, และต้องรวมไว้ในส่วนท้ายหรือไม่

ใน WP ฟังก์ชัน WP_enqueue_script() หมายถึงวิธีที่ดีที่สุดในการรวมสคริปต์ ข้อดีของวิธีนี้คือจะไม่ทำซ้ำสองครั้ง หากคุณลงทะเบียนสคริปต์ของคุณเป็นการพึ่งพา ปลั๊กอินอื่นๆ จะสามารถใช้งานได้โดยอัตโนมัติ นอกจากนี้ หากคุณระบุหมายเลขเวอร์ชันอย่างน้อยหนึ่งครั้ง สคริปต์จะถูกรวมไว้สองครั้ง แม้ว่าหมายเลขเวอร์ชันนี้จะเหมือนกันก็ตาม ฟังก์ชัน WP_enqueue_script() ช่วยให้แน่ใจว่าสคริปต์ได้รับการตั้งค่าอย่างเหมาะสมในส่วนหัวและส่วนท้าย โดยป้องกันไม่ให้มีการทำซ้ำ จะเป็นอย่างไรถ้าหน้าที่แสดงไม่ต้องการสคริปต์ของคุณ สร้างฟังก์ชันที่จะเข้าคิวสคริปต์ของคุณ หากคุณต้องการค้นหาการดำเนินการที่เกี่ยวข้องโดยใช้ Action/Filter API

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

ฉันจะเพิ่ม Javascript ให้กับผู้ดูแลระบบ WordPress ของฉันได้อย่างไร

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

ต้องเพิ่ม โค้ด jQuery ที่กำหนดเอง ลงในหน้าแก้ไขโพสต์ ซึ่งง่ายพอๆ กับการแสดง div เมื่อผู้ใช้กด Publish ฉันได้ลองวิธีการบางวิธีในการสะท้อนแท็กสคริปต์แล้ว แต่ดูเหมือนจะไม่ได้ผลสำหรับฉัน ต่อไปนี้เป็นตัวอย่างบางส่วนของ functions.php ของคุณ มันทำงานได้ดีบน WordPress 3.2.1 สามารถใช้ฟังก์ชัน get_current_screen เพื่อกำหนดตำแหน่งที่จะโหลดไฟล์ WP_enqueue_script จะไม่รวมอยู่ใน WordPress เวอร์ชันใหม่ (5.1 หรือใหม่กว่า) หากคุณเพิ่มลงในโค้ดของคุณโดยตรง ให้ใช้สคริปต์โดยตรงผ่าน admin_print_scripts แทน ตรวจสอบว่ามีการตั้งค่าลำดับความสำคัญสูงพอที่จะทำให้โหลดได้อย่างถูกต้องและหลังจากไลบรารีที่จำเป็น เช่น jQuery

เพิ่ม Javascript ไปยัง WordPress โดยไม่ต้องใช้ปลั๊กอิน

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

WordPress เพิ่ม Javascript ไปยังหน้าเฉพาะ

ตามที่ระบุไว้ก่อนหน้านี้ คุณต้องเพิ่มตรรกะแบบมีเงื่อนไขให้กับโค้ด หากคุณต้องการใช้ JavaScript ในหน้า WordPress เพียงหน้าเดียว Add_action ('wp_head', 'WPb_hook_Javascript'); รหัสนี้จะเรียกใช้ JavaScript หากรหัสหน้าคือ '10'

ในโพสต์นี้ ฉันจะสอนวิธีใส่ JavaScript ในหน้าหรือพื้นที่เฉพาะของ WordPress สร้างโฟลเดอร์ชื่อ Scripts หรือ Js เพื่อจัดระเบียบทุกอย่าง หากต้องการเรียกลิงก์แทนที่จะเรียกโดยตรงภายในแท็ก head ให้เปิดไฟล์ header.php และคัดลอกโค้ดต่อไปนี้จากธีมที่ใช้งานอยู่ รหัสรหัสอธิบายรายละเอียดด้านล่าง โค้ดต่อไปนี้จะปิดใช้งาน JavaScript ของปลั๊กอิน หากตั้งค่าให้ปรากฏเฉพาะในเพจที่ระบุ การวาง JavaScript ในลำดับที่เหมาะสมเป็นสิ่งสำคัญเมื่อใช้ JQuery ใน WordPress Justin Tadlock เสนอคำอธิบายเชิงลึกเกี่ยวกับปัญหานี้ในบทช่วยสอนของเขา

เพิ่ม Javascript ให้กับฟังก์ชั่น WordPress Php

การเพิ่ม JavaScript ลงใน WordPress functions.php เป็นกระบวนการง่ายๆ ที่ทุกคนสามารถทำได้โดยมีความเข้าใจพื้นฐานเกี่ยวกับโค้ด ก่อนอื่นคุณต้องเข้าถึงไฟล์ functions.php ของคุณผ่าน FTP หรือแผงควบคุมโฮสติ้งของคุณ เมื่อคุณพบไฟล์ของคุณแล้ว เพียงเพิ่มโค้ดต่อไปนี้ที่ด้านล่างสุด: function my_scripts_method() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'); wp_enqueue_script( 'jquery' ); } add_action('wp_enqueue_scripts', 'my_scripts_method'); ? > รหัสนี้จะแทนที่ สคริปต์ jQuery เริ่มต้น ที่มาพร้อมกับ WordPress ด้วยเวอร์ชันที่ใหม่กว่า

บันทึกการเปลี่ยนแปลงของคุณ วิธีเพิ่ม Javascript ในเว็บไซต์ WordPress

หากต้องการเพิ่ม JavaScript ลงในโพสต์หรือหน้าเดียว ให้ใช้ WP_enqueue_script หรือ WP_head hooks ตัวอย่างเช่น หากคุณต้องการใส่ส่วนหัวที่กำหนดเองในไซต์ของคุณ ให้เพิ่ม "br" ความรับผิดชอบของคุณในการปฏิบัติตามความรับผิดชอบของคุณ คุณต้องใส่รหัสต่อไปนี้ในไฟล์ php: *br. สคริปต์นี้สร้างขึ้นเพื่อตอบสนองต่อ [GET_HEADERS]: “myheader”, 'get_header()”; [/br] ต้องวางส่วนหัวของคุณไว้ที่นั่น ต้องดำเนินการไฟล์ PHP ต่อไปนี้ ใน WordPress หัวถูกกำหนดเป็น WP_head การเปลี่ยนแปลงที่คุณทำจะถูกบันทึก หากต้องการเพิ่ม JavaScript ให้กับเว็บไซต์ของคุณทั้งหมด ให้ใช้ฟังก์ชัน WordPress_enqueue_script ใน init ของคุณ init ของคุณควรอยู่ที่นั่น ในการสร้างไฟล์ php ให้ใส่บรรทัดต่อไปนี้ Get_header() ส่งคืน สคริปต์ PHP PHP ด้วย PHP_enqueue_script('myheader', get_header())