วิธีแก้เทมเพลต Joomla แสดงผลไม่ตรงกับตัวอย่าง

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

❶ ตรวจว่าหน้า Demo ใช้อะไรประกอบบ้าง

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

① ตรวจข้อมูลตัวอย่างและคู่มือเทมเพลต

ดูว่าเทมเพลตมีชุด Quickstart, Sample Data หรือแพ็กเกจข้อมูลตัวอย่างหรือไม่ บางชุดติดตั้งเป็นเว็บไซต์ตัวอย่างที่จัดบทความ เมนู และโมดูลไว้แล้ว ส่วนแพ็กเกจเทมเพลตปกติอาจติดตั้งเพียงไฟล์รูปแบบเว็บไซต์

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

② เปรียบเทียบรายการองค์ประกอบกับ Demo

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

③ ตรวจความเข้ากันได้ของเทมเพลต

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

❷ ตรวจสไตล์เทมเพลต เมนู และตำแหน่งโมดูล

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

① ตรวจว่าเลือกสไตล์ที่ต้องการใช้

ไปที่ System → Site Templates → Styles แล้วดูว่าสไตล์ของเทมเพลตที่ต้องการเป็นค่าเริ่มต้นหรือถูกกำหนดให้กับรายการเมนูที่ถูกต้องหรือไม่ เทมเพลตหนึ่งอาจมีหลายสไตล์ และแต่ละสไตล์อาจตั้งค่าสี โลโก้ หรือรูปแบบต่างกัน

หากหน้าเดียวใช้สไตล์หนึ่ง แต่หน้าอื่นแสดงอีกแบบ ให้ตรวจการกำหนด Template Style ในรายการเมนูของหน้านั้นด้วย

② ตรวจตำแหน่งโมดูลและการกำหนดหน้า

ใน Content → Site Modules เปิดโมดูลที่ควรแสดง แล้วตรวจสามอย่างนี้:

1. Position ตรงกับตำแหน่งที่มีในเทมเพลตหรือไม่
2. สถานะโมดูลเป็น Published หรือไม่
3. Menu Assignment กำหนดให้แสดงในหน้าที่กำลังตรวจหรือไม่

ชื่ออย่าง left หรือ header ไม่ได้บอกตำแหน่งที่แท้จริงบนหน้าจอเสมอ เพราะตำแหน่งถูกออกแบบโดยผู้พัฒนาเทมเพลต

③ แสดงแผนผังตำแหน่งโมดูล

หากยังไม่รู้ว่าตำแหน่งใดอยู่ตรงไหน ให้เปิด Preview Module Positions ในตัวเลือกของ Site Templates แล้วเติม ?tp=1 ต่อท้าย URL ของหน้าเว็บ หรือใช้ &tp=1 หาก URL มีเครื่องหมายคำถามอยู่แล้ว

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

❸ ตรวจเนื้อหา รูปภาพ และตัวเลือกของเทมเพลต

หน้าเว็บอาจไม่เหมือน Demo เพราะเนื้อหาจริงมีความยาวหรือสัดส่วนต่างกัน บางเทมเพลตยังมีการตั้งค่าที่ต้องกรอกเอง เช่น ภาพโลโก้ สีหลัก หรือข้อความแนะนำ

① ตรวจบทความและภาพที่ใช้

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

② ตรวจตัวเลือกของเทมเพลต

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

③ ตรวจว่าขาดส่วนเสริมหรือไม่

หากส่วนใดของ Demo เช่น ตัวเลื่อนภาพ ตัวสร้างหน้า หรือกล่องไอคอน ไม่ปรากฏ ให้ตรวจว่าเทมเพลตระบุส่วนเสริมที่ต้องใช้หรือไม่ ติดตั้งเฉพาะส่วนเสริมที่จำเป็นและเข้ากันได้กับ Joomla เวอร์ชันของเว็บไซต์

❹ แก้ทีละสาเหตุและทดสอบผล

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

① ล้างแคชหลังปรับการตั้งค่า

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

② ตรวจหน้าเว็บหลายขนาด

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

③ บันทึกค่าที่เปลี่ยนและย้อนกลับได้

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

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