แนะนำวิธีการเริ่มพัฒนา Responsive เว็บไซต์ด้วย WordPress ฉบับหัวขโมย

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

ทำไมถึงเลือก Twenty Twenty One?

เหตุผลหลักๆเลยคือมันเป็นธีมที่วางโครงสร้างที่จำเป็นมาแบบครบถ้วนแล้วนั่นแหละครับ ครบถ้วนยังไงบ้าง ในมุมมองของผมคือมันมี Sass มาให้ในตัว มี breakpoint สำหรับเช็คขนาดหน้าจอต่างๆมาให้เกือบครบครัน(ผมใช้คำว่าเกือบเพราะมันไม่ได้ใส่จอใหญ่ๆมาให้ ผมไปขโมยมาจาก Bootstrap Breakpoint อีกทีนึงสำหรับจอ 1400px ขึ้นไป

วิธีเพิ่มขนาดหน้าจอผมเพิ่มยังไง?

ในไฟล์ breakepoints.scss มันจะมีการประกาศช่วงความกว้างของจอแต่ละขนาดอยู่ ผมก็แค่ลอกมาจากจอที่มันเรียกว่า wide สำหรับขนาด 1024px ผมก็แค่เรียกมันว่า wider สำหรับจอ 1400px ขึ้นไป แค่นั้นเอง

แล้วมันเรียกใช้งานยังไง?

ก่อนอื่นเรามาดูในไฟล์ style หลักมันก่อนดีกว่า ว่ามันเรียกจากไฟล์ไหน ซึ่งผมเฉลยเลยแล้วกันว่าไอ้ไฟล์ style.css ของธีมนี้ มัน compile มาจากไฟล์ style.scss ในโฟลเดอร์ assets/sass นั่นแหละครับ

วิธีที่ผมทำก็คือ import custom.scss เข้าไปในไฟล์หลัก style.scss

เวลาเขียนเขียนยังไง?

ในไฟล์ custom.scss ผมก็ลอกแบบวิธีเขียนมาจากธีมที่ใช้นั่นแหละครับ คือการใส่ media screen สำหรับแต่ละขนาดจอเข้าไปตรงๆเลยครับ เสร็จแล้วก็แค่ compile ออกมา เป็นอันจบ

สรุปขั้นตอนการเซ็ตอัพเบื้องต้น

  • เพิ่ม breakpoint สำหรับจอขนาดใหญ่เข้าไป
  • เพิ่มไฟล์ custom.scss สำหรับเขียน style เฉพาะที่เราต้องการเข้าไป
  • import custom style ที่เราต้องการเข้าไปในไฟล์หลักอย่าง style.scss
  • รัน npm run build:style เพื่อ compile sytle.scss ไปที่ไฟล์ style.css ของธีม

Leave a comment

Your email address will not be published. Required fields are marked *