เขียนธีม WordPress ด้วย Sage 9 – ตอนที่ 2 ระบบจัดการแพ็คเกจ

Sage 9 มีการนำเอาระบบจัดการแพ็คเพจมาใช้อยู่สองตัว  คือ yarn สำหรับจัดการแพ็คเกจฟรอนต์เอ็นด์ต่างๆ (ใช้แทน npm) และ composer สำหรับจัดการแพ็คเกจ PHP

ดังนั้นตรงนี้จะขอเริ่มสั้นๆ เกี่ยวกับการติดตั้งแพ็คเกจต่างๆ กันก่อน (หากใครที่คุ้นเคยกับการใช้ Composer หรือการเขียน ES6 อยู่แล้ว  ก็สามารถข้ามตอนนี้ไปได้เลย)

ติดตั้งแพ็คเกจ PHP

แพ็คเกจ PHP นั้นค่อนข้างเข้าใจง่ายอยู่แล้ว  โดยแพ็คเกจต่างๆ ที่ถูกติดตั้งผ่านคำสั่ง composer require <ชื่อแพ็คเกจ> จะถูกโหลดอัตโนมัติผ่านไฟล์ autoload.php และสามารถเรียกใช้ได้ทันที  ทั้งนี้มีข้อควรระวังอยู่อย่างหนึ่งคือใน Sage 9 นั้นจะมีการใช้ namespace เข้ามาช่วยในการจัดการคลาสต่างๆ ด้วย  ซึ่งถ้าหากว่าแพ็คเกจที่ติดตั้งเข้ามา (หรือคลาสใดๆ ก็ตาม) ที่ไม่มีการกำหนด namespace เอาไว้  เวลาเรียกใช้จะต้องใส่ \ นำหน้าไปด้วย  เช่น

$some_class = new \MySomeClass($args);

ติดตั้งแพ็คเกจ Front-end (JS และ CSS)

ในด้านแพ็คเกจฟรอนต์เอ็นด์นั้นอาจจะค่อนข้างเป็นเรื่องใหม่สำหรับคนทำเวิร์ดเพรสอยู่ในเล็กน้อย  โดยใน Sage 9 นี้จะใช้ yarn เป็นตัวจัดการแพ็คเกจต่างๆ ด้วย  ซึ่งเราสามารถติดตั้งแพ็คเกจฟรอนต์เอ็นด์ต่างๆ เหล่านี้ได้ผ่านคำสั่ง yarn add <ชื่อแพ็คเกจ> เช่น yarn add modal-video เพื่อติดตั้งแพ็คเกจ Modal Video

โดยปกติแล้วแพ็คเกจที่อยู่บนระบบของ NPM มักจะเขียนมาเป็นโมดูลที่พร้อมให้อิมพอร์ตเข้ามาได้ทันที (ต้องศึกษาเรื่องการเขียน ES6 เพิ่มเติมสักเล็กน้อยครับ) แต่ไฟล์ CSS ต่างๆ ที่มากับแพ็คเกจนั้นเราจำเป็นต้องอิมพอร์ตแยกในไฟล์ main.scss อีกต่อหนึ่งด้วย  โดยให้เปิดไฟล์ /resources/assets/styles/main.scss ขึ้นมา  จะเห็นว่ามีบล็อคคอมเมนต์  Import npm dependencies อยู่  ให้เราใช้คำสั่ง import ชี้ไปยังไฟล์ SCSS ของโปรเจ็กท์นั้นๆ โดยจะต้องขึ้นต้นด้วยเครื่องหมาย ~ ด้วย  ซึ่งเครื่องหมาย ~ นี้จะหมายถึงไดเรคทอรี่ /node_modules ดังนั้นจากตัวอย่างที่เราติดตั้ง Slick Carousel ผ่านทาง yarn ไฟล์ SASS ของ Slick Carousel จะอยู่ที่ /node_modules/slick-carousel/slick/slick.scss ก็ให้เราใช้คำสั่ง @import "~slick-carousel/slick/slick.scss" เพื่ออิมพอร์ตไฟล์ SCSS นั้นเข้ามาในไฟล์หลัก

โครงสร้างไฟล์ JavaScript ของ Sage 9

ไฟล์ JavaScript ของ Sage 9 หลักๆ จะเก็บเอาไว้ที่ resources/assets/scripts โดยจะมีโฟลเดอร์แยกอีก 2 ตัวหลัก (จาก 3 ตัว) คือ autoload ที่จาวาสคริปท์ในโฟลเดอร์นี้จะถูกโหลดเข้ามาโดยอัตโนมัติในขั้นตอนการคอมไพล์  และโฟลเดอร์ routes สำหรับเก็บไฟล์จาวาสคริปท์สำหรับรันในแต่ละหน้า (ชื่อไฟล์จะตั้งชื่อว่าอะไรก็ได้  แต่ในขั้นตอนอิมพอร์ตเข้าไปใน main.js จะใช้ชื่อไฟล์ที่ตรงกับ ชื่อคลาสของ body ในแต่ละหน้า)

ระบบ routing ในลักษณะนี้เรียกว่า DOM-based routing ที่จะใช้คลาสในแท็ก body ในการตรวจสอบว่าอยู่ในหน้าไหน

ในไฟล์ route แต่ละไฟล์  จะมีโครงสร้างในลักษณะนี้

export default {
  init() {
    // โค้ดที่รันทันทีที่โหลดเข้ามา
  },
  finalize() {
    // โค้ดที่รันหลังจากโหลดหน้าเว็บเซ็ต
  },
};

ซึ่งเราจะสามารถเขียนโค้ดของเราในส่วน init() หรือ finalize() ได้เลย  ขึ้นอยู่กับว่าโค้ดเราจะรันในขั้นตอนไหน

หลังจากที่เราเขียนไฟล์ route เสร็จแล้ว  ให้เปิดไฟล์ main.js ขึ้นมา  แล้วให้ทำการ import route ของเราเข้ามาก่อน (ในส่วนของ Local dependencies) แล้วไปเพิ่มชื่อ route ในตัวแปร routes ด่านล่างอีกที (ในส่วนของ populate router) โดยในขั้นตอนการ import นั้น  เราต้องตั้งชื่อโมดูลนั้นๆ ให้ตรงกับชื่อคลาสในแท็ก body ของหน้าที่เราจะอิมพอร์ตเข้ามาด้วย และจะต้องใช้เป็นลักษณะ camelCase เช่นเราจะอิมพอร์ต route สำหรับหน้า about-us (มีคลาส about-us อยู่ในแท็ก body) ก็ต้องตั้งชื่อโมดูลว่า aboutUs

ตัวอย่าง

// import local dependencies
import Router from './util/Router';
import common from './routes/common';
import home from './routes/home';
import aboutUs from './routes/about';

/** Populate Router instance with DOM routes */
const routes = new Router({
  // All pages
  common,
  // Home page
  home,
  // About Us page, note the change from about-us to aboutUs.
  aboutUs,
});

รูท common จะถูกรันในทุกๆ หน้า

ไฟล์จาวาสคริปท์เหล่านี้จะถูก Webpack คอมไพล์ออกมาเป็นไฟล์ main.js เพียงไฟล์เดียว  และถูก enqueue เข้ามาให้โดยอัตโนมัติ

จริงๆ ใครที่ยังชินกับการเขียนจาวาสคริปท์ลงในไฟล์เดียวแล้ว enqueue เข้ามาทำงานตรงๆ อยู่เหมือนอย่างที่ทำกันมาอย่างช้านาน  ก็ยังคงสามารถทำได้อยู่  โดยจะต้องเข้าไปเพิ่ม entry point ในไฟล์ resources/assets/config.json แล้วสั่ง enqueue ไฟล์นี้เพิ่มเข้าไป (ยังไงเดี๋ยวจะเขียนวิธีทำแบบละเอียดให้อีกทีหนึ่ง)


ตอนต่อไป

ในตอนต่อไปจะเป็นการใช้งาน Blade Template แบบพื้นฐาน  และจากนั้นจะเป็นเรื่องการใช้ Controller เพื่อ expose ตัวแปรต่างๆ ออกไปยังไฟล์เท็มเพลต  ซึ่งการใช้ Blade (เป็นส่วนของ View) คู่กับ Controller นั้น  จะช่วยลดความยุ่งเหยิงของโค้ดลงได้  เพราะเราไม่จำเป็นต้องใส่ logic การประมวลผลใดๆ เข้ามาใน View เลย

บทความตอนอื่นๆ


Posted

in

by

Comments

4 responses to “เขียนธีม WordPress ด้วย Sage 9 – ตอนที่ 2 ระบบจัดการแพ็คเกจ”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.