Tag: Sage 9
เขียนธีม WordPress ด้วย Sage 9 – ตอนที่ 4 ควบคุมข้อมูลด้วย Controller
จากตอนที่ผ่านๆ มา เราได้กล่าวถึง Controller กันไปบ้างแล้ว โดยในแนวคิดการเขียนโปรแกรมแบบ MVC นั้น ส่วนของการแสดงผลและการประมวลผลจะแยกออกจากกันอย่างชัดเจน และจะช่วยให้เราสามารถนำเอาส่วนการแสดงผล (หรือ View) กลับมาใช้งานใหม่ได้สะดวกขึ้น ให้ลองนึกตามว่าเรากำลังทำเว็บอยู่เว็บหนึ่ง โดยในเว็บจะมีอยู่ส่วนหนึ่งที่เป็นการดึงข้อมูลจาก 3 แหล่งข้อมูลมาแสดง (สมมุติว่าเป็น Post, ข้อมูลจาก API, และข้อมูลจาก Database ที่เราเพิ่มเอง) แต่ว่าในส่วนการแสดงผลนั้นจะใช้โครง HTML เหมือนกันทั้งหมด ท่ามาตรฐานที่เราทำกันบ่อยๆ นั่นคือสร้างไฟล์ Partial Template ขึ้นมาไฟล์หนึ่ง จากนั้นเขียนโค้ดตรวจสอบว่าเท็มเพลตนี้ถูกเรียกจากตรงไหน แล้วค่อยดึงข้อมูลตามที่ต้องการออกมา หรือบางคนเถื่อนหน่อยก็อาจจะสร้างเท็มเพลตขึ้นมา 3 ไฟล์สำหรับแต่ละส่วนเลย แล้ว include เข้ามาเป็นส่วนๆ ไป ซึ่งแต่ละวิธีนั้นก็จะมีความยุ่งยากต่างกันออกไป Controller พระเอกที่จะมาแก้ปัญหานี้ ตามหลักการของ MVC แล้ว View และ Controller จะแยกออกจากกันอย่างอิสระ View ไม่จำเป็นต้องรับรู้ว่ามันอยู่ตรงไหน ต้องไปดึงข้อมูลจากอะไร โดย […]
เขียนธีม WordPress ด้วย Sage 9 – ตอนที่ 3 Blade Template Engine
ในสองตอนที่ผ่านมาเราได้แนะนำเกี่ยวกับ Sage 9 ไปคร่าวๆ แล้ว ซึ่งรวมไปถึงสร้างโปรเจ็กท์และการใช้จัดการแพ็คเกจต่างๆ ในขั้นต้นด้วย ปละในตอนที่ 3 นี้เราจะมาพูดถึงหัวใจสำคัญส่วนหนึ่งของ Sage 9 นั่นคือ Blade Template Engine ครับ Blade Template Engine แต่เดิมนั้นเป็นระบบเท็มเพลตของเฟรมเวิร์ก Laravel ซึ่งตามคอนเส็ปท์ของมันนั้นจะช่วยให้นักพัฒนาสามารถเขียนเท็มเพลตเพิ่มเติมได้โดยไม่จำเป็นต้องเขียนโค้ดซ้ำในส่วนเดิม ทำไมต้องใช้ Blade? แม้ว่าเวิร์ดเพรสจะมีระบบเท็มเพลตของตัวเองอยู่แล้ว แต่จริงๆ แล้วระบบเท็มเพลตของเวิร์ดเพรสนั่นเป็นแค่การเอาฟังก์ชัน PHP ธรรมดาๆ ไปโยนใส่ไว้ในไฟล์เท็มเพลตที่เป็นไฟล์ PHP ธรรมดาเท่านั้น ซึ่งในระยะยาวแล้วหากเว็บเราทำงานซับซ้อนยิ่งขึ้น โค้ดเหล่านี้ก็จะพันกันยุ่งเหยิงจนอ่านได้ลำบาก อีกทั้งในหลายๆ ครั้งเรายังจำเป็นต้องเขียนโค้ดการทำงานซ้ำในหลายๆ หน้าด้วย (ตัวอย่างชัดๆ คือการสั่ง include header และ footer เข้ามา ที่จำเป็นต้องทำในทุกๆ หน้า) แต่ด้วยคอนเส็ปท์ของ Blade นั้นที่อาศัยการเขียนโครงหลักและขยายออกไปเรื่อยๆ ทำให้เราสามารถเลี่ยงการเขียนโค้ดซ้ำในจุดนี้ลงไปได้ อีกทั้ง Blade ยังทำหน้าที่เป็น Views […]
เขียนธีม WordPress ด้วย Sage 9 – ตอนที่ 2 ระบบจัดการแพ็คเกจ
Sage 9 มีการนำเอาระบบจัดการแพ็คเพจมาใช้อยู่สองตัว คือ yarn สำหรับจัดการแพ็คเกจฟรอนต์เอ็นด์ต่างๆ (ใช้แทน npm) และ composer สำหรับจัดการแพ็คเกจ PHP ดังนั้นตรงนี้จะขอเริ่มสั้นๆ เกี่ยวกับการติดตั้งแพ็คเกจต่างๆ กันก่อน (หากใครที่คุ้นเคยกับการใช้ Composer หรือการเขียน ES6 อยู่แล้ว ก็สามารถข้ามตอนนี้ไปได้เลย) ติดตั้งแพ็คเกจ PHP แพ็คเกจ PHP นั้นค่อนข้างเข้าใจง่ายอยู่แล้ว โดยแพ็คเกจต่างๆ ที่ถูกติดตั้งผ่านคำสั่ง composer require <ชื่อแพ็คเกจ> จะถูกโหลดอัตโนมัติผ่านไฟล์ autoload.php และสามารถเรียกใช้ได้ทันที ทั้งนี้มีข้อควรระวังอยู่อย่างหนึ่งคือใน Sage 9 นั้นจะมีการใช้ namespace เข้ามาช่วยในการจัดการคลาสต่างๆ ด้วย ซึ่งถ้าหากว่าแพ็คเกจที่ติดตั้งเข้ามา (หรือคลาสใดๆ ก็ตาม) ที่ไม่มีการกำหนด namespace เอาไว้ เวลาเรียกใช้จะต้องใส่ \ นำหน้าไปด้วย เช่น ติดตั้งแพ็คเกจ Front-end (JS และ CSS) ในด้านแพ็คเกจฟรอนต์เอ็นด์นั้นอาจจะค่อนข้างเป็นเรื่องใหม่สำหรับคนทำเวิร์ดเพรสอยู่ในเล็กน้อย […]
เขียนธีม WordPress บนเทคโนโลยีสมัยใหม่ด้วย Sage 9 – ตอนที่ 1 แนะนำ Sage 9
Sage (ปัจจุบันเป็นเวอร์ชัน 9 ชื่อเดิมคือ Roots) เป็น Starter theme หรือธีมต้นแบบที่พัฒนาโดย Roots.io สำหรับใช้ต่อยอดสร้างเป็นธีมของเว็บขึ้นมาอีกต่อหนึ่ง (แบบเดียวกับ Underscores) และจุดเด่นของ Sage นั้นคือนำเอา Workflow และเทคโนโลยีใหม่ๆ มาช่วยในการพัฒนาธีมด้วย เว็บไซต์หลัก GitHub ว่ากันตามจริงนั้น Sage เป็นเพียงธีมเปล่าๆ ที่แทบไม่มีฟีเจอร์อะไรเกี่ยวกับธีมมาให้เลย แต่จะเน้นไปที่เรื่องของ Workflow ที่ทันสมัยเป็นหลัก (จะได้ถูกเลิกค่อนขอดว่าใช้ Workflow โบราณเสียที 5555) โดยสิ่งที่ Sage นำมาใช้นั้นมีดังนี้ ใช้ Composer ในการจัดการแพ็คเกจ PHP ใช้ Yarn ในการจัดการแพ็คเกจสำหรับ Front-end ใช้ SASS ในการเขียนสไตล์ชีท แยก Views และ Controller ออกจากกัน ใช้ Blade Template ของ […]
