10306241 lab06: สร้างบทความด้วย Native Blocks พร้อม Synced Pattern และ ธีม

10306241 Content Management System

แบบฝึกหัดเชิงปฏิบัติการ บทที่ 06–07

Block Editor (Gutenberg) และธีม WordPress กับการแก้ไขทั้งเว็บไซต์ (Full Site Editing – FSE)

ระยะเวลา: 2 ชั่วโมง (120 นาที) รูปแบบ: ปฏิบัติการเดี่ยวหรือกลุ่มย่อย (2 คน) บน WordPress เวอร์ชัน 6.9 ขึ้นไป เงื่อนไข: ห้ามใช้ Page Builder ปลั๊กอินใด ๆ (เช่น Elementor) — ให้ใช้เฉพาะ Gutenberg Block Editor และ Site Editor แบบ native เท่านั้น

วัตถุประสงค์การเรียนรู้

เมื่อทำแบบฝึกหัดนี้เสร็จสิ้น นักศึกษาจะสามารถ

1. ใช้งาน Core Content Blocks และ Layout Blocks (Cover, Columns, Accordion, Quote) เพื่อสร้างบทความที่มีโครงสร้างสมบูรณ์โดยไม่ต้องเขียนโค้ด
2. สร้างและใช้งาน Synced Pattern เพื่อจัดการเนื้อหาที่ใช้ซ้ำหลายหน้าได้อย่างมีประสิทธิภาพ
3. แยกความแตกต่างระหว่างธีมแบบ Classic, Hybrid และ Block (FSE) และเลือกใช้ธีมที่เหมาะสม
4. ใช้งาน WordPress Site Editor แก้ไข Template และ Template Parts (Header/Footer) ผ่านภาพโดยไม่แก้ไฟล์ PHP
5. ปรับแต่ง Global Styles ผ่าน theme.json (สี ตัวอักษร ระยะห่าง) ให้มีผลทั้งเว็บไซต์อย่างสม่ำเสมอ

สิ่งที่ต้องเตรียมก่อนเริ่ม (Prerequisites)

• เว็บไซต์ WordPress (Local by WP Engine / XAMPP / Docker หรือ Hosting) เวอร์ชัน 6.9 ขึ้นไป พร้อม Gutenberg 22.x
• สิทธิ์ผู้ดูแลระบบ (Administrator)
• ธีมแบบ Block ติดตั้งพร้อมใช้งาน แนะนำ Twenty Twenty-Five
• รูปภาพตัวอย่าง 2–3 ไฟล์ (สำหรับ Cover block, Columns, โลโก้) — ใช้ภาพฟรีลิขสิทธิ์หรือภาพของตนเอง

ตารางแบ่งเวลา

ส่วนที่ 1: สร้างบทความด้วย Native Blocks และ Synced Pattern (45 นาที)

1.A สร้างบทความบล็อก (25 นาที)

1. ไปที่ Posts → Add New Post
2. พิมพ์ชื่อบทความ (ระบบจะตั้งเป็น H1 อัตโนมัติ) — เลือกหัวข้อที่เกี่ยวข้องกับเทคโนโลยีหรือมหาวิทยาลัยของตนเอง
3. แทรก Cover block เป็นส่วนเปิดบทความ
   • คลิก + → ค้นหา "Cover" → เลือกรูปภาพพื้นหลัง
   • ตั้งค่า Dim Overlay ประมาณ 40–60% เพื่อให้ข้อความอ่านง่าย
   • เพิ่ม Heading block ภายใน Cover เป็นหัวข้อรอง
4. แทรก Columns block แบบ 2 คอลัมน์ (เลือก template 50/50)
   • คอลัมน์ซ้าย: Paragraph block อธิบายเนื้อหา และ List block สรุปประเด็นสำคัญ 3–4 ข้อ
   • คอลัมน์ขวา: Image block ประกอบเนื้อหา พร้อมใส่ Alt text
5. แทรก Accordion block (ใหม่ใน WP 6.9) พร้อม 3 รายการคำถามที่พบบ่อย (FAQ)
   • แต่ละ Accordion Item ประกอบด้วย header (คำถาม) และเนื้อหา (Paragraph block คำตอบ)
6. แทรก Quote block พร้อมข้อความอ้างอิงและ Citation ที่เกี่ยวข้องกับหัวข้อบทความ
7. ตั้งค่าฝั่ง Sidebar (Document settings): กำหนด Category, Tags, และ Featured Image
8. กด Publish แล้วเปิด Preview ตรวจสอบผลลัพธ์บนหน้าเว็บจริง (front-end)

1.B สร้าง Synced Pattern สำหรับ "Contact CTA" (20 นาที)

1. ในบทความเดียวกัน เลื่อนไปด้านล่างสุด สร้างส่วนใหม่ชื่อ "Contact CTA"
   • แทรก Group block (ตั้งพื้นหลังเป็นสีทึบจาก Global Styles palette)
   • ภายใน Group เพิ่ม Heading (เช่น "สนใจติดต่อเรา") + Paragraph (คำอธิบายสั้น ๆ) + Button block
2. เลือก Group block ทั้งก้อน → คลิกไอคอน Options (⋮) บน Block toolbar → Create pattern
3. ตั้งชื่อ pattern ว่า "Contact CTA" → เปิดสวิตช์ Synced → คลิก Add
4. สร้างหน้าใหม่ (Pages → Add New Page) ตั้งชื่อว่า "ติดต่อเรา"
5. แทรก Pattern ที่บันทึกไว้: คลิก + → แท็บ Patterns → หมวด My Patterns → เลือก "Contact CTA" → Insert
6. แก้ไข pattern ต้นฉบับ: คลิกที่ Group block ในหน้าใดหน้าหนึ่ง → เลือก Edit original จากเมนู Options เปลี่ยนสีปุ่มหรือข้อความ
7. กลับไปตรวจสอบทั้งสองหน้า (บทความและหน้า "ติดต่อเรา") ยืนยันว่าการเปลี่ยนแปลงปรากฏพร้อมกันทั้งสองที่ — นี่คือคุณสมบัติที่ทำให้ Synced Pattern ต่างจาก Unsynced Pattern

ส่วนที่ 2: ธีม WordPress และการแก้ไขทั้งเว็บไซต์ (FSE) (45 นาที)

2.A ติดตั้งและสำรวจธีมแบบ Block (10 นาที)

1. ไปที่ Appearance → Themes → Add New Theme → ค้นหาชื่อ "Twenty Twenty-Five" → Install → Activate (หากติดตั้งไว้แล้วให้ตรวจสอบว่าเปิดใช้งานอยู่)
2. เปิด Site Editor: Appearance → Editor
3. สำรวจทั้ง 4 ส่วนหลักของ Site Editor แล้วจดบันทึกสิ่งที่พบในแต่ละส่วน (ใช้ตอบคำถามทบทวนภายหลัง)
   • Templates — เทมเพลตหน้าทั้งหมด
   • Patterns — รวม Synced Patterns และ Template Parts
   • Navigation — จัดการเมนู
   • Styles — Global Styles
4. เข้า Styles → Browse Styles ทดลองคลิก Style Variation อื่น (เช่น "Electric") สังเกตการเปลี่ยนแปลงทั้งเว็บไซต์ทันที แล้วกลับไปใช้ Default

2.B ปรับแต่ง Header และ Footer (20 นาที)

1. เข้า Templates → Index → คลิกที่พื้นที่ Header (หรือ Appearance → Editor → Patterns → Template Parts → Header)
2. เพิ่ม/แก้ไขบล็อก Site Logo (อัปโหลดโลโก้ถ้ามี หากไม่มีให้ใช้ Site Title แทน)
3. ตรวจสอบบล็อก Navigation ให้มีลิงก์อย่างน้อย: หน้าแรก (Home), เกี่ยวกับ (About), บทความ (Blog) — สร้างเมนูใหม่หากยังไม่มี ผ่าน Appearance → Editor → Navigation → + Create New Menu
4. เข้าเทมเพลต Footer (Template Parts → Footer)
5. เพิ่มบล็อก Columns แบบ 2 คอลัมน์
   • คอลัมน์ซ้าย: Site Title + Paragraph (สโลแกนของนักศึกษา)
   • คอลัมน์ขวา: บล็อก Social Icons เพิ่มลิงก์โซเชียล 2–3 รายการ
6. บันทึกการเปลี่ยนแปลงทั้งหมด (Save) — สังเกตว่าแก้ไข Header/Footer เพียงครั้งเดียวมีผลกับทุกหน้าทั้งเว็บไซต์ (คุณสมบัติของ Template Parts)

2.C ปรับแต่ง theme.json ผ่าน Global Styles (15 นาที)

1. เปิดแผง Styles: Appearance → Editor → คลิกไอคอน Styles (วงกลมครึ่งสี มุมขวาบน)
2. แท็บ Colors: เปลี่ยนสี Primary เป็นสีที่นักศึกษากำหนดเอง (เช่น #1565C0)
3. แท็บ Typography: ตั้งฟอนต์เนื้อความเป็น "TH Sarabun New" (หากธีมรองรับ) หรือฟอนต์ที่มีอยู่ กำหนดขนาดตัวอักษรเนื้อหาเป็น 18px
4. เปิด Style Book (ไอคอนหนังสือในแผง Styles) ตรวจสอบว่าหัวข้อ H1–H6, ปุ่ม และ Quote แสดงสีและฟอนต์ใหม่ถูกต้องครบทุกองค์ประกอบ
5. กลับไปที่บทความและหน้า "ติดต่อเรา" ที่สร้างไว้ในส่วนที่ 1 ตรวจสอบว่าสีและฟอนต์ใหม่ปรากฏสม่ำเสมอในทุกหน้า (นี่คือหลักการของ Global Styles ที่มาจากไฟล์ theme.json เพียงไฟล์เดียว)

ส่วนที่ 3: โจทย์ท้าทายและคำถามทบทวน (15 นาที)

3.A โจทย์ปฏิบัติ (เลือกทำอย่างน้อย 1 ข้อ)

1. Block Visibility (WP 6.9): เลือกบล็อกใดบล็อกหนึ่งในบทความ (เช่น Image block ในคอลัมน์) → sidebar ขวา → แท็บ Advanced → ส่วน Visibility → ปิด toggle Mobile เพื่อซ่อนบล็อกนี้บนหน้าจอมือถือ อธิบายเหตุผลของการซ่อนในบริบทของบทความนี้
2. Block Bindings API (WP 6.7+): ทดลอง bind attribute content ของ Heading block ให้ดึงค่าจาก Post Title โดยอัตโนมัติ (เลือก Heading → sidebar → แท็บ Bindings → + → เลือก attribute → เลือกแหล่งข้อมูล) หากเครื่องมือ/ปลั๊กอินไม่รองรับในเครื่องของนักศึกษา ให้เขียนอธิบายขั้นตอนที่ควรทำแทนโดยละเอียด

3.B คำถามทบทวน (ตอบสั้น กระชับ ในเอกสารส่งงาน)

1. Synced Pattern แตกต่างจาก Unsynced Pattern อย่างไร และควรเลือกใช้แบบใดในสถานการณ์ใดบ้าง พร้อมยกตัวอย่างประกอบ
2. ธีมแบบ Classic, Hybrid และ Block (FSE) แตกต่างกันอย่างไร ทั้งในแง่ไฟล์เทมเพลตที่ใช้และความสามารถในการปรับแต่ง Global Styles
3. theme.json มีบทบาทอย่างไรในธีมแบบ Block เมื่อเทียบกับการใช้ Customizer แบบเดิม (Classic theme)
4. Template Parts คืออะไร มีข้อดีอย่างไรเมื่อต้องแก้ไข Header หรือ Footer ที่ใช้ร่วมกันในทุกหน้าของเว็บไซต์
5. อธิบายความแตกต่างการใช้งานระหว่าง Group block, Row block และ Stack block ควรเลือกใช้บล็อกใดในแต่ละสถานการณ์
6. Block Bindings API ทำหน้าที่อะไร และช่วยลดความจำเป็นในการเขียนโค้ด PHP แบบ dynamic block ได้อย่างไร
7. (คำถามเพิ่มเติม) จากข้อมูลสถิติในเอกสารประกอบการสอน เพราะเหตุใดผู้เชี่ยวชาญ WordPress ส่วนใหญ่จึงเลือกใช้ FSE มากกว่า Page Builder ปลั๊กอิน

ผลงานที่ต้องส่ง (Deliverables)

• ภาพหน้าจอ (screenshot) บทความบล็อกที่เสร็จสมบูรณ์ ทั้งฝั่ง Editor และฝั่ง Front-end
• ภาพหน้าจอหน้า "ติดต่อเรา" ที่แสดง Synced Pattern "Contact CTA"
• ภาพหน้าจอ Site Editor แสดง Header และ Footer ที่ปรับแต่งแล้ว
• ภาพหน้าจอแผง Global Styles แสดงสีและฟอนต์ที่เปลี่ยนใหม่
• คำตอบโจทย์ปฏิบัติ (ข้อ 3.A อย่างน้อย 1 ข้อ) และคำตอบคำถามทบทวนทั้ง 7 ข้อ (3.B)

เกณฑ์การให้คะแนน (Rubric, รวม 100 คะแนน)

เอกสารอ้างอิง

• บทที่ 06: Block Editor — Gutenberg 22.x: Blocks, Patterns & Bindings (10306241 Content Management System)
• บทที่ 07: ธีมของ WordPress และการแก้ไขทั้งเว็บไซต์ (Full Site Editing – FSE) (10306241 Content Management System)