พัฒนา WordPress Theme บน Docker

Tanakrit Saisillapee
Zarewoft
Published in
2 min readOct 27, 2018

คำเตือน : วิธีการนี้เหมาะสำหรับพัฒนาของให้กับ WordPress เท่านั้นนะครับ อย่างเช่นพัฒนา theme หรือ plugin วิธีนี้ไม่เหมาะกับการนำไปใช้รัน WordPress บน production จริงๆ

บทความนี้ถูกเขียนขึ้นมาเนื่องมาจากว่าทางทีมได้รับโจทย์ให้พัฒนา Theme WordPress ให้กับทาง UX Research Lab

UX Research Lab logo

ซึ่งทางทีมเรามีประสบการณ์ในการพัฒนา Theme WordPress มานิดหน่อย แต่ไม่เคยพัฒนา Theme ขึ้นมาใหม่หมดเลยอย่างงานนี้ เราเลยเลือกที่จะขึ้น HTML และ CSS จากแบบที่ได้มาจากทาง Designer ก่อน

Design ที่ได้มาจากทาง Designer

ทีนี้พอเราขึ้น HTML และ CSS เสร็จ เราก็อยากจะลองเอาไปใส่ใน WordPress ดู เพื่อที่จะใส่ code ให้แสดงผลตาม content จากตัว WordPress

ด้วยความที่ทุกคนในทีมไม่ค่อยชอบลง package ลงไปบนเครื่องตัวเองตรงๆ แล้วเราก็เห็นว่าถ้ารัน WordPress ขึ้นมาเป็น container มันเหมาะมาก

ตัวอย่างไฟล์ docker-compose.yml ที่ใช้ใน project

เพราะเราสามารถใช้ Docker Compose ให้ช่วยรันทั้ง WordPress และ SQL Database ขึ้นมา พร้อมทั้งยังสามารถ config ต่างๆเก็บไว้ใน file compose ทุกครั้งที่เราสั่งรันมันขึ้นมาได้อีกด้วย อย่างในงานนี้ผมเป็นคนสร้างไฟล์ docker-compose.yml ใส่ไว้ใน project พอเพื่อนผมเอาโค้ดไปรันเค้าสามารถสั่ง docker-compose up ซึ่งมันจะรันทั้ง WordPress และ Database ขึ้นมาได้เลยโดยที่ไม่ต้องไปตั้งค่าอะไรอีก

ตัวอย่างการ map file ใน project เข้าไปใน Wordpress บน container

เราสามารถ map file ที่อยู่ใน project เข้าไปใน WordPress ได้เลย แปลว่าเราไม่จำเป็นต้อง copy file ที่เรากำลังพัฒนาอยู่ไปใส่ใน folder wp-content/themes เพื่อลองทดสอบ theme เราดู มันเหมือนกับว่าไฟล์ที่อยู่ใน project เราคือไฟล์ที่อยู่ใน folder themes ใน wordpress เลย เวลาเราแก้ไฟล์ใน project แล้วเรา refresh หน้าเว็บ WordPress ของเรา มันก็จะเปลี่ยนตาม ถ้า project ใครที่ต้องมีการ build ก่อนก็สามารถ map folder ของไฟล์ที่ build ออกมาเข้าไปได้เหมือนกัน

ด้วยความที่ไม่ใช่งานที่ต้องพัฒนากันต่อยาวๆ (แต่ code อยู่บน git นะ) พอพัฒนาเสร็จก็ zip folder แล้วอัพเข้า WordPress ตัว production ซึ่งรันอยู่บน hosting เลย ไม่ได้เซ็ต CI/CD อะไรนะครับ เข้าไปรับชมเว็บไซด์ได้ที่ https://uxlabth.com

จะเห็นว่าในขั้นตอนการพัฒนาเราไม่ต้องลง SQL Database ลงบนเครื่อง ไม่ต้องลง php หรือแม้แต่ web server เพื่อรัน WordPress เลย มันเป็นความฟินขั้นสุด

ตัวอย่างไฟล์ docker-compose.yml ตามรูปด้านบนครับ สามารถเปลี่ยนข้อมูลได้ตามชอบนะครับ

--

--

Tanakrit Saisillapee
Zarewoft

Polyglot developer who ❤️ modular and simplicity. 👨🏻‍💻 at Zarewoft.