Thailand NOW — เว็บสื่อภาษาอังกฤษ

Thailand NOW เป็นแพลตฟอร์มข่าวและบทความภาษาอังกฤษเกี่ยวกับประเทศไทย ทั้งการต่างประเทศ สังคม ธุรกิจ นวัตกรรม และศิลปวัฒนธรรม มีบทความมากกว่า 530 เรื่อง และกิจกรรมทั่วประเทศเกือบ 150 งาน

เว็บเดิมสร้างด้วย Divi มาหลายปี ปลั๊กอินสะสมเยอะ และหน้าตาไม่ตรงกับแบรนด์ใหม่ที่ทีมของลูกค้าออกแบบไว้ใน Canva และ Figma งานนี้เลยไม่ใช่แค่เปลี่ยนธีม แต่คือสร้างหน้าเว็บใหม่ทั้งหมดตาม mockup แล้วย้ายเนื้อหาทั้งเว็บขึ้นเซิร์ฟเวอร์จริงโดยที่คนอ่านไม่รู้สึกว่าเว็บหายไปเลย

จาก mockup สู่เว็บจริง ทุกหน้าใช้ระบบเดียวกัน

ผมสร้างใหม่ทั้งเว็บด้วย Elementor Pro V4 (atomic) ตาม mockup ของลูกค้า ครบทั้ง header, footer, เมนู popup, หน้าแรก, หน้าหมวด, หน้าบทความ, หน้า event และหน้า 404

• ตั้งระบบฟอนต์ (Inter + Noto Serif) สี และ class กลางไว้ก่อน ทุกหน้าเลยหน้าตาไปทางเดียวกัน แก้ที่เดียวเปลี่ยนทั้งเว็บ
• ไอคอนหมวดทั้ง 7 ดึงจาก Figma แปลงเป็นเวกเตอร์ คมทุกขนาดจอ
• โลโก้เปลี่ยนเป็นไฟล์ SVG ไม่แตกบนจอความละเอียดสูง

คนเข้าเว็บต้องหาเรื่องที่สนใจเจอเร็ว

เว็บข่าวที่มีบทความหลายร้อยเรื่อง ถ้าคนอ่านหาไม่เจอในไม่กี่วินาทีก็ปิดออกไป จุดที่ใช้เวลาด้วยมากที่สุดเลยเป็นเรื่องการพาคนไปถึงเนื้อหา

• แถบหมวดหน้าแรก: เลื่อนซ้ายขวาได้แบบ carousel ทำเอง ไม่ต้องลงปลั๊กอินเพิ่ม
• ระบบค้นหา: ค้นได้ทั้งบทความและกิจกรรม กรองตามหัวข้อและแท็ก มีปุ่มโหลดเพิ่ม
• ปุ่มเมนู: เปิดได้ทันทีตั้งแต่หน้ายังโหลดไม่เสร็จ ไม่มีอาการกดแล้วไม่ขึ้น
• แท็กบนการ์ด: กดไปหน้าหมวดหรือหน้า Events NOW ได้โดยตรง

ปฏิทิน Events NOW ออกแบบใหม่

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

• เลื่อนดูทีละเดือน มีปุ่ม Today และกดวันที่เพื่อดูเฉพาะกิจกรรมวันนั้น
• วันที่มีกิจกรรมแสดงเป็นจุด ถ้าเกิน 3 งานเปลี่ยนเป็นตัวเลข
• รายการกิจกรรมเรียงจาก กำลังจัดอยู่ → กำลังจะมา → จบแล้ว แสดงครั้งละ 3 งาน มีปุ่มโหลดเพิ่ม

ระบบ cookie ตาม PDPA

เว็บนี้มีคนเข้าจากหลายประเทศ เรื่อง cookie เลยต้องทำให้ถูกตั้งแต่แรก ไม่ใช่แค่แปะป้ายให้กด OK

• ป้าย cookie มีปุ่ม Accept All, Reject All และ Preferences ให้เลือกเองแยก Analytics กับ Marketing
• ต่อกับ Google Consent Mode v2: GA4 และ Meta Pixel จะเริ่มเก็บข้อมูลเมื่อคนเข้าเว็บอนุญาตเท่านั้น
• ปรับหน้า Privacy Policy ให้รวมข้อมูล cookie ทั้งหมด พร้อมปุ่มให้เปลี่ยนตัวเลือกได้ตลอด

ย้ายเว็บ 20GB โดยเว็บจริงไม่ล่ม

ไฟล์ export ของ All-in-One WP Migration ใหญ่ 20GB แต่ hosting จำกัดการอัปโหลดไฟล์ที่ 256MB วิธีปกติใช้ไม่ได้ เลยย้ายผ่าน SSH และ WP-CLI แทน

ระหว่างย้าย เว็บเดิมยังเปิดให้คนอ่านตามปกติ ถ้ามีอะไรผิดพลาด สลับกลับไปเว็บเดิมได้ในคำสั่งเดียว

• นำเข้าฐานข้อมูลใหม่วางคู่กับของเดิม แล้วค่อยสลับ
• แก้ collation ที่ไม่ตรงกันระหว่าง MariaDB กับ MySQL และเปลี่ยน URL ในฐานข้อมูลกว่า 22,000 จุด
• ส่งรูป 155,858 ไฟล์ (19.8GB) จากเซิร์ฟเวอร์ staging ตรงไปเซิร์ฟเวอร์จริงด้วย rsync
• หลังย้ายตัดปลั๊กอินที่ไม่ได้ใช้ และลบตารางขยะในฐานข้อมูลออกราว 145MB

ตรวจหลังขึ้นโดเมนจริง

• ไล่เช็กหน้าเว็บ บทความ หมวด และกิจกรรมจาก sitemap ทั้งหมด
• ทดสอบบนมือถือ แท็บเล็ต และคอมพิวเตอร์ ทั้งเมนู ปฏิทิน ค้นหา และป้าย cookie
• แก้หน้าเว็บกระโดดตอนโหลด (CLS) ที่มาจากโลโก้ จาก 0.137 เหลือ 0
• ตั้ง WP Rocket ให้ทำงานร่วมกับ Sucuri firewall ที่อยู่หน้าเว็บ

หน้าตาบนมือถือ

คนอ่านข่าวส่วนใหญ่เข้ามาจากมือถือ เมนู ปฏิทิน และหน้าค้นหาเลยออกแบบให้ใช้นิ้วเดียวได้สะดวก ปุ่มกดง่าย ไม่ต้องซูม

โหลดเร็วแค่ไหน

ข้อมูลผู้ใช้จริงจาก Chrome (CrUX) ย้อนหลัง 28 วัน บนมือถือ: ผ่าน Core Web Vitals

ตัวที่ภูมิใจคือ CLS เป็น 0 เพราะเว็บข่าวมีรูปและโฆษณาเยอะ หน้ากระโดดตอนโหลดเป็นปัญหาที่เจอบ่อยมาก ใครสนใจวิธีแก้ ผมเขียนไว้ใน ทำเว็บ WordPress ให้ผ่าน Core Web Vitals

รายละเอียดงาน

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