Skip to content
สร้าง Child Block Theme ด้วยปลั๊กอิน Create Block Theme

หลังจากที่เคยแนะนำการสร้าง Child Classic Theme ไปแล้ว บทความนี้ก็จะมาแนะนำการสร้าง Child Block Theme ใน WordPress กัน สำหรับผู้ที่ไม่รู้จักหรือยังไม่เคยใช้ Block Theme ก็จะขออธิบายสั้นๆเกี่ยวกับ Block Theme

Block Theme คืออะไร

ใน WordPress เวอร์ชั่น 5.0 ทาง WordPress ได้เปิดตัว Editor ตัวใหม่ท่ี่จะนำมาใช้แทน Classic Editor เดิมที่ถูกใช้มาอย่างยาวนาน โดยใช้ชื่อว่า WordPress Block Editor หรือมีชื่อเรียกสั้นๆว่า Gutenberg โดย Block Editor แบบใหม่นี้ มีแนวคิดที่ใช้การวาง Block ต่างๆ เช่น Column, Heading. Paragraph, Image และอื่นๆ เรียกต่อกันลงมาเพมือนต่อเลโก้ ทำให้มีความยืดหยุ่นกว่า ใช้สร้าง Content ได้หลากหลาย สร้างได้ทั้งหน้า Post และ Page ซึ่งต่างจาก Classic แบบเดิมที่ค่อนข้างมีข้อจำกัดในการใส่ Content

ต่อมาใน WordPress เวอร์ชั่น 5.9 ได้มีการออก Block Theme ซี่งเป็นแนวทางใหม่ในการสร้างเว็บไซต์ ก็คือในการสร้างเว็บไซต์เราจะมองเห็น Frontend และ Backend ในหน้าจอเดียวกัน โดยไม่ต้องสลับไปมาระหว่างหน้าบ้านและหลังบ้าน โดยแนวทางการสร้างเว็บไซต์แบบนี้จะเรียกว่า Full Site Editing

Child Theme มีหลักการทำงานอย่างไร

Child Theme หรือธีมลูกจะสืบทอดคุณสมบัติ ฟังก์ชั่น และสไตล์ทั้งหมดจากธีมหลัก เมื่อมีการสร้าง Child Theme ขึ้น ธีมดั้งเดิมจะถูกเรียกว่าธีมหลัก การสืบทอดนั้นรวมถึงไฟล์ style.css ของธีมหลัก ซึ่งเป็นตัวกำหนดสไตล์หลักของธีม โดยธีมลูกสามารถแทนที่หรือขยายคุณสมบัติที่สืบทอดมาได้โดยการเพิ่มไฟล์ของตัวเองหรือโดยแก้ไขไฟล์ที่มีอยู่ แต่ว่า Block Theme นั้นจะต่างจาก Classic Theme ตรงที่จะไม่มีไฟล์ functions.php เพราะไม่มีความจำเป็น

การสร้าง Child Block Theme โดยใช้ปลั๊กอิน Create Block Theme

Create Block Theme เป็นปลั๊กอินที่พัฒนาโดยทาง WordPress เอง ใช้ในการสร้าง Block Theme และ Child Block Theme โดยมียอดดาวน์โหลดไปใช้งานตั้งแต่เวอร์ชั่นแรกจนถึงเวอร์ชั่นล่าสุดรวมแล้วมากกว่า 150,000 ครั้ง

การติดตั้งปลั๊กอิน Create Block Theme

ที่หลังบ้าน WordPress ไปที่ Plugins -> Add New Plugin

ที่หน้า Add Plugins ให้ใส่คำว่า Create Block Theme ที่ช่อง Keyword

Install และ Activate ให้เรียบร้อย

การสร้าง Child Block Theme ด้วยปลั๊กอิน Create Block Theme

เข้าไปที่ Appearance -> Create Block Theme (ควรจะใช้ Block Theme อยู่แล้วนะครับ ถึงจะเริ่มขั้นตอนนี้)

เราสามารถสร้าง Block Theme โดย Export จาก Block Theme ที่ใช้อยู่ หรือสร้างเป็นแบบ Blank Theme ได้เลย รวมถึงการสร้าง Child Block Theme แต่ไม่แนะนำให้สร้างจากหน้านี้ เพราะทางผู้พัฒนาขึ้นข้อความแจ้งเตือนว่าจะยกเลิกหน้านี้ในปลั๊กอินเวอร์ชั่นถัดไป

ให้เข้าไปที่ Appearance -> Editor

จากนั้นให้คลิกพื้นที่ทางขวาที่ใด้ก็ได้ เพื่อเข้าสู่แก้ไขและเปิดเมนูทางด้านขวาขึ้นมา

คลิกที่ไอคอนรูปประแจ (Create Block Theme) ที่อยู่ด้านบนสุดเหนือเมนูทางด้านขวา

จากนั้นคลิกที่ Create Theme

ต่อมาคลิกที่ Create Child Theme

ใส่ชื่อ Theme, และรายละเอียดอื่นๆ แนะนำว่าให้ใส่เป็นชื่อเดียวกับธีมหลักที่ใช้แล้วตามด้วยคำว่า Child ส่วนรายละเอียดอื่นๆเอามาจากธีมหลักก็ได้ จากนั้นคลิกที่ปุ่ม Create Child Theme

จะที่ Popup ขึ้นข้อความว่าสร้าง Child Theme เรียบร้อยแล้ว ให้คลิกที่ปุ่ม Close จะเป็นการ Reload หน้าแก้ไขขึ้นมาอีกครั้ง

จากนั้นคลิกที่ไอคอนรูปประแจ (Create Block Theme) ที่อยู่ด้านบนสุดเหนือเมนูทางด้านขวา และคลิกที่ Edit Theme Metadata

จะเป็น Popup แสดงข้อมูล Metadata ของธีมที่ใช้ ก็จะเห็นว่าเป็น Child Theme แล้ว โดยสามารถแก้ไขข้อมูลได้ทุกอย่างยกเว้นชื่อธีม

เมื่อเข้าไปที่ Appearance -> Themes ก็จะเห็นว่าธีมที่ Active อยู่ตอนนี้เป็น Twenty Twenty-Four Child ที่เราสร้างขึ้นนั่นเอง

จากนั้นให้เข้าไปที่ Tools -> Theme File Editor ก็จะเป็นหน้า Edit Themes ที่ใช้แก้ไขไฟล์ style.css และไฟล์อื่นๆของ Child Theme แต่จะเห็นว่าไม่มีไฟล์ functions.php เพราะใน Block Theme ไม่จำเป็นต้องใช้แล้ว

อย่างไรก็ตามถ้าอยากเพิ่มไฟล์ functions.php ก็สามารถทำได้ตามขั้นตอนตามลิงก์ด้านล่างนี้

Creating WordPress block themes – Include functions.php and theme support

สรุป

Block Theme ที่ทาง WordPress พยายามผลักดันขั้นมาเพื่อให้การสร้างเว็บไซต์สามารถจบได้ด้วยตัว WordPress เอง โดยไม่ต้องใช้ปลั๊กอิน Page Builder อื่นๆ ยังอาจไม่เป็นที่นิยมมากนัก โดยทาง WordPress ก็พยายามเต็มที้ด้วยการออกปลั๊กอินที่ใช้สร้าง Block Theme และ Child Block Theme แบบง่ายๆ ซี่งโดยตัวเห็นว่าถ้าเป็นการสร้างเว็บไซต์พื้นฐานทั่วไปที่ไม่ได้มี Design ที่ซับซ้อนเกินไป ก็สามารถสร้างโดยใช้ Block Theme และ WordPress Block Editor ได้เลย แต่อาจจะต้องลงปลั๊กอินประเภท Addon Gutenberg สัก 1-2 ตัว เพื่อเพิ่มชนิดของ Block ให้มากขึ้น

Back To Top
Search