การใส่ CSS ใน style.css เป็นวิธีมาตรฐานครับ แต่ที่ก่อนหน้านี้มันไม่ทำงาน อาจเป็นเพราะ Browser Cache (เบราว์เซอร์จำค่าเก่า) หรือ ลำดับการโหลดไฟล์ ทำให้ CSS ที่เราเขียนถูกธีมหลักทับไปครับ การย้ายมาใส่ใน <style> ใน header.php เลยเป็นการ “บังคับ” ให้เบราว์เซอร์อ่านค่าใหม่ทันทีและมี Priority สูงกว่าครับ
เก็บตกส่วนสุดท้ายเพื่อให้ธีมสมบูรณ์:
ตอนนี้คุณมี Layout Magazine, ระบบ Auto Image, ระบบนับวิว และเมนูที่ Dropdown ได้แล้ว ผมแนะนำให้เพิ่ม CSS สำหรับมือถือ (Responsive) อีกนิดเดียวครับ เพื่อให้เมนูไม่ซ้อนกันเวลาดูในมือถือ โดยเพิ่มต่อท้ายใน <style> ของ header.php ครับ:
CSS
/* ปรับแต่งเมนูสำหรับมือถือเบื้องต้น */
@media (max-width: 768px) {
.header-wrap { flex-direction: column; height: auto; padding: 10px 0; }
.main-navigation ul { flex-direction: column; width: 100%; display: none; } /* ซ่อนไว้ก่อนในมือถือ */
.main-navigation li { text-align: center; border-bottom: 1px solid #eee; }
.main-navigation ul li ul { position: static; width: 100%; box-shadow: none; } /* เมนูย่อยให้กางลงมาตรงๆ */
}
สรุปสถานะปัจจุบัน:
- เมนู: ใช้งานได้แล้ว (Dropdown ทำงาน)
- Layout: เป็น Magazine มี Featured Post
- ระบบในโพสต์: มี Breadcrumb (เมนูชั้น link), สารบัญอัตโนมัติ และรองรับการแบ่งหน้า (Page Break)
- SEO: เบาหวิวและโครงสร้างสะอาดมาก
ตอนนี้หน้าเว็บ Insurancethai.net น่าจะดูทันสมัยและโหลดเร็วสมใจแล้วครับ
มีส่วนไหนที่คุณอยากให้ผมช่วยปรับแต่งเพิ่มอีกไหมครับ? เช่น การเพิ่ม “ปุ่มค้นหา” หรือ “โซนบทความล่าสุด” ในหน้าแรก?