วิธีเพิ่ม JavaScript ในเทมเพลต Joomla อย่างถูกตำแหน่ง

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

❶ เลือกวิธีเพิ่ม JavaScript ให้เหมาะกับเว็บไซต์

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

① ใช้ช่อง Custom Code ของเทมเพลต

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

1. เข้าสู่ระบบหลังบ้าน Joomla
2. ไปที่ System → Site Templates → Styles
3. เลือกสไตล์ของเทมเพลตที่เว็บไซต์กำลังใช้
4. มองหาช่องชื่อ Custom Code, Custom JavaScript หรือชื่อใกล้เคียง
5. วางโค้ดตามรูปแบบที่เทมเพลตกำหนด แล้วบันทึก
6. เปิดหน้าเว็บไซต์เพื่อตรวจสอบผล

ชื่อเมนูและตำแหน่งช่องอาจแตกต่างกันตามเทมเพลต หากไม่พบช่องดังกล่าว ให้ตรวจคู่มือหรือการตั้งค่าของเทมเพลตนั้นก่อน

② ใช้ไฟล์ user.js ใน Cassiopeia

หากใช้ Cassiopeia ซึ่งเป็นเทมเพลตมาตรฐานของ Joomla 4 เป็นต้นไป สามารถเพิ่มไฟล์ user.js ในโฟลเดอร์ JavaScript ของเทมเพลตได้ โดยเข้าไปที่ System → Site Templates → Cassiopeia Details and Files แล้วตรวจว่ามีโฟลเดอร์ js และไฟล์ user.js หรือไม่

ถ้าไม่มี ให้สร้างไฟล์ user.js ในตำแหน่งที่เทมเพลตกำหนด แล้วใส่เฉพาะ JavaScript โดยไม่ครอบด้วยแท็ก <script> ตัวอย่างโค้ด:

document.addEventListener('DOMContentLoaded', function () {
  console.log('JavaScript ของเว็บไซต์พร้อมทำงาน');
});

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

③ เพิ่มไฟล์ JavaScript ในเทมเพลตที่พัฒนาขึ้นเอง

กรณีเทมเพลตที่พัฒนาขึ้นเอง หรือผู้ดูแลมีความรู้ด้าน PHP และระบบไฟล์ ให้จัดเก็บไฟล์ JavaScript ในโฟลเดอร์ของเทมเพลต และลงทะเบียนไฟล์ผ่าน Web Asset Manager ของ Joomla ตัวอย่างการเรียกใช้ไฟล์จากโค้ดเทมเพลต:

$wa = $this->getDocument()->getWebAssetManager();
$wa->useScript('ชื่อแอสเซตที่ลงทะเบียนไว้');

วิธีนี้ต้องมีการกำหนดแอสเซตในไฟล์ joomla.asset.json และต้องใช้ชื่อแอสเซตให้ตรงกัน จึงควรให้ผู้พัฒนาเทมเพลตดำเนินการ หากไม่คุ้นเคยกับ PHP หรือโครงสร้างเทมเพลต อย่าแก้ไฟล์หลักโดยเดาสุ่ม

❷ เขียน JavaScript และนำไปติดตั้ง

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

document.addEventListener('DOMContentLoaded', function () {
  const button = document.querySelector('.back-to-top');

  if (!button) {
    return;
  }

  button.addEventListener('click', function () {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
});

โค้ดตัวอย่างจะทำงานเมื่อหน้าเว็บมีองค์ประกอบที่ใช้คลาส .back-to-top อยู่ด้วย หากไม่มีปุ่มดังกล่าว โค้ดจะหยุดทำงานอย่างปลอดภัย

① สำรองข้อมูลก่อนแก้ไขไฟล์

ก่อนสร้างหรือแก้ไฟล์ ให้สำรองไฟล์เทมเพลตและฐานข้อมูล หรือสร้างสำเนาเว็บไซต์สำหรับทดสอบ ตั้งชื่อไฟล์สำรองให้สื่อความหมาย เช่น user-before-update.js เพื่อให้ย้อนกลับได้เมื่อเกิดข้อผิดพลาด

② เพิ่มโค้ดในไฟล์หรือช่องที่ถูกต้อง

หากใช้ไฟล์ .js ให้วางเฉพาะ JavaScript ในไฟล์นั้น หากใช้ช่อง Custom Code ให้อ่านคำอธิบายของเทมเพลตก่อนว่าต้องใส่โค้ดพร้อมแท็ก <script> หรือไม่ เพราะรูปแบบการรับโค้ดไม่เหมือนกันทุกเทมเพลต

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

③ ตรวจว่ามีโค้ดซ้ำหรือไม่

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

❸ ตรวจสอบผลและแก้ปัญหาเมื่อโค้ดไม่ทำงาน

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

① ล้างแคชก่อนตรวจซ้ำ

หากยังเห็นผลแบบเดิม ให้ล้างแคชของ Joomla และแคชของเบราว์เซอร์ หากเว็บไซต์ใช้ระบบแคชจากโฮสติ้งหรือ CDN ให้ล้างแคชส่วนนั้นด้วย แล้วโหลดหน้าเว็บใหม่

② ตรวจข้อผิดพลาดในเบราว์เซอร์

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

③ ตรวจว่ามีการโหลดไฟล์ JavaScript จริง

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

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

❹ ข้อควรระวังในการเพิ่ม JavaScript

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

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