ออกแบบด้านกราฟิก · GPC-33

Creating WordPress Block Themes

หลักสูตร Creating WordPress Block Themes เป็นการอบรมสร้างธีม WordPress แบบ Block Theme ด้วย theme.json, Templates, Patterns และ Site Editor พร้อมแปลงงานจาก Figma เป็นธีม เหมาะกับผู้ดูแลเว็บ WordPress นักพัฒนาเว็บ และฟรีแลนซ์ที่มีพื้นฐาน HTML, CSS และ PHP จบแล้วได้ธีมของตนเองที่ติดตั้งบนโฮสต์ได้

อัปเดตล่าสุด 9 ต.ค. 2569

ราคาเริ่มต้น 5,850 บาท / ท่าน 6,500 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา12 ชั่วโมง · 2 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

WordPress ปัจจุบันเปลี่ยนวิธีสร้างธีมไปจากเดิมมาก ธีมรุ่นใหม่เป็นแบบ Block Theme ที่กำหนดสี ฟอนต์ ระยะห่าง และเลย์เอาต์ทั้งเว็บไว้ใน theme.json ประกอบหน้าเว็บจาก Template และ Template Parts ที่เป็นบล็อก และให้ผู้ดูแลเว็บปรับหน้าตาได้เองใน Site Editor โดยไม่ต้องแก้โค้ด ทีมที่ยังสร้างธีมแบบเดิมด้วยไฟล์ PHP ล้วนจึงดูแลยากขึ้นและใช้ความสามารถใหม่ของ WordPress ได้ไม่เต็มที่

หลักสูตรนี้พาผู้เรียนสร้าง Block Theme ของตนเองบน WordPress 7.1 ตั้งแต่โครงสร้างไฟล์ Template Hierarchy และ theme.json ทั้งส่วน Settings และ Styles รวมถึงสไตล์ตามขนาดหน้าจอและสถานะ Hover ที่เพิ่มมาในรุ่นล่าสุด สร้าง Templates, Template Parts, Query Loop, Block Patterns และ Style Variations ใช้ Site Editor ร่วมกับปลั๊กอิน Create Block Theme แปลงงานออกแบบจาก Figma เป็นธีม แล้วปิดท้ายด้วย Workshop สร้างธีมเว็บองค์กรจนติดตั้งบนโฮสต์ได้จริง (อบรม 2 วัน วันละ 6 ชั่วโมง รวม 12 ชั่วโมง ระดับ Intermediate)

สิ่งที่คุณจะได้รับ

เข้าใจความต่างของ Classic Theme, Block Theme และ Hybrid Theme บน WordPress 7.1
วางโครงสร้างไฟล์ของ Block Theme ตาม Template Hierarchy ได้ถูกต้อง
ตั้งค่าสี ฟอนต์ ระยะห่าง และสไตล์ทั้งเว็บด้วย theme.json เวอร์ชัน 3 ได้
สร้าง Templates, Template Parts, Query Loop และ Block Patterns ที่ใช้ซ้ำได้
ใช้ Site Editor และ Create Block Theme ออกแบบแล้วบันทึกกลับเป็นไฟล์ธีมได้
แปลงงานออกแบบจาก Figma เป็นธีมที่ Responsive และส่งมอบเป็นไฟล์ ZIP ได้

หลักสูตรนี้เหมาะสำหรับ

ผู้ดูแลเว็บไซต์ WordPress ขององค์กรที่ต้องการธีมเป็นของตนเอง
นักพัฒนาเว็บที่เคยทำธีมแบบเดิมและต้องการย้ายมาทำ Block Theme
ฟรีแลนซ์และเอเจนซีที่สร้างเว็บ WordPress ให้ลูกค้าเป็นประจำ
นักออกแบบที่มีพื้นฐานโค้ดและอยากนำงานจาก Figma ขึ้นเป็นธีมเอง

พื้นฐานของผู้เข้าอบรม

เขียน HTML และ CSS ได้ เช่น โครงหน้าเว็บ Class และ Selector
อ่านและแก้ PHP เบื้องต้นได้ เช่น ตัวแปร ฟังก์ชัน และอาร์เรย์
เคยใช้งานหลังบ้าน WordPress เช่น สร้างเพจ บทความ และเมนู
โน้ตบุ๊กที่ติดตั้ง VS Code และ XAMPP หรือ Docker ได้ พร้อมสิทธิ์ติดตั้งโปรแกรม

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตรการสร้าง WordPress Theme อบรม 2 วัน 12 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ระดับ Intermediate เนื้อหาเปลี่ยนจากการสร้างธีมด้วยไฟล์ PHP บน WordPress 6.x มาเป็นการสร้าง Block Theme บน WordPress 7.1 ด้วย theme.json, Templates, Template Parts, Block Patterns, Style Variations และ Site Editor พร้อมแปลงงานออกแบบจาก Figma เป็นธีม เครื่องมือทั้งหมดเป็นโอเพนซอร์สหรือใช้ฟรี ผู้เรียนจะได้เอกสารประกอบการอบรม ไฟล์ Figma ตัวอย่าง และธีมเฉลยทุก Lab กลับไปใช้งานต่อ

Day 1 พื้นฐาน Block Theme และ theme.json

Section 1: Lab: WordPress 7.1 และเครื่องมือพัฒนาธีม

ธีมแบบ Classic, Block และ Hybrid ต่างกันอย่างไร และของใหม่ใน WordPress 7.0 และ 7.1
เตรียมเครื่องด้วย XAMPP, wp-env หรือ WordPress Playground บน PHP 8.3 ขึ้นไป
ตั้งค่า VS Code และนำเข้าข้อมูลตัวอย่างสำหรับทดสอบธีม
Lab: ติดตั้ง WordPress 7.1 ให้พร้อมใช้ตลอดหลักสูตร

Section 2: โครงสร้าง Block Theme และ Template Hierarchy

ไฟล์ที่ต้องมี: style.css พร้อมส่วนหัวของธีม และ templates/index.html
โฟลเดอร์ templates, parts, patterns และ styles ทำหน้าที่อะไร
Template Hierarchy: index, home, single, page, archive, search และ 404
Lab: สร้างธีมขั้นต่ำที่ติดตั้งและเปิดใช้งานได้

Section 3: Lab: theme.json ส่วน Settings

โครงสร้าง theme.json เวอร์ชัน 3: version, settings, styles และ templateParts
Color Palette และ Font Families พร้อมไฟล์ฟอนต์ภาษาไทยในธีม
Font Sizes แบบ Fluid, Spacing Scale และ Layout ด้วย contentSize กับ wideSize
Lab: ตั้ง Design Token ของสี ฟอนต์ และระยะห่างให้ธีม

Section 4: Lab: theme.json ส่วน Styles

สไตล์ทั้งเว็บ และสไตล์ของ Elements เช่น ลิงก์ ปุ่ม และหัวข้อ
สไตล์รายบล็อก เช่น Navigation, Quote และ Button
สถานะ Hover, Focus และ Active กับสไตล์ตามขนาดหน้าจอใน WordPress 7.1
Lab: ปรับหน้าตาทั้งเว็บจาก theme.json ไฟล์เดียว

Section 5: Lab: Templates, Template Parts และ Query Loop

สร้าง parts/header.html และ parts/footer.html พร้อม Site Logo และ Navigation
เขียน Template ด้วย Block Markup และเรียก Template Part
Query Loop และ Post Template สำหรับหน้ารวมบทความและหน้าหมวดหมู่
Template ของ single, page, archive และ 404
Lab: หน้าแรก หน้าบทความ และหน้ารวมบทความของธีม

Section 6: Lab: Site Editor และ Create Block Theme

แก้ Template, Template Parts และ Styles ใน Site Editor
ความต่างระหว่างค่าที่ผู้ใช้แก้เก็บในฐานข้อมูลกับค่าที่อยู่ในไฟล์ธีม
บันทึกการแก้ไขกลับเป็นไฟล์ธีมด้วย Create Block Theme
Lab: ออกแบบส่วนหัวใน Site Editor แล้วบันทึกลงธีม

Day 2 Patterns, Figma และการส่งมอบธีม

Section 7: Lab: Block Patterns

ไฟล์ Pattern ในโฟลเดอร์ patterns และส่วนหัว Title, Slug และ Categories
Pattern สำหรับหน้าใหม่ และ Pattern ที่ผูกกับประเภทบล็อก
Synced Pattern กับ Pattern ทั่วไปต่างกันอย่างไร
ข้อความที่แปลภาษาได้และรูปภาพที่อยู่ในธีม
Lab: ชุด Pattern ของ Hero, บริการ, ทีมงาน และ Call to Action

Section 8: Lab: Style Variations และ Section Styles

Style Variations ในโฟลเดอร์ styles สำหรับชุดสีและฟอนต์ทางเลือก
Section Styles ที่ใช้กับบล็อก Group และ Columns
Block Style เพิ่มเติมสำหรับปุ่มและรูปภาพ
Lab: ทำธีมให้สลับได้ทั้งโทนสว่างและโทนเข้ม

Section 9: Lab: แปลงงานออกแบบจาก Figma เป็นธีม

อ่าน Variables และ Styles ใน Figma แล้วแปลงเป็นค่าใน theme.json
แปลง Auto Layout เป็นบล็อก Group, Row, Stack และ Grid
ส่งออกรูปภาพเป็น WebP หรือ AVIF และไอคอนเป็น SVG
Lab: สร้างหน้าแรกของธีมให้ตรงกับไฟล์ Figma ทุกขนาดหน้าจอ

Section 10: functions.php และ PHP ที่ยังจำเป็น

โหลด CSS และ JavaScript เพิ่มเฉพาะที่ต้องใช้ และสไตล์รายบล็อก
ลงทะเบียน Block Style และหมวดของ Pattern
Custom Templates และพื้นที่ของ Template Parts ใน theme.json
เมื่อไรยังต้องใช้ WP_Query และ PHP Pattern แทน Query Loop
Child Theme ของ Block Theme สำหรับปรับธีมที่มีอยู่

Section 11: คุณภาพธีมและการส่งมอบ

Accessibility: สีตัดกัน ลำดับหัวข้อ และการใช้คีย์บอร์ด
ความเร็ว: ฟอนต์ รูปภาพ และขนาด CSS ตรวจด้วย Lighthouse
Export ธีมเป็น ZIP พร้อม screenshot.png และ readme
ติดตั้งบนโฮสต์ และย้ายเว็บจากเครื่องขึ้นโฮสต์ด้วยปลั๊กอินย้ายเว็บ

Section 12: Workshop: ธีมเว็บไซต์องค์กรจาก Figma

เริ่มจากไฟล์ Figma ตัวอย่างของเว็บองค์กรหรือร้านค้า
สร้าง theme.json, Templates, Parts และ Patterns ให้ครบทุกหน้าหลัก
ทดสอบบนมือถือ แท็บเล็ต และเดสก์ท็อป แล้วปรับสไตล์ตามหน้าจอ
Export เป็น ZIP ติดตั้งบนเว็บใหม่ และนำเสนอผลงาน

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

Block Theme ต่างจากธีม WordPress แบบเดิมอย่างไร

ธีมแบบเดิมสร้างหน้าเว็บจากไฟล์ PHP อย่าง header.php, footer.php และ single.php ส่วน Block Theme สร้างหน้าเว็บจาก Template และ Template Parts ที่เป็นไฟล์ HTML ประกอบด้วยบล็อก และกำหนดสี ฟอนต์ ระยะห่าง และเลย์เอาต์ทั้งเว็บไว้ใน theme.json ผู้ดูแลเว็บจึงปรับส่วนหัว ส่วนท้าย และสไตล์ได้เองใน Site Editor โดยไม่ต้องแก้โค้ด หลักสูตรนี้เน้น Block Theme บน WordPress 7.1 และสรุปธีมแบบเดิมให้เห็นเพื่อดูแลเว็บเก่าได้

Block Theme ต้องมีไฟล์อะไรบ้าง

Block Theme ขั้นต่ำต้องมี style.css ที่มีคอมเมนต์ส่วนหัวระบุชื่อธีม และไฟล์ index.html ในโฟลเดอร์ templates ในงานจริงมักเพิ่ม theme.json สำหรับตั้งค่าและสไตล์ทั้งเว็บ โฟลเดอร์ parts สำหรับ header.html และ footer.html โฟลเดอร์ patterns สำหรับ Block Patterns โฟลเดอร์ styles สำหรับ Style Variations และ functions.php เมื่อต้องโหลดไฟล์หรือลงทะเบียนสิ่งที่ theme.json ทำไม่ได้

แปลงงานออกแบบจาก Figma เป็น Block Theme มีขั้นตอนอย่างไร

เริ่มจากอ่าน Variables และ Styles ใน Figma เช่น สี ฟอนต์ และระยะห่าง แล้วแปลงเป็นค่าใน theme.json ให้เป็น Design Token ของธีม จากนั้นแปลง Auto Layout เป็นบล็อก Group, Row, Stack หรือ Grid สร้าง Template Parts สำหรับส่วนหัวและส่วนท้าย ทำส่วนที่ใช้ซ้ำเป็น Block Patterns ส่งออกรูปภาพเป็น WebP หรือ AVIF แล้วตรวจการแสดงผลทุกขนาดหน้าจอ หลักสูตรนี้ฝึกขั้นตอนนี้กับไฟล์ Figma ตัวอย่างจนได้ธีมที่ติดตั้งได้จริง

หลักสูตร Creating WordPress Block Themes เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับผู้ดูแลเว็บไซต์ WordPress ขององค์กร นักพัฒนาที่เคยทำธีมแบบเดิมและต้องการย้ายมาทำ Block Theme ฟรีแลนซ์และเอเจนซีที่สร้างเว็บให้ลูกค้า และนักออกแบบที่มีพื้นฐานโค้ด ผู้เรียนควรเขียน HTML และ CSS ได้ อ่านและแก้ PHP เบื้องต้นได้ และเคยใช้งานหลังบ้าน WordPress มาก่อน

เรียนจบหลักสูตร Creating WordPress Block Themes แล้วทำอะไรได้บ้าง

วางโครงสร้าง Block Theme ตาม Template Hierarchy ตั้งค่าสี ฟอนต์ และสไตล์ทั้งเว็บด้วย theme.json สร้าง Templates, Template Parts, Query Loop, Block Patterns และ Style Variations ใช้ Site Editor ร่วมกับ Create Block Theme แปลงงานจาก Figma เป็นธีม และส่งมอบธีมเป็นไฟล์ ZIP ที่ติดตั้งบนโฮสต์ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

เรียนสร้าง Block Theme ต้องใช้โปรแกรมอะไรบ้าง

ใช้ WordPress 7.1 บน PHP 8.3 ขึ้นไป ติดตั้งบนเครื่องด้วย XAMPP, wp-env หรือทดลองผ่าน WordPress Playground ใช้ปลั๊กอิน Create Block Theme ซึ่งเป็นปลั๊กอินทางการของ WordPress เขียนโค้ดด้วย VS Code และใช้ Figma เป็นต้นแบบงานออกแบบ เครื่องมือทั้งหมดเป็นโอเพนซอร์สหรือใช้ฟรี และบัญชี Figma แบบฟรีเพียงพอสำหรับ Lab