เพิ่ม CSS ใน WordPress โดยไม่แก้ไฟล์ธีม ทำได้กี่วิธี

เพิ่ม CSS ใน WordPress โดยไม่แก้ไฟล์ธีมได้หลัก ๆ 3 วิธี ได้แก่ ใช้ช่อง Additional CSS ใน Customizer, ใช้ช่อง CSS ใน Site Editor สำหรับธีมแบบบล็อก หรือใช้ Plugin ที่จัดการ CSS โดยเฉพาะ เลือกตามชนิดธีมและขอบเขตที่ต้องการปรับ เช่น ทั้งเว็บไซต์หรือเฉพาะบางบล็อก

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

❶ วิธีที่ 1: ใช้ Additional CSS ใน Customizer

วิธีนี้เหมาะกับธีมแบบคลาสสิกที่มี Customizer และต้องการปรับ CSS ของเว็บไซต์โดยไม่ติดตั้ง Plugin เพิ่ม

① เปิดช่อง CSS เพิ่มเติม

1. ไปที่ รูปแบบเว็บ > ปรับแต่ง
2. เลือก CSS เพิ่มเติม หรือ Additional CSS
3. เพิ่ม CSS ที่ต้องการ
4. ดูตัวอย่างการเปลี่ยนแปลง
5. กด เผยแพร่ เมื่อพร้อม

ชื่อเมนูอาจต่างกันตามธีมและภาษาที่ตั้งค่า หากไม่พบ Customizer ให้ตรวจว่าธีมใช้ Site Editor หรือไม่

② ตรวจผลก่อนเผยแพร่

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

❷ วิธีที่ 2: ใช้ CSS ใน Site Editor

ธีมแบบบล็อกมักมีช่อง CSS เพิ่มเติมใน Styles และบางเวอร์ชันสามารถกำหนด CSS ให้บล็อกบางประเภทได้

① เพิ่ม CSS สำหรับทั้งเว็บไซต์

1. ไปที่ รูปแบบเว็บ > ตัวแก้ไข
2. เปิด Styles หรือ สไตล์
3. มองหาตัวเลือก CSS เพิ่มเติม
4. เพิ่ม CSS และตรวจตัวอย่าง
5. กด บันทึก เมื่อพอใจ

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

② เพิ่ม CSS ให้บล็อกเฉพาะประเภท

หากต้องการปรับเฉพาะบล็อก เช่น ปุ่มหรือหัวข้อ ให้เลือกบล็อกนั้นใน Site Editor แล้วตรวจว่ามีช่อง Additional CSS ในแผงตั้งค่าหรือไม่ ตัวเลือกขึ้นอยู่กับเวอร์ชัน WordPress และธีม

การปรับเฉพาะบล็อกช่วยลดผลกระทบต่อองค์ประกอบอื่น แต่ควรตรวจทุกหน้าที่ใช้บล็อกชนิดนั้น

❸ วิธีที่ 3: ใช้ Plugin สำหรับจัดการ CSS

Plugin อาจเหมาะเมื่อธีมไม่มีช่อง CSS ที่ต้องการ หรืออยากจัดเก็บและเปิดปิด CSS แยกเป็นชุด

① ตรวจ Plugin ก่อนติดตั้ง

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

② เพิ่มและทดสอบ CSS

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

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

❹ เลือกวิธีให้เหมาะกับงาน

• ปรับเว็บไซต์ด้วยธีมคลาสสิก: เริ่มจาก Additional CSS ใน Customizer
• ใช้ธีมแบบบล็อก: ตรวจช่อง CSS ใน Site Editor หรือการตั้งค่าของบล็อก
• ต้องจัดการ CSS หลายชุด: พิจารณา Plugin ที่มีการดูแลต่อเนื่อง
• ต้องปรับเฉพาะส่วน: ใช้ตัวเลือก CSS ระดับบล็อก หากธีมและเวอร์ชันรองรับ

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

❺ ข้อควรระวังก่อนเพิ่ม CSS

① สำรอง CSS เดิม

คัดลอก CSS ที่มีอยู่เก็บไว้ก่อนแก้ เพื่อคืนค่ากลับได้หากหน้าเว็บแสดงผลผิดปกติ

② เพิ่มทีละส่วน

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

③ ตรวจหลายหน้าและหลายขนาดหน้าจอ

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

④ อย่าแก้ธีมไฟล์หลักผ่านช่องทางอื่นโดยไม่ตั้งใจ

แม้ต้องการเลี่ยงการแก้ไฟล์ธีม แต่การเปิด Theme File Editor หรือแก้ไฟล์ผ่านโฮสติ้งยังเป็นการเปลี่ยนไฟล์โดยตรง หากไม่ต้องการแก้ไฟล์ ให้ใช้ช่อง Additional CSS หรือเครื่องมือที่เลือกไว้เท่านั้น

❻ แก้ปัญหาเมื่อเพิ่ม CSS แล้วไม่เห็นผล

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

❼ สรุป

เพิ่ม CSS ใน WordPress โดยไม่แก้ไฟล์ธีมได้ผ่าน Customizer, Site Editor หรือ Plugin สำหรับจัดการ CSS เลือกวิธีตามชนิดธีมและขอบเขตที่ต้องการปรับ แล้วสำรอง CSS เดิม ทดสอบทีละส่วน และตรวจหน้าเว็บหลายขนาดก่อนเผยแพร่

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