# พัฒนาเว็บไซต์ภาษาอังกฤษใหม่ให้ Naya Residence บน WordPress เดิม

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

- บทบาท: พัฒนาเว็บไซต์ตามดีไซน์ของลูกค้าและสร้างปลั๊กอิน WordPress
- ช่วงเวลา: กันยายน 2026 (10 วัน)
- เว็บไซต์: https://nayaresidence.com/en/
- ปรับปรุงล่าสุด: 2026-10-04
- URL: https://thonglak.com/projects/naya-residence/

## กรณีศึกษาโดยย่อ

- ปัญหา: ดีไซน์ภาษาอังกฤษใหม่ไม่สามารถทำได้ด้วยเทมเพลตเดิม และการแก้เทมเพลตโดยตรงเสี่ยงกระทบเว็บไซต์ภาษาไทยที่ใช้งานอยู่
- บทบาท: พัฒนาเว็บไซต์ตามดีไซน์ของลูกค้าและสร้างปลั๊กอิน WordPress
- วิธีทำ: แยกการแสดงผลหน้าภาษาอังกฤษเป็นปลั๊กอินเฉพาะ พร้อมเวอร์ชัน Preview ให้ลูกค้าตรวจก่อนนำขึ้นใช้งานจริง
- ผลลัพธ์: ส่งมอบภายใน 10 วัน โดยเว็บไซต์ภาษาไทยเดิมไม่ได้รับผลกระทบ และลูกค้าแก้ไขเนื้อหาเองได้หลังส่งมอบ

## ทำดีไซน์ใหม่ให้ทำงานร่วมกับระบบเดิม

Naya Residence มีเว็บไซต์ WordPress ที่ใช้งานอยู่แล้ว งานนี้จึงต้องพัฒนาหน้าภาษาอังกฤษตามดีไซน์ใหม่ของลูกค้าให้ทำงานร่วมกับระบบที่มีอยู่

ผมเลือกสร้างปลั๊กอินสำหรับหน้าภาษาอังกฤษโดยเฉพาะ เพื่อกำหนดรูปแบบการแสดงผลได้ตามแบบ โดยแยกออกจากเทมเพลตที่หน้าภาษาไทยใช้อยู่

## จากดีไซน์สู่เว็บไซต์ที่ใช้งานได้

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

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

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

## ให้ลูกค้าเห็นหน้าจริงก่อนเปิดใช้งาน

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

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

![ตารางติดตามรายการแก้ไขเว็บไซต์และสถานะงานใน Google Sheets](https://thonglak.com/_astro/naya-residence-google-sheet.CFo9XCZl_1uaKcm.webp)

## ตรวจการแสดงผลและประสิทธิภาพ

นอกจากตรวจรายละเอียดของหน้าเว็บทั้งบนมือถือและเดสก์ท็อปแล้ว ผมยังตรวจประสิทธิภาพด้วย PageSpeed Insights ภาพด้านล่างแสดงผลการตรวจของหน้าเว็บ ณ เวลาที่บันทึกภาพ

![ผลการตรวจเว็บไซต์ด้วย PageSpeed Insights ได้คะแนนประสิทธิภาพ 98 การช่วยเหลือพิเศษ 96 แนวทางปฏิบัติที่ดีที่สุด 92 และ SEO 100](https://thonglak.com/_astro/pagespeed-insights.DwXp9QNW_1rX8qa.webp)