Skip to main content
0
Library / FrameworkWordPress

สร้าง Theme ให้เว็บ WordPress ของเราด้วย Frontity

เชื่อว่ามีเพื่อน ๆ หลาย ๆ ที่รู้จัก WordPress แต่ก็น่าจะน้อยคนที่น่าจะเคยสัมผัสกันมาบ้าง แต่เพื่อน ๆ รู้หรือไม่ว่า การตกแต่งหรือออกแบบหน้าเว็บไซต์ WordPress ของเรานอกจากการทำเป็นตัวเว็บของ WordPress เองหรือแก้ไขด้วย PHP แล้ว เรายังสามารถใช้ React ได้เช่นกัน! จะเป็นยังไง มาดูกันไปด้วยกันครับกับ Frontity Framework!

เขียนโดย
Thanawat Udchachon
Internship @ borntoDev

การทำงานของ Frontity

ก่อนอื่นเรามารู้จักการทำงานของ Frontity กันก่อนดีกว่าว่ามันทำงานยังไง โดยอันดับแรกเรามาทำความรู้จักกับคำว่า CMS กันก่อนดีกว่า CMS หรือ Content Management System เป็นระบบสำหรับหรับการจัดการ Content ตามชื่อ โดย CMS ที่น่าจะคุ้นหูเพื่อน ๆ กันก็อย่างเช่น Joomla หรือ ตัว WordPress เองก็เช่นกัน โดย CMS เนี่ยแบ่งออกเป็น 3 ประเภทคือ 

  • Traditional CMS : มีทั้ง ฐานข้อมูล หน้าบ้าน หลังบ้านอยู่ในเซิร์ฟเวอร์เดียวกัน

  • Decoupled CMS : จะมีการแยกส่วนกัน ซึ่งสามารถส่งข้อมูลทาง API ได้

  • Headless CMS : จะคล้ายกับแบบ Decoupled แต่จะตัดส่วนหน้าบ้านทิ้งไปเลยนั่นเอง

โดยลักษณะการทำงานของ Frontity จะมีลักษณะดังนี้

จะเห็นได้ว่าการทำงานโดยรวมจะเริ่มจาก WordPress เองที่เป็นลักษณะของ Headless CMS ที่มีหน้าที่สำหรับการจัดการ content เพียงอย่างเดียว แล้วก็ส่ง API ข้อมูล content ต่าง ๆ มาที่ Frontity สำหรับการแสดงผลนั่นเองครับ

โดยสิ่งที่ทำให้ Frontity นั้นโดดเด่นขึ้นมาเลยก็คือความง่ายครับ ว่าแต่มันง่ายยังไงล่ะ? เราลองคิดดูครับว่าหากเราต้องการทำเว็บไซต์สำหรับการเขียน blog เราต้องมีอะไรบ้าง เราต้องทำหน้าบ้าน หลังบ้าน ระบบล็อกอิน ระบบเขียน-แก้ไข-ลบโพสต์ มีฐานข้อมูล การ Routing อะไรต่าง ๆ มามายเลยใช่ไหมครับ แต่สำหรับ Frontity แล้ว สิ่งที่เราต้องทำมีเพียงหน้าบ้านอย่างเดียวเลยครับ เพราะระบบที่เหลือ WordPress มีให้พร้อมอยู่แล้ว

 

การติดตั้ง Frontity

เช่นเดี่ยวกับ React การใช้งานเจ้า Frontity เราต้องติดตั้ง Node บนเครื่องเราก่อน สำหรับเพื่อน ๆ ที่ยังไม่ได้ติดตั้ง Node บนเครื่อง เพื่อน ๆ ก็สามารถเข้าไปติดตั้งตั้งตามลิงก์นี้ได้เลยครับผม https://nodejs.org/en/download/

หลังจากที่เราได้ทำการติดตั้ง Node เรียบร้อยแล้วนะครับก็มาถึงการสร้างโปรเจกต์ Frontity ก็ให้เพื่อน ๆ เปิด cmd หรือ terminal ขึ้นมาแล้วก็เข้าไปใน directory ที่เพื่อน ๆ ต้องการสร้างโปรเจกต์แล้วพิมพ์คำสั่ง npx frontity create [ชื่อโปรเจกต์ของเรา]

จากนั้นก็ทำการเลือก theme เริ่มต้นของเรากัน ซึ่งก็จะมี mars-theme และ twentytwenty-theme ครับ โดยธีมทั้ง 2 อันนี้เป็นเหมือนธีมบน WordPress เลยครับเพียงแต่สร้างขึ้นด้วย Component ของ React แทนที่จะเป็นเทมเพลต PHP ตามปกติ ซึ่งตรงนี้ Frontity จะแนะนำเป็น mars-theme ถ้าหากเราทำโปรเจกต์ Frontity เป็นครั้งแรกเพราะมันง่ายต่อการทำความเข้าใจมากกว่าครับ แต่ทั้งนี้ทั้ง 2 ธีมก็รองรับการปรับแต่งเช่นเดียวกันทั้งคู่ครับ

จากนั้นเราก็จะโดนถามว่าจะรับอีเมลสำหรับการอัปเดตไหม ถ้าต้องการก็พิมพ์ y แล้วก็จะมีที่สำหรับใส่เมลครับ ถ้าไม่ต้องการก็สามารถพิมพ์ n ก็ถือว่าเป็นอันเสร็จครับสำหรับการติดตั้ง Frontity

เมื่อติดตั้ง Frontity เสร็จแล้วเราก็ cd เข้าไปในโปรเจกต์ของเราแล้วพิมพ์คำสั่ง npx frontity dev หรือ npm run dev สำหรับการรันโปรเจกต์ของเราสำหรับการ dev ได้เลยครับ เมื่อรันโปรเจกต์ขึ้นมาแล้วเราก็จะได้หน้าเว็บในลักษณะนี้มาอยู่บน port 3000 เช่นเดียวกับ React

 

โครงสร้างของ Frontity

หลังจากที่เรารู้จักการทำงานของ Frontity เป็นที่เรียบร้อยแล้ว เมื่อเข้ามาดูในโฟลเดอร์โปรเจกต์ของเราจะเห็นว่าจากโครงสร้างไฟล์แล้วมีลักษณะคล้าย React ที่พวกเราคุ้นเคยกันเป็นอย่างมาก แต่ก็มีจำนวนไฟล์ที่เยอะกว่าเช่นกัน โดยในที่นี้เราจะไม่ได้มาอธิบายทุกไฟล์ แต่เราจะมามาลองดูที่จำเป็นสำหรับการใช้งานเบื่องต้นกัน

สำหรับไฟล์แรกที่เราจะมาดูกันก็คือ frontity.setting.js ซึ่งเป็นส่วนของการตั้งค่าทั้งหมดของโปรเจกต์นี้ เมื่อเปิดขึ้นมาจะเห็นส่วนแรกซึ่งเป็นส่วนของ title และ description ที่แสดงอยู่บนหน้าเว็บครับ

ต่อมาทำการเลื่อนลงมาจนถึงส่วนเป็นเป็น url ที่อยู่ใน state

...
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "url": "https://test.frontity.org"
        }
      }
    },
...

โดยจากลิงก์นี้ เมื่อลองเปิดออกมาก็จะพบว่าเป็นหน้าเว็บที่มีข้อมูลและ menu ต่าง ๆ เหมือนกับโปรเจกต์ที่เราสร้างขึ้นมาเป๊ะ ๆ เลย เนื่องจากลิงก์นี้เป็น API ตัวอย่างที่ Frontity ทำไว้ให้ แล้วเราก็ใช้ API เดียวกันนี้อยู่กับโปรเจกต์ของเรา เลยมีข้อมูลที่เหมือนกันครับ

โดยในส่วนนี้เพื่อน ๆ ก็สามารถนำ site WordPress ของเรามาใส่ได้เลยครับหากมีอยู่แล้ว แต่ถ้าหากเพื่อน ๆ ยังไม่มี ก็สามารถเข้าไปที่ลิงก์นี้ได้เลยครับ https://wordpress.com/start/user?ref=calypso-sidebar

ที่นี้เรามาดูเรื่องของ Routing กันบ้างดีกว่าที่เราได้บอกว่าง่ายในตอนต้นนี่มันง่ายยังไง

ภายในไฟล์ frontity.setting.js เดียวกันนี้ จะเห็นได้ว่ามีส่วนที่อยู่ใน menu ที่มีอยู่ 2 ส่วนครับคือ ชื่อที่จะแสดงบนหน้าเว็บ และ path

"packages": [
    {
      "name": "@frontity/mars-theme",
      "state": {
        "theme": {
          "menu": [
            [
              "Home", //ชื่อ
              "/" //path
            ],

ซึ่งตัว path เนี่ยจะเป็น path จาก API ของ WordPress ที่เราใส่ไปเลยครับ โดยสำหรับการแก้ไข path ในส่วนนี้นะครับให้เราเข้าไปที่หน้า WordPress ของเราแล้วทางด้านซ้ายเข้าไปที่หัวข้อ Pages แล้วเราก็ทำการแก้ไขได้ตามที่ต้องการครับ หรือที่ลิงก์นี้ได้เลยครับ https://wordpress.com/pages/[domain ของเรา]/

หลังจากที่เราแก้ไข Page บน WordPress แล้วก็อย่าลืมเปลี่ยน path ใน frontity.setting.js ให้ตรงกันด้วยนะครับ

ส่วนสุดท้ายที่จะพูดถึงในไฟล์ frontity.setting.js ก็คือ featured ครับ

"featured": {
             "showOnList": false,
             "showOnPost": false
            }

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

 

เริ่มต้นสร้างธีมด้วย Frontity

ในที่สุดเราก็มาถึงส่วนสำหรับการเขียนโค้ดกันแล้วนะครับ ส่วนที่ทำให้อาจจะสับสนเล็กน้อยคือในโปรเจกต์ Frontity ของเรามี index.js อยู่ 2 ตัวครับ มี index.js ที่อยู่ใน src และ index.js ที่อยู่ใน components อีกที่

โดยเมื่อเราเข้ามาดูใน index.js ที่อยู่ใน src จะพบว่ามันดูไม่ค่อยเหมือน React ที่เราคุ้นเคยกันสักเท่าไร ดูจะเป็นส่วนของ config ซะมากกว่า ส่วนของการทำงานจริง ๆ จะอยู่ตรง root ครับ โดยเมื่อเรามาดูที่ root เราก็จะเห็นว่ามัน exprort Theme ออกมา ซึ่ง Theme นี้เมื่อดูจากการ import ข้างบนก็จะพบว่ามันก็คือ index.js ที่อยู่ใน component นั่นเอง และเมื่อเราเข้ามาดูที่ index.js ที่อยู่ใน component เราก็จะเจอกับการเขียนที่ใกล้เคียงกับ React ที่เราคุ้นเคยกันครับ ที่ซึ่งจะมีทั้งการ import component ต่าง ๆ ส่วนของการ return ที่เป็นส่วนของการแสดงผลทั้ง Title หรือ Header ต่าง ๆ แต่ก็จะมีเพิ่มเติมขึ้นมาคือ data.XXX ครับ ส่วนนี้จะเป็นข้อมูลที่มาจาก API ของ WordPress ครับ และจากในโฟลเดอร์นี้เองที่เราจะสามารถวาดลวดลาย React ของเราในการตกแต่งลงไปได้เลยครับผม

 

สรุปสุดท้ายสิ่งที่ผู้อ่านจะได้รับ

เป็นยังไงกันบ้างครับสำหรับการสร้างเว็บไซต์ด้วย Frontity เรียกได้ว่าสะดวกสบายสุด ๆ ไปเลยนะครับเพราะตัว Frontity ก็แทบจะเตรียมทุกอย่างให้เรามาแล้ว และ WordPress ที่ก็ใช้งานได้ง่ายและก็น่าจะผ่านมือเพื่อน ๆ กันมาบ้างอยู่แล้ว เรียกว่าพร้อมสุด ๆ เลยโดยเฉพาะเว็บไซต์ประเภทบทความ แต่สำหรับ community ของ Frontity นั้นเรียกได้ว่าค่อนข้างเล็กเลย เลยทำให้การหาข้อมูลนั้นสามารถหาได้ยากอยู่สักหน่อย แต่บนเว็บไซต์หลักของ Frontity เองก็ยังมีข้อมูลให้อ่านอยู่พอสมควรและการทำงานของ Frontity เองก็ไม่ได้แตกต่างจาก React มากจึงเรียกได้ว่าไม่ต้องปรับตัวมากครับ ยังไงก็ฝากกันไว้ด้วยนะครับสำหรับการสร้างเว็บไซต์ด้วย Frontity

 

อ้างอิงจาก

  1. How To Use Frontity To Create A Headless WordPress Theme With React, สืบค้นเมื่อ 4 เมษายน 2565 จาก: https://www.youtube.com/watch?v=whsYQ9fb64k
  2. Frontity, สืบค้นเมื่อ 7 เมษายน 2565 จาก: https://frontity.org/
  3. Getting Started with Frontity Framework, สืบค้นเมื่อ 7 เมษายน 2565 จาก: https://www.youtube.com/watch?v=FCnGfYfWulA
  4. ออกแบบสร้าง APIs แบบโคตรเร็ว, จัดการเนื้อหาแบบโคตรง่าย ด้วย Strapi Headless CMS, สืบค้นเมื่อ 8 เมษายน 2565 จาก จาก : https://bit.ly/3xnMygV

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

BorntoDev

Author BorntoDev

BorntoDev Co., Ltd.

More posts by BorntoDev

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

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

  • คุกกี้สำหรับการติดตามทางการตลาด

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

บันทึกการตั้งค่า