วิธีเพิ่ม JavaScript ในหน้า WordPress (+ เคล็ดลับการดีบัก)

เผยแพร่แล้ว: 2025-06-20

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

ไม่ว่าจะด้วยวิธีใดคุณอยู่ในสถานที่ที่เหมาะสม

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

tl; dr

คุณยุ่งเกินไปที่จะอ่านโพสต์ทั้งหมดและต้องการสรุปอย่างรวดเร็วหรือไม่? ตกลง แต่เพียงเพราะคุณ

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

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

มีหลายวิธีในการเพิ่มจาวาสคริปต์ลงในเว็บไซต์ของคุณ - ผ่าน hooks wordpress, functions.php , ไฟล์แยกต่างหาก, ตัวแก้ไข WordPress หรือด้วยปลั๊กอิน

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

ปรับปรุงประสิทธิภาพการทำงานของ JavaScript โดยการรวม, minifying, deferring หรือการชะลอการสคริปต์ นอกจากนี้คุณยังสามารถทำให้กระบวนการอัตโนมัติโดยใช้ปลั๊กอินเช่น WP Rocket

ทำไมต้องเพิ่ม JavaScript ในหน้า WordPress ของคุณ?

JavaScript มักจะย่อกับ JS เป็นภาษาการเขียนโปรแกรมยอดนิยม เป็นหนึ่งในสามเทคโนโลยีหลักที่ใช้ในการสร้างหน้าเว็บ อีกสองคนคือ HTML ซึ่งกำหนดโครงสร้างหน้าและเนื้อหารวมถึง CSS ซึ่งรับผิดชอบการจัดแต่งทรงผม

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

นั่นเป็นเหตุผลที่หนึ่งในการใช้งานหลักคือการทำให้หน้าเว็บมีการโต้ตอบมากขึ้น ตัวอย่างเช่น JavaScript มักจะใช้พลังองค์ประกอบหน้าเช่น:

  • เมนูสไลด์ใน
  • ป๊อปอัป
  • ภาพเคลื่อนไหว

ตัวแก้ไขบล็อก WordPress นั้นส่วนใหญ่เขียนไว้ใน JavaScript

ตัวแก้ไขบล็อก WordPress ที่ใช้ JavaScript

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

  • แชทสด
  • แบบฟอร์มการเลือกใช้อีเมลและแบบฟอร์มการติดต่อ
  • วิดีโอฝัง
  • แผนที่แบบโต้ตอบ
  • โซเชียลมีเดียฟีด

ข้อพิจารณาที่สำคัญ

หากทำไม่ถูกต้องการเพิ่ม JavaScript ในหน้า WordPress ของคุณอาจนำไปสู่ข้อผิดพลาดและปัญหา การใช้ความระมัดระวังตั้งแต่เริ่มต้นสามารถช่วยคุณประหยัดเวลาและความยุ่งยากในภายหลัง:

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

6 วิธีในการเพิ่ม JavaScript ในหน้าใน WordPress

เพียงพอกับทฤษฎี ด้านล่างเรากำลังแสดงให้คุณเห็นหกวิธีในการเพิ่มจาวาสคริปต์ลงใน WordPress จากส่วนใหญ่ไปจนถึงเทคนิคน้อยที่สุด

1. ใช้ hooks และฟังก์ชั่น WordPress

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

ตัวอย่างเช่น wp_head () ทำงานในส่วน <head> ที่ด้านบนของไซต์ของคุณ หากคุณต้องการใช้เพื่อเพิ่ม JavaScript ไปยังหน้า WordPress คุณต้องทำเช่นนั้นในไฟล์ ฟังก์ชั่น ของธีม (เด็ก) ของคุณตัวอย่างเช่นเช่น:

 function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

ป้อนรหัส JavaScript ของคุณโดยที่มันบอกว่า“ วางรหัส JavaScript ของคุณที่นี่” นอกจากนี้คุณยังสามารถเปลี่ยนชื่อฟังก์ชั่นจาก” add_custom_script” เป็นคำอธิบายเพิ่มเติม

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

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

หากคุณต้องการโหลด JavaScript ในหน้าเฉพาะคุณสามารถรวมวิธีนี้เข้ากับคำสั่งแบบมีเงื่อนไข:

 function add_custom_script() { if (is_page(123)) { ?> <script> // Place your JavaScript code here </script> <?php } } add_action('wp_head', 'add_custom_script');

ส่วนที่ จำกัด สิ่งนี้ไว้ในหน้าเดียวคือ IS_PAGE (123) “ 123” คือ ID หน้าซึ่งคุณต้องอัปเดตไปยัง ID ของหน้าของคุณหากคุณต้องการใช้รหัสนี้ จะปรากฏในแถบเบราว์เซอร์เมื่อคุณเปิดหน้าเว็บของคุณในตัวแก้ไข WordPress นอกจากนี้คุณยังสามารถใช้ is_page () ไปยังหน้าเป้าหมายตามชื่อหรือ URL Slug

ID หน้า WordPress ในแถบเบราว์เซอร์
มีแท็กเงื่อนไขอื่น ๆ อีกมากมายเช่น is_single () สำหรับโพสต์บล็อก, is_home () สำหรับหน้าบล็อก, is_archive () สำหรับหน้าเก็บถาวรและ is_category () สำหรับคลังเก็บหมวดหมู่

2. โหลด JavaScript ในไฟล์แยกต่างหาก

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

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

 function enqueue_custom_script() { wp_register_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true ); wp_enqueue_script('my-custom-script'); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');

ในตัวอย่างนี้สคริปต์จะถูกวางไว้ในไดเรกทอรีชุดรูปแบบซึ่งเรากำหนดเป้าหมายด้วย get_template_directory_uri () (สำหรับธีมลูกใช้ get_stylesheet_directory_uri () แทน) อาร์เรย์ ('jQuery') ระบุว่าสคริปต์นี้ขึ้นอยู่กับ jQuery และควรโหลดหลังจากนั้น '1.0.0' เป็นหมายเลขเวอร์ชันและ 'จริง' หมายถึง WordPress ควรโหลดสคริปต์ในส่วนท้าย

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

3. รวมรหัสในไฟล์ธีม

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

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

ในธีมคลาสสิกนั่นมักจะเป็น header.php ค้นหาในธีมของคุณทำสำเนาและวางไว้ในธีมลูกของคุณจากนั้นรวมสคริปต์โดยตรงที่ใดที่หนึ่งในส่วน <head>

หากคุณต้องการโหลดเฉพาะในหน้าหนึ่งคุณสามารถใช้คำสั่งแบบมีเงื่อนไขได้ก่อนหน้านี้ อีกวิธีหนึ่งต้องขอบคุณลำดับชั้นของแม่แบบมันเป็นไปได้ที่จะสร้างไฟล์ที่กำหนดเองสำหรับหน้านั้นเท่านั้นเช่น page-contact.php

ชุดรูปแบบ WordPress บล็อกไม่ใช้ไฟล์ธีมเหล่านี้อีกต่อไป หากธีมของคุณเป็นธีมบล็อกคุณควรเลือกวิธีการหนึ่งในวิธีการอื่นที่กล่าวถึงที่นี่

4. สร้างปลั๊กอินที่กำหนดเอง

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

คุณสามารถหลีกเลี่ยงได้โดยใช้ปลั๊กอินที่กำหนดเอง สิ่งนี้ทำให้รหัสธีมอิสระและยังช่วยให้คุณเปิดใช้งานและปิดการใช้งานในเมนู ปลั๊กอิน WordPress

นี่คือมาร์กอัปสำหรับปลั๊กอินอย่างง่ายเพื่อเพิ่ม JavaScript ในหน้า WordPress ของคุณ:

 <?php /* Plugin Name: Custom JavaScript Loader Plugin URI: https://yourwebsite.com Description: A simple plugin to add custom JavaScript to WordPress pages. Author: Your Name Author URI: https://yourwebsite.com Version: 1.0 */ function add_custom_script() { ?> <script> // Place your JavaScript code here </script> <?php } add_action('wp_head', 'add_custom_script');

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

ตั้งชื่อไฟล์สิ่งที่มีความหมายเช่น การติดตามแบบกำหนดเอง-รหัส -plugin.php จากนั้นอัปโหลดลงในไดเรกทอรีที่มีชื่อเดียวกันภายใน WP-Content/ปลั๊กอิน ในการติดตั้ง WordPress ของคุณ หลังจากนั้นควรปรากฏในเมนู ปลั๊กอิน

5. เพิ่ม JavaScript ในตัวแก้ไข WordPress

แม้ว่านี่จะไม่ใช่วิธีที่แนะนำมากที่สุด แต่ก็เป็นไปได้ที่จะเพิ่ม JavaScript โดยตรงไปยังหน้าเว็บโดยใช้ WordPress Editor ในการทำเช่นนั้นให้เพิ่มบล็อกใหม่ (คลิกปุ่ม Plus หรือใช้ Slash ไปข้างหน้า) และเลือกบล็อก HTML ที่กำหนดเอง

เพียงแค่ใส่รหัส JavaScript ของคุณเพื่อให้โหลดตรงบนหน้าเว็บ

เพียงตรวจสอบให้แน่ใจว่าใช้แท็กการเปิด <script> และปิดแท็ก </script> และบันทึกการเปลี่ยนแปลงของคุณในตัวแก้ไขเพื่อให้พวกเขามีผล

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

6. ใช้ปลั๊กอินตัวอย่างโค้ด

มันจะไม่เป็น WordPress หากไม่มีโซลูชันปลั๊กอินเพื่อเพิ่ม JavaScript ในเว็บไซต์ของคุณ ในความเป็นจริงมีหลายอย่างรวมถึง:

  • WPCode
  • ตัวจัดการรหัสส่วนท้าย
  • CSS และ JS แบบกำหนดเองง่ายๆ
  • กล่องเครื่องมือ CSS & JavaScript

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

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

เพียงสร้างตัวอย่างใหม่ใส่รหัสของคุณจากนั้นกำหนดค่าตำแหน่งที่คุณต้องการให้ปรากฏ

มันสวยมาก

การแก้ไขปัญหา JavaScript ใน WordPress

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

1. ตรวจสอบเครื่องมือนักพัฒนาเบราว์เซอร์

วิธีหนึ่งในการตรวจสอบข้อผิดพลาดของ JavaScript คือการใช้เครื่องมือนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ของคุณ พวกเขาอนุญาตให้คุณตรวจสอบรหัสไซต์พื้นฐานรวมถึงสคริปต์ใด ๆ

คุณสามารถเปิดได้โดยคลิกขวาที่หน้าเว็บใด ๆ และเลือก การตรวจสอบ

อีกวิธีหนึ่งคือเข้าถึงพวกเขาผ่านเมนูเบราว์เซอร์เช่นใน Chrome พวกเขาอยู่ภายใต้ เครื่องมือเพิ่มเติม> เครื่องมือนักพัฒนา ซอฟต์แวร์

นอกจากนี้ยังมีแป้นพิมพ์ลัดที่จะเปิดใน Chrome, Edge, และ Firefox มันคือ Ctrl/Cmd+Shift+I ใน Safari CMD+OPT+C

เปิดเครื่องมือ dev บนเว็บไซต์ของคุณจากนั้นไปที่แท็บ คอนโซล คุณควรเห็นข้อผิดพลาดใด ๆ รวมถึงสิ่งที่เกิดจาก JavaScript ที่นี่

โปรดทราบว่าคุณอาจต้องโหลดหน้าใหม่เพื่อให้พวกเขาปรากฏตัว ข้อผิดพลาด JavaScript ที่พบบ่อยที่สุดคือ:

  • ReferenceError: ระบุตัวแปรหรือฟังก์ชั่นที่หายไปหรือไม่ได้กำหนด
  • TypeError: แนะนำว่ามีปัญหาเกี่ยวกับการดำเนินการเช่นพยายามใช้ค่าประเภทที่ไม่เหมาะสม
  • SyntaxError: มักจะเกิดขึ้นเนื่องจากการพิมพ์ผิดหรือการจัดรูปแบบที่ไม่ถูกต้องในรหัสเช่นวงเล็บที่ขาดหายไปเครื่องหมายอัฒภาคหรือเครื่องหมายคำพูด

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

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

2. แก้ไขชุดรูปแบบและปลั๊กอินความขัดแย้ง

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

นี่คือวิธีแก้ไขปัญหา JavaScript เหล่านี้:

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

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

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

3. ใช้โหมดการดีบัก

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

ในการเปิดใช้งานโหมดดีบั๊กเปิดไฟล์ WP-Config.php ของคุณ (ผ่าน FTP หรือตัวจัดการไฟล์โฮสติ้งของคุณ) และเพิ่มบรรทัดต่อไปนี้:

 define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('SCRIPT_DEBUG', true);

คุณอาจพบ define ('script_debug', false); ในไฟล์ ถ้าเป็นเช่นนั้นเพียงเปลี่ยนเป็น“ จริง” บันทึกและอัปเดตไฟล์อีกครั้ง

การตั้งค่าด้านบนเปิดใช้งานโหมดการดีบักการบันทึกข้อผิดพลาด (ข้อผิดพลาดจะปรากฏใน WP-content/debug.log ) และโหลด Core CSS และไฟล์ JavaScript เวอร์ชันที่ไม่ได้ระบุเพื่อติดตามปัญหาได้ง่ายขึ้น

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

คุณยังสามารถใช้ปลั๊กอินการดีบัก WP เพื่อเปิดใช้งานโหมดการดีบัก WordPress

4. ปัญหาประสิทธิภาพการทำงาน

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

เพื่อหลีกเลี่ยงปัญหาด้านประสิทธิภาพที่เกิดจาก JavaScript ให้ทำตามแนวทางปฏิบัติที่ดีที่สุดเหล่านี้:

  • ลบสคริปต์ที่คุณไม่ต้องการ: ตรวจสอบการโหลด JavaScript บนเว็บไซต์ของคุณเป็นประจำเพื่อดูว่าคุณต้องการทั้งหมดหรือไม่โดยเฉพาะบริการของบุคคลที่สาม
  • โหลดสคริปต์ในส่วนท้าย: วางไฟล์ JavaScript ไว้ในส่วนหัวเมื่อจำเป็นต้องโหลดเร็ว
  • รวมสคริปต์: รวมสคริปต์หลายรายการไว้ในไฟล์เดียว (เรียกว่า "การต่อกัน") ไฟล์ขนาดใหญ่เดียวมักจะโหลดเร็วกว่าไฟล์ขนาดเล็กหลายไฟล์
  • Minify JavaScript Files : สิ่งนี้จะลบการจัดรูปแบบที่ไม่จำเป็นและช่องว่างที่ยอดเยี่ยมสำหรับความชัดเจนที่ไม่จำเป็นในการเรียกใช้รหัส
  • โหลด JavaScript แบบอะซิงโครนัส: หมายถึงเบราว์เซอร์ไม่หยุดประมวลผลไซต์ในขณะที่โหลดไฟล์ JavaScript แต่โหลดไว้ในพื้นหลังและดำเนินการเมื่อดาวน์โหลดเมื่อดาวน์โหลด
  • เลื่อนสคริปต์ขนาดใหญ่: ที่นี่ไฟล์ของคุณจะถูกดาวน์โหลดในพื้นหลังเช่นกัน แต่ดำเนินการเฉพาะหลังจากกระบวนการโหลดที่เหลือเสร็จสิ้นดังนั้นจึงไม่ถูกขัดจังหวะ
  • ล่าช้า JavaScript Execution : เลื่อนการโหลดไฟล์ JavaScript ทั้งหมดและสคริปต์แบบอินไลน์จนกว่าจะมีการโต้ตอบของผู้ใช้ มันเหมือนกับการโหลดขี้เกียจสำหรับรูปภาพ แต่สำหรับไฟล์ JavaScript

ทำให้การเพิ่มประสิทธิภาพประสิทธิภาพของ JavaScript ง่ายขึ้นด้วย WP Rocket

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

การตั้งค่าการเพิ่มประสิทธิภาพ JavaScript ใน WP Rocket

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

นอกเหนือจากนั้น WP Rocket ใช้การปรับปรุงประสิทธิภาพจำนวนมากโดยอัตโนมัติในพื้นหลังเช่น:

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

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

  • ขี้เกียจโหลดสำหรับรูปภาพรวมถึงพื้นหลัง CSS วิดีโอและ iframes
  • การโหลดไฟล์ภายนอกและแบบอักษรล่วงหน้า
  • Google Fonts โฮสติ้งด้วยตนเอง
  • การเพิ่มประสิทธิภาพฐานข้อมูล
  • ตัวเลือกในการเชื่อมต่อกับ CDN ได้อย่างง่ายดายรวมถึง rocketcdn

พร้อมที่จะเพิ่ม JavaScript ในหน้า WordPress ของคุณหรือยัง?

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

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

หากคุณกำลังดิ้นรนกับปัญหาด้านประสิทธิภาพที่เกี่ยวข้องกับ JavaScript WP Rocket ช่วยให้คุณจัดการกับพวกเขาได้อย่างง่ายดายและมีประสิทธิภาพ นอกจากนี้ยังมีฟังก์ชั่นอื่น ๆ อีกมากมายเพื่อเพิ่มความเร็วในเว็บไซต์ของคุณ รับ WP Rocket วันนี้และลองใช้ความเสี่ยงเป็นเวลา 14 วัน!