วิธีเพิ่ม CSS กำหนดเองใน Joomla พร้อมตรวจสอบผลบนเว็บไซต์

เพิ่ม CSS กำหนดเองใน Joomla ได้จากไฟล์ที่เทมเพลตรองรับ เช่น user.css ใน Cassiopeia จากนั้นเขียนกฎ CSS บันทึก และตรวจหน้าเว็บไซต์จริง หากเทมเพลตอื่นไม่มีไฟล์หรือวิธีนี้ ให้ใช้แนวทางที่ผู้พัฒนาเทมเพลตกำหนด

❶ เตรียมก่อนเพิ่ม CSS

① ระบุสิ่งที่ต้องการเปลี่ยน

กำหนดก่อนว่าจะปรับส่วนใด เช่น สีหัวข้อ ระยะห่างของเนื้อหา หรือพื้นหลังส่วนหัว การระบุเป้าหมายช่วยให้เขียน CSS ได้ตรงจุดและลดผลกระทบต่อส่วนอื่น

② สำรองข้อมูลและใช้เว็บทดสอบ

สำรองไฟล์ที่จะปรับ และถ้าเว็บไซต์เปิดใช้งานจริง ให้ทดลองบนเว็บสำเนาก่อน Joomla แนะนำให้สำรองไฟล์ก่อนแก้ไข HTML หรือ CSS ของเทมเพลต

③ ตรวจวิธีของเทมเพลต

ตรวจคู่มือของเทมเพลตว่ามีไฟล์ CSS กำหนดเอง เช่น user.css หรือช่อง Custom CSS หรือไม่ ชื่อไฟล์และตำแหน่งอาจแตกต่างกันไปในแต่ละเทมเพลต

❷ สร้างไฟล์ user.css ใน Cassiopeia

ขั้นตอนนี้ใช้กับ Cassiopeia หากใช้เทมเพลตอื่น ให้ตรวจคู่มือของผู้พัฒนาก่อน

① เปิดหน้าจัดการไฟล์เทมเพลต

ใน Joomla 5 ไปที่ System → Templates Panel → Site Templates แล้วเลือก Cassiopeia Details and Files

② สร้างไฟล์ในโฟลเดอร์ css

เลือก New File จากนั้นเลือกโฟลเดอร์ css ตั้งชื่อไฟล์เป็น user เลือกชนิดไฟล์ .css แล้วกดสร้าง ชื่อไฟล์ที่ได้คือ user.css

③ เปิดไฟล์เพื่อแก้ไข

จากรายการไฟล์ เลือก user.css แล้วพิมพ์ CSS ที่ต้องการ หากใช้ Child Template ให้สร้างไฟล์ในโฟลเดอร์ css ของเทมเพลตลูกแทน

❸ เพิ่ม CSS และบันทึก

ตัวอย่างนี้เปลี่ยนสีหัวข้อ H1, H2 และ H3:

h1,
h2,
h3 {
  color: #174a7e;
}

① ใช้ selector ที่ตรงกับส่วนที่ต้องการ

หากต้องการปรับเฉพาะบางส่วน ให้ตรวจชื่อ class หรือ id ด้วยเครื่องมือ Inspect ในเบราว์เซอร์ แล้วใช้ selector ให้ตรงกับองค์ประกอบนั้น

② บันทึกไฟล์

กด Save หรือ Save & Close จากนั้นเปิดหน้าเว็บไซต์อีกครั้ง หากยังเห็นรูปแบบเดิม ให้รีเฟรชหน้าแบบไม่ใช้แคช หรือตรวจแคชของเว็บไซต์ตามระบบที่ใช้อยู่

③ ปรับทีละกฎ

เพิ่ม CSS ทีละส่วนและตรวจผลหลังบันทึก หากเปลี่ยนหลายอย่างพร้อมกันแล้วมีปัญหา จะหาสาเหตุและย้อนกลับได้ยากขึ้น

❹ ตรวจผลบนเว็บไซต์

① ตรวจหน้าที่ใช้เทมเพลต

เปิดหน้าแรก หน้าบทความ และหน้าสำคัญอื่น ๆ เพื่อดูว่า CSS ส่งผลตรงกับส่วนที่ตั้งใจหรือไม่

② ตรวจมือถือและคอมพิวเตอร์

ตรวจข้อความ เมนู รูปภาพ และปุ่มบนหน้าจอหลายขนาด เพื่อให้แน่ใจว่าการเปลี่ยนรูปแบบไม่ทำให้เนื้อหาล้นหรืออ่านยาก

③ ตรวจ selector หากไม่เห็นผล

ถ้า CSS ไม่เปลี่ยนหน้าเว็บ ให้ตรวจชื่อ selector ตำแหน่งไฟล์ และ Template Style ที่หน้านั้นใช้ หากกฎอื่นมีความสำคัญสูงกว่า อาจต้องปรับ selector ให้ตรงองค์ประกอบมากขึ้น

❺ วิธีแก้เมื่อ CSS ทำให้หน้าเว็บผิดรูปแบบ

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

สำหรับเว็บไซต์ที่ ComSiam ดูแล ควรเก็บสำเนา user.css ก่อนเปลี่ยนและจดสั้น ๆ ว่าแต่ละกฎใช้แก้ส่วนใด เพื่อให้ย้อนกลับหรือปรับต่อได้สะดวก

❻ สรุป

เพิ่ม CSS กำหนดเองผ่านไฟล์ที่เทมเพลตรองรับ โดย Cassiopeia สามารถสร้าง user.css ในโฟลเดอร์ css จากหน้าจัดการ Site Templates ได้ หลังบันทึกให้ตรวจหน้าเว็บจริง หลายขนาดหน้าจอ และแคช หากใช้เทมเพลตอื่น ให้ทำตามวิธีของผู้พัฒนาแทนการเดาตำแหน่งไฟล์

การแยก CSS กำหนดเองออกจากไฟล์หลักช่วยให้จัดการรูปแบบเว็บไซต์ได้เป็นระบบ และช่วยให้ ComSiam ตรวจสอบการเปลี่ยนแปลงภายหลังได้ง่าย