Part of 10306241 ระบบบริหารจัดการเว็บไซต์ (Web Content Management System)

สร้างหน้า About Me สวย ๆ ด้วยธีม Blocksy และ Block Editor ไม่ต้องใช้ Page Builder

สร้างหน้า About Me สวย ๆ ด้วยธีม Blocksy และ Block Editor

อยากมีหน้าแนะนำตัวที่ดูเป็นมืออาชีพ แต่ไม่อยากพึ่ง Page Builder ใช่ไหมครับ บทความนี้จะพาทำหน้า About Me แบบ Personal Profile ทีละขั้น โดยใช้ธีม Blocksy กับ Block Editor (Gutenberg) ที่มากับ WordPress

หน้าที่เราจะทำอิงจากหน้าตัวอย่างนี้ครับ 👉 itscidev.mju.ac.th/w/?page_id=1599

หน้าตัวอย่างสร้างด้วย Elementor แต่ในบทความนี้เราจะสร้างหน้าแบบเดียวกันด้วยบล็อกของ WordPress เกือบทั้งหมด ใช้ปลั๊กอินเสริมเพียงตัวเดียวคือ Kadence Blocks สำหรับแถบแสดงทักษะ (Progress Bar) และบล็อก Info Box

สิ่งที่คุณจะได้เรียนรู้

1. แยกหน้าเว็บตัวอย่างออกเป็นส่วน ๆ แล้วแปลงเป็นบล็อกใน Block Editor
2. ติดตั้งและตั้งค่าธีม Blocksy ทั้งระดับเว็บไซต์และระดับหน้า
3. ใช้บล็อก Cover, Columns, Group, Buttons, Separator, Icon และ Social Icons ทำ layout เต็มความกว้างจอ
4. ใช้ Block Visibility ฟีเจอร์ใหม่ใน WordPress 7.0 ซ่อนหรือแสดงบล็อกตามอุปกรณ์
5. ทำแถบทักษะด้วย Kadence Progress Bar และสร้าง Synced Pattern ไว้ใช้ซ้ำ
6. เตรียมภาพสำหรับเว็บ และใช้ AI สร้างภาพประกอบอย่างรับผิดชอบ

เหมาะกับใคร: ผู้ที่ติดตั้ง WordPress 7.0 ขึ้นไปแล้ว มีสิทธิ์ Administrator และเคยใช้ Block Editor มาบ้าง (นักศึกษารายวิชา 10306241 ทำบนเว็บของตนเองที่ itscidev.mju.ac.th)

ทำความรู้จักหน้าต้นแบบก่อนลงมือ

ผลการวิเคราะห์หน้าต้นแบบ

โครงร่างหน้า (Wireframe)

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

1. บัญชีผู้ดูแลระบบ (Administrator) ของ WordPress ของตนเอง ทดลองเข้า /wp-admin ให้ได้ก่อนเริ่ม
2. ตรวจเวอร์ชัน WordPress ที่ Dashboard → Updates ต้องเป็น 7.0 ขึ้นไป ถ้าต่ำกว่านี้จะไม่มีตัวเลือก Block Visibility ตามอุปกรณ์ (ขั้นที่ 5.4)
3. ไฟล์ภาพ 4 ไฟล์ (ดูขั้นที่ 0)
4. ข้อมูลของตนเอง เตรียมใส่ Notepad ไว้ก่อน

ข้อควรระวังเรื่องข้อมูลส่วนบุคคล (PDPA): ห้ามใส่เบอร์โทรศัพท์ส่วนตัว ที่อยู่บ้าน เลขบัตรประชาชน หรือวันเกิด ให้ใช้อีเมลมหาวิทยาลัยและที่อยู่คณะแทน

ขั้นที่ 0: เตรียมไฟล์ภาพ (ประมาณ 30 นาที)

ภาพทุกภาพต้องเป็น ภาพของคุณเอง, ภาพฟรีลิขสิทธิ์ (เช่น Unsplash, Pexels) หรือ ภาพที่สร้างด้วย AI อย่าดาวน์โหลดภาพจากหน้าตัวอย่างหรือเว็บอื่นมาใช้

0.1 ข้อกำหนดของภาพ

0.2 หลักการใช้ AI สร้างภาพ

1. คัดลอก Prompt ภาษาอังกฤษในกล่องด้านล่างไปวางในเครื่องมือสร้างภาพ
2. ถ้าเครื่องมือมีช่อง Negative prompt ให้ใส่ข้อความที่ให้ไว้ ถ้าไม่มีช่อง ให้ต่อท้าย prompt ว่า Avoid: …
3. กำหนดสัดส่วนภาพตามตาราง (Midjourney ใช้ --ar 16:9, ChatGPT/Gemini ให้พิมพ์สัดส่วนไว้ใน prompt)
4. สร้าง 3–4 ภาพ แล้วเลือกภาพที่ ตรงกลางภาพไม่มีรายละเอียดมาก เพราะจะมีตัวหนังสือวางทับ
5. ย่อภาพให้ได้ขนาดตามตาราง (ใช้ https://squoosh.app หรือโปรแกรมแต่งภาพ) และตั้งชื่อไฟล์ตามตาราง
6. จริยธรรม: ห้ามสร้างภาพเลียนแบบบุคคลจริง ห้ามใส่โลโก้หรือเครื่องหมายการค้าของผู้อื่น และให้ระบุในหน้า Footer หรือ Caption ว่า "ภาพประกอบสร้างด้วย AI" เมื่อใช้ภาพจาก AI

ขั้นที่ 1: ติดตั้งและตั้งค่าธีม Blocksy (10 นาที)

ทำไมเลือก Blocksy

• เป็นธีมเดียวกับหน้าต้นแบบ ใช้ฟรี และออกเวอร์ชันใหม่สม่ำเสมอ (2.1.57 เมื่อ 11 ก.ย. 2569) มีเว็บไซต์ใช้งานมากกว่า 300,000 แห่ง
• รองรับ Block Editor เต็มรูปแบบ (ตัวเลือก Block editor patterns, Block editor styles, Wide blocks)
• มี Header/Footer Builder ใน Customizer และตั้งค่า layout แยกรายหน้าได้

1.1 ติดตั้งธีม

1. เข้าสู่ระบบที่ https://itscidev.mju.ac.th/<username>/wp-admin
2. เมนูซ้าย → Appearance → Themes → ปุ่ม Add New Theme ด้านบน
3. ช่อง Search themes… พิมพ์ Blocksy
4. นำเมาส์ไปวางบนการ์ดธีม Blocksy (ผู้พัฒนา Creative Themes) → คลิก Install
5. รอจนปุ่มเปลี่ยนเป็น Activate → คลิก Activate
6. ระบบจะแสดงหน้า Welcome ของ Blocksy และอาจแนะนำให้ติดตั้ง Blocksy Companion (ทำในข้อ 1.2)

ผลที่ควรได้: หน้า Appearance → Themes แสดง Blocksy เป็นธีม Active

1.2 ติดตั้งปลั๊กอินที่ต้องใช้

1. เมนูซ้าย → Plugins → Add New Plugin
2. ค้นหา Blocksy Companion → คลิก Install Now → Activate
   • เป็นปลั๊กอินเสริมอย่างเป็นทางการของ Blocksy ที่เพิ่ม Starter Sites และส่วนขยายต่าง ๆ
3. กลับไปที่ Add New Plugin → ค้นหา Kadence Blocks → Install Now → Activate
   • เราใช้บล็อก Progress Bar (มีในรุ่นฟรีตั้งแต่ Kadence Blocks 3.1) และ Info Box
4. ถ้า Kadence แสดงหน้า Welcome หรือ Onboarding ให้กด Skip / Exit ได้เลย
5. ห้าม Import Starter Site ของ Blocksy เพราะจะเขียนทับหน้าและเมนูเดิม

ถ้ากด Install แล้วระบบขอ Connection Information (FTP) แสดงว่า WordPress เขียนไฟล์ในโฟลเดอร์ wp-content ไม่ได้ ดูวิธีแก้ในภาคผนวก ข

1.3 ตั้งค่า Header (โลโก้และเมนู)

1. เมนูซ้าย → Appearance → Customize
2. คลิก Header → หน้าจอจะแสดง Header Builder ที่ด้านล่าง
3. คลิกองค์ประกอบ Logo (ถ้าไม่มี ให้คลิก + ในช่องที่ว่างแล้วเลือก Logo)
   • Logo → Select logo → อัปโหลด logo.png
   • Logo Max Height ประมาณ 40–50px
   • ถ้ามีโลโก้แล้ว ให้ปิด Site Title และ Site Tagline
4. (เพื่อให้เหมือนต้นแบบ) เมนูแบบแฮมเบอร์เกอร์
   • ลากองค์ประกอบ Trigger มาไว้ด้านขวาของแถว Main Row
   • ลากองค์ประกอบ Menu ออกจาก Main Row ของ Desktop (ถ้าไม่ต้องการเมนูแนวนอน)
   • ตรวจว่ามีเมนูในส่วน Offcanvas (เมนูจะแสดงเมื่อคลิก Trigger)
5. คลิก Publish

1.4 ตั้งค่า Footer (ข้อความลิขสิทธิ์)

1. ใน Customizer กลับไปหน้าหลัก → คลิก Footer
2. คลิกองค์ประกอบ Copyright ใน Footer Builder
3. แก้ข้อความเป็น

   TEXTCOPY

   Copyright © {current_year} | Website Designed by <ชื่อ-สกุลของคุณ>

   ({current_year} จะเปลี่ยนเป็นปีปัจจุบันให้อัตโนมัติ)
4. ถ้าใช้ภาพจาก AI ให้ต่อท้ายว่า | ภาพประกอบบางส่วนสร้างด้วย AI
5. คลิก Publish

ขั้นที่ 2: เตรียมสื่อใน Media Library (5 นาที)

1. เมนูซ้าย → Media → Add New Media File → ลากไฟล์ภาพทั้ง 4 ไฟล์มาวาง
2. ไปที่ Media → Library → สลับเป็นมุมมอง List หรือ Grid ตามสะดวก
3. คลิกภาพทีละภาพ → กรอกข้อมูลในแผง Attachment details ด้านขวา

ทำไมภาพพื้นหลังจึงเว้น Alt text ได้: ภาพที่ใช้ตกแต่งอย่างเดียวไม่ได้ให้ข้อมูลเพิ่ม โปรแกรมอ่านหน้าจอ (Screen reader) จึงควรข้ามไป ส่วนรูปโปรไฟล์และโลโก้ให้ข้อมูล จึงต้องมี Alt text

4. ตรวจว่า File URL ของทุกภาพไม่มีภาษาไทยหรือช่องว่าง ถ้ามี ให้ลบภาพแล้วเปลี่ยนชื่อไฟล์ในเครื่องก่อนอัปโหลดใหม่

ขั้นที่ 3: สร้างหน้าและตั้งค่า Layout (10 นาที)

3.1 สร้างหน้าใหม่

1. เมนูซ้าย → Pages → Add New Page
2. ถ้ามีหน้าต่าง Choose a pattern แสดงขึ้นมา ให้กด ปิด (×) เพื่อเริ่มจากหน้าว่าง
3. คลิกที่ Add title พิมพ์ About
4. แถบขวา แท็บ Page → คลิกที่ Slug (หรือ Link) → ตั้งเป็น about
5. คลิก Save draft

3.2 ตั้งค่าเฉพาะหน้าของ Blocksy (Page Settings)

Blocksy ให้ตั้งค่าเฉพาะหน้าทับค่าของ Customizer ได้ โดยตัวเลือกจะเหมือนกับใน Customizer → Pages และส่วนใหญ่มีค่า Inherit (ใช้ค่าจาก Customizer)

1. คลิก ไอคอน Blocksy ที่แถบเครื่องมือด้านบนขวาของ Editor (ข้าง ๆ ปุ่ม Settings) แผง Blocksy Page Settings จะเปิดขึ้นทางขวา
2. ตั้งค่าตามตาราง

3. คลิก Save draft

เปรียบเทียบกับต้นแบบ: ต้นแบบใช้ Page Layout ชื่อ Elementor Full Width ของ Elementor ส่วนเราได้ผลแบบเดียวกันจาก Page Settings ของ Blocksy

ขั้นที่ 4: ส่วนที่ 1 — Hero / Profile (20 นาที)

เป้าหมาย: กรอบภาพพื้นหลังเต็มจอ มีรูปโปรไฟล์วงกลม ชื่อ ตำแหน่ง ข้อมูลติดต่อ 2 คอลัมน์ และปุ่ม 2 ปุ่ม

โครงสร้างบล็อก (ดูได้ใน List View):

Cover (Full width)                     ← hero-bg.jpg
├── Image (Rounded)                    ← profile.jpg
├── Heading H1                         ← ชื่อ-สกุล
├── Paragraph                          ← ตำแหน่ง/สถานะ
├── Columns 50/50
│   ├── Column → Paragraph             ← หลักสูตร/ที่อยู่คณะ
│   └── Column → Paragraph             ← ห้อง/อีเมล
└── Buttons
    ├── Button "About Me"  → #about
    └── Button "Hire Me"   → mailto:

เคล็ดลับ: เปิด List View ไว้ตลอด (ไอคอน ☰ ที่แถบเครื่องมือด้านบนซ้าย หรือ Shift+Alt+O) จะช่วยให้เลือกบล็อกที่ซ้อนกันได้ง่าย

4.1 เพิ่ม Cover block

1. คลิกในพื้นที่เนื้อหา → คลิกปุ่ม + (Block Inserter) ที่มุมซ้ายบน → ค้นหา Cover → คลิกบล็อก Cover
   • หรือพิมพ์ /cover แล้วกด Enter
2. ในกรอบ Cover คลิก Media Library → เลือก hero-bg.jpg → Select
3. Block toolbar → ไอคอน Align → Full width
4. แถบขวา แท็บ Settings
   • Fixed background: ปิด (ถ้าเปิดจะเป็นเอฟเฟกต์ Parallax ซึ่งมือถือบางรุ่นแสดงไม่ถูกต้อง)
   • Minimum height: 100 หน่วย VH (สูงเท่าความสูงหน้าจอ) หรือ 700 หน่วย PX
5. แถบขวา แท็บ Styles
   • Overlay: คลิกวงกลมสี → เลือกสีดำ #000000
   • Overlay opacity: 55
   • Dimensions → Padding: Top 80px, Bottom 80px
6. ลบ Paragraph ตัวอย่างที่อยู่ในกรอบ Cover ("Write title…")

ทำไมต้องมี Overlay: ตัวหนังสือสีขาววางบนภาพถ่ายโดยตรงมักอ่านยาก การทำภาพให้มืดลงประมาณ 50–60% ช่วยให้ค่าความต่างของสี (contrast) ผ่านเกณฑ์ WCAG 4.5:1

4.2 เพิ่มรูปโปรไฟล์

1. คลิกในกรอบ Cover → + → เลือกบล็อก Image → Media Library → เลือก profile.jpg
2. แถบขวา แท็บ Styles → Styles → เลือก Rounded (ภาพจะกลายเป็นวงกลมถ้าภาพต้นฉบับเป็นสี่เหลี่ยมจัตุรัส)
3. แท็บ Settings
   • Width: 150px (ความสูงจะปรับตาม)
   • Aspect ratio: Square - 1:1
   • Resolution: Medium
   • ตรวจว่า Alternative text มีข้อความแล้ว (ดึงมาจาก Media Library)
4. Block toolbar → Align → Align center
5. (เพิ่มเติม) แท็บ Styles → Border: 4px สีขาว เพื่อให้ขอบรูปเด่นเหมือนต้นแบบ

4.3 เพิ่มชื่อและตำแหน่ง

1. ใต้รูปภาพ พิมพ์ /heading → เลือก Heading → Block toolbar เปลี่ยนเป็น H1
   • พิมพ์ชื่อ-สกุลภาษาอังกฤษ เช่น Somchai Jaidee
   • Align text: Center
   • Styles → Typography: Size ใหญ่ (XL หรือ 48px), Appearance Bold
   • Styles → Color → Text: ขาว
2. ใต้ Heading เพิ่ม Paragraph → พิมพ์ IT Student, Web Developer and Designer → Align Center → สีขาว

ทำไมใช้ H1: เราปิด Page Title ของธีมไปแล้ว หน้านี้จึงยังไม่มี H1 ชื่อบุคคลเป็นหัวข้อหลักของหน้า การมี H1 เพียงหนึ่งเดียวช่วยทั้ง SEO และ Accessibility

4.4 เพิ่มข้อมูลติดต่อ 2 คอลัมน์

1. ใต้ Paragraph → + → Columns → เลือกรูปแบบ 50 / 50
2. คอลัมน์ซ้าย → เพิ่ม Paragraph แล้วพิมพ์ (กด Shift+Enter เพื่อขึ้นบรรทัดใหม่ในย่อหน้าเดิม)

   TEXTCOPY

   หลักสูตรวิทยาศาสตรบัณฑิต สาขาวิชาเทคโนโลยีสารสนเทศ
   คณะวิทยาศาสตร์ มหาวิทยาลัยแม่โจ้
   63 หมู่ 4 ต.หนองหาร อ.สันทราย จ.เชียงใหม่ 50290

3. คอลัมน์ขวา → เพิ่ม Paragraph

   TEXTCOPY

   ห้องเรียน/ห้องปฏิบัติการ: <อาคาร/ห้อง>
   อีเมล: <อีเมลมหาวิทยาลัย>

4. เลือก Paragraph ทั้งสองแล้วตั้ง Align Center และสีข้อความเป็นขาว
5. เลือกบล็อก Columns → Settings → ตรวจว่าเปิด Stack on mobile (บนมือถือคอลัมน์จะเรียงลงมาเป็นแถว)

4.5 เพิ่มปุ่ม 2 ปุ่ม

1. ใต้ Columns → + → Buttons → Block toolbar → Justification → Justify items center
2. คลิกปุ่มแรก พิมพ์ About Me → ไอคอน Link (Ctrl+K) → พิมพ์ #about → Enter
3. คลิกปุ่ม + ข้างปุ่มแรก เพื่อเพิ่มปุ่มที่สอง → พิมพ์ Hire Me → Link: mailto:<อีเมลของคุณ>
4. ตั้งสไตล์ปุ่มตามตาราง

ปุ่ม #about ทำงานอย่างไร: เครื่องหมาย # ตามด้วยชื่อ คือลิงก์ไปยังบล็อกที่มี HTML Anchor ชื่อเดียวกันในหน้าเดียวกัน เราจะตั้ง anchor นี้ในขั้นที่ 5.1

ขั้นที่ 5: ส่วนที่ 2 — About Me (35 นาที)

เป้าหมาย: หัวข้อ About Me, ประวัติย่อ (ซ้าย) และแถบทักษะ 5 แถบ (ขวา) บนพื้นหลังที่แบ่งสีเป็นสองส่วน

ในต้นแบบ ส่วนนี้มี 2 ชุด

• ชุด Desktop/Tablet — พื้นหลังแบ่ง ซ้าย-ขวา (น้ำเงิน | เทา)
• ชุด Mobile — พื้นหลังแบ่ง บน-ล่าง (น้ำเงินด้านบน | เทาอมน้ำเงินด้านล่าง) เพราะบนมือถือคอลัมน์จะเรียงเป็นแถว

แล้วใช้การตั้งค่าซ่อนตามอุปกรณ์ เราจะทำแบบเดียวกันด้วย Block Visibility ของ WordPress 7.0

โครงสร้างบล็อก:

Group "About – Desktop"  (Full width, gradient 90°, anchor: about, ซ่อนบน Mobile)
├── Heading H2 "About Me"
└── Columns 50/50
    ├── Column (พื้นขาว) → Paragraph ประวัติย่อ
    └── Column → Kadence Progress Bar × 5
Group "About – Mobile"   (Full width, gradient 0°,  ซ่อนบน Desktop + Tablet)
└── (เนื้อหาเหมือนชุดบน)

5.1 สร้างชุด Desktop

1. คลิกใต้ Cover (ต้องอยู่นอก Cover — ตรวจใน List View) → + → Group
   • ถ้ามีตัวเลือกรูปแบบ ให้เลือก Group (ไม่ใช่ Row หรือ Stack)
2. Block toolbar → Align → Full width
3. แถบขวา แท็บ Settings → Advanced → HTML anchor พิมพ์ about
4. แท็บ Styles → Color → Background → แท็บ Gradient
   • เลือก Type: Linear, Angle: 90°
   • คลิกจุดสีด้านซ้ายของแถบ gradient → ตั้งสี #0070FF
   • คลิกจุดสีด้านขวา → ตั้งสี #A8A8A8
   • ลากจุดสีทั้งสองมาไว้ที่ตำแหน่ง 50% เท่ากัน (สีจะแบ่งเป็นเส้นตรง ไม่ไล่สี)
   • ถ้าลากไม่ตรง ให้ใช้ทางลัด: แท็บ Advanced → Additional CSS class(es) ใส่ about-split แล้วเพิ่ม CSS ในภาคผนวก ค
5. Dimensions → Padding: Top 60px, Bottom 60px, Left/Right 20px
6. ภายใน Group เพิ่ม Heading H2 About Me → Align Center → สีขาว
7. ใต้ Heading เพิ่ม Columns แบบ 50 / 50
8. คอลัมน์ซ้าย (เลือกบล็อก Column ใน List View)
   • Styles → Color → Background: ขาว #FFFFFF
   • Styles → Dimensions → Padding: 30px ทุกด้าน
   • Styles → Border → Radius: 8px
   • เพิ่ม Paragraph ประวัติย่อ เช่น

   TEXTCOPY

   สวัสดีครับ ผม สมชาย ใจดี นักศึกษาชั้นปีที่ 3 สาขาวิชาเทคโนโลยีสารสนเทศ
   คณะวิทยาศาสตร์ มหาวิทยาลัยแม่โจ้ สนใจการพัฒนาเว็บไซต์ด้วย WordPress และ
   JavaScript มีประสบการณ์ทำเว็บไซต์ให้ชมรมและโครงงานในรายวิชา ปัจจุบันกำลัง
   ศึกษาเรื่อง DevOps และการนำ AI มาใช้กับงานเกษตรอัจฉริยะ

9. คอลัมน์ขวา → Styles → Dimensions → Padding: 20px → จากนั้นเพิ่ม Progress Bar ตามข้อ 5.2

5.2 เพิ่มและตั้งค่า Kadence Progress Bar

1. คลิกในคอลัมน์ขวา → + → ค้นหา Progress Bar → เลือกบล็อกที่มีคำว่า Kadence กำกับ
2. แถบขวา แท็บ General

3. แท็บ Style

4. คลิกที่ข้อความ Label บนบล็อกแล้วพิมพ์ชื่อทักษะ เช่น HTML/CSS
5. เมื่อแถบแรกเสร็จ เลือกบล็อกแล้วกด Duplicate (Ctrl+Shift+D) 4 ครั้ง แล้วแก้ชื่อและค่าของแต่ละแถบ

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

ทางเลือกกรณีติดตั้ง Kadence Blocks ไม่ได้: ใช้ Custom HTML block

HTMLCOPY

<div class="skill">
  <label for="skill-html">HTML/CSS <span>85%</span></label>
  <progress id="skill-html" value="85" max="100"></progress>
</div>

แล้วเพิ่ม CSS จากภาคผนวก ค เพื่อให้แถบมีสีตามแบบ

5.3 สร้างชุด Mobile

1. เปิด List View → คลิกที่ Group ของ About Me (บรรทัดบนสุดของชุด)
2. Block toolbar → Options (⋮) → Duplicate (หรือ Ctrl+Shift+D) จะได้ Group ชุดที่สองอยู่ด้านล่าง
3. ที่ Group ชุดใหม่
   • Advanced → HTML anchor เปลี่ยนเป็น about-m (ในหน้าเดียวกันห้ามมี anchor ซ้ำกัน)
   • Color → Background → Gradient ตั้ง Angle: 0°, จุดสีแรก #495157 ที่ 30%, จุดสีที่สอง #0070FF ที่ 30% (มุม 0° ไล่จากล่างขึ้นบน ด้านล่าง 30% จึงเป็นสีเทาเข้ม ส่วนที่เหลือด้านบนเป็นสีน้ำเงิน)
   • ถ้าชุด Desktop ใช้ class about-split ให้เปลี่ยน class ของชุดนี้เป็น about-split-m (ดูภาคผนวก ค)
   • คอลัมน์ขวา: ถ้าต้องการ เปลี่ยน Progress Background Color เป็น #6B7780 เพื่อให้ตัดกับพื้นเทาเข้ม
4. ตั้งชื่อบล็อกใน List View เพื่อไม่ให้สับสน
   • คลิก ⋮ ท้ายบรรทัด Group ชุดแรก → Rename → About – Desktop
   • Group ชุดที่สอง → Rename → About – Mobile

5.4 ตั้งค่า Block Visibility (ใหม่ใน WordPress 7.0)

ตั้งแต่ WordPress 7.0 เราซ่อนบล็อกตามอุปกรณ์ได้โดยไม่ต้องใช้ปลั๊กอิน คำสั่ง Hide อยู่ใน Block toolbar, List View และ Command Palette (Ctrl+K เมื่อไม่ได้เลือกข้อความ)

1. เลือก Group About – Desktop → คลิก Hide (ใน Block toolbar หรือเมนู ⋮) → หน้าต่างตัวเลือกจะเปิดขึ้น
   • เลือกซ่อนบน Mobile เท่านั้น → ยืนยัน
2. เลือก Group About – Mobile → Hide
   • เลือกซ่อนบน Desktop และ Tablet → ยืนยัน
3. สังเกตไอคอนใน List View ที่บอกว่าบล็อกถูกซ่อนบนอุปกรณ์ใด
4. คลิก Save draft

ความรู้เพิ่มเติม

• บล็อกที่ซ่อนตามอุปกรณ์ ยังอยู่ใน HTML ของหน้า ระบบใช้ CSS ซ่อนไว้ (ใช้ breakpoint คงที่ของ WordPress 7.0)
• การซ่อน ทุกอุปกรณ์ (blockVisibility: false) จะไม่ส่งบล็อกออกไปที่หน้าเว็บเลย
• ถ้าเปิด Code editor (Ctrl+Shift+Alt+M) จะเห็นค่าที่บันทึกไว้ในบล็อก เช่น

  HTMLCOPY

  <!-- wp:group {"metadata":{"name":"About – Desktop","blockVisibility":{"viewport":{"mobile":false}}}, ... } -->

ทางเลือกที่ง่ายกว่า (ไม่ต้องทำ 2 ชุด): ไม่ใส่ gradient ที่ Group แต่ตั้ง Background ให้แต่ละ Column แทน (คอลัมน์ซ้ายสีน้ำเงิน คอลัมน์ขวาสีเทา) บนมือถือคอลัมน์จะเรียงลงมาเป็นแถวเอง ลองเปรียบเทียบข้อดีข้อเสียของสองวิธีนี้ดู (ทดสอบความเข้าใจข้อ 2)

ขั้นที่ 6: ส่วนที่ 3 — What I can Do! (15 นาที)

เป้าหมาย: หัวข้อ เส้นคั่น และกล่องความสามารถ 3 กล่อง (ไอคอน + หัวข้อ + คำอธิบาย) บนพื้นหลังสีเทาเข้ม

โครงสร้างบล็อก:

Group (Full width, พื้น #505050, ข้อความขาว)
├── Heading H2 "What I can Do!"
├── Separator
└── Columns 33/33/33
    ├── Column → Icon + Heading H3 + Paragraph
    ├── Column → Icon + Heading H3 + Paragraph
    └── Column → Icon + Heading H3 + Paragraph

6.1 สร้าง Group และหัวข้อ

1. คลิกใต้ Group About – Mobile (ตรวจใน List View ว่าอยู่ระดับบนสุด ไม่ได้อยู่ใน Group เดิม) → + → Group
2. Align → Full width
3. Styles → Color → Background #505050, Text ขาว
4. Styles → Dimensions → Padding: Top/Bottom 60px
5. เพิ่ม Heading H2 What I can Do! → Align Center
6. เพิ่ม Separator
   • Styles → เลือก Wide Line หรือ Default
   • Color: ขาว
   • (ถ้าต้องการให้สั้นเหมือนต้นแบบ) เลือก Default ซึ่งมีความกว้างประมาณ 100px

6.2 สร้างกล่องความสามารถ

1. เพิ่ม Columns → เลือก 33 / 33 / 33
2. ในคอลัมน์ที่ 1 เพิ่มบล็อกตามลำดับ
   • Icon → คลิก Choose icon (หรือ Replace) → ค้นหาไอคอนที่สื่อความหมาย → Styles: ขนาด 56px, สีขาว → Align Center
   • Heading H3 Developer → Align Center
   • Paragraph พัฒนาเว็บไซต์และเว็บแอปพลิเคชันด้วย WordPress และ JavaScript → Align Center
3. เลือก Column ที่ 1 (ใน List View) → Styles → Dimensions → Padding 20px
4. ลบคอลัมน์ที่ 2 และ 3 ที่ว่างอยู่ → เลือกคอลัมน์ที่ 1 → Duplicate 2 ครั้ง (วิธีนี้ทำให้ทุกกล่องมีการตั้งค่าเหมือนกัน)
5. แก้ไอคอนและข้อความของคอลัมน์ที่ 2 และ 3

ถ้าหา Icon block ไม่เจอ หรือคลังไอคอนไม่มีรูปที่ต้องการ: ใช้บล็อก Info Box ของ Kadence Blocks แทน (มีไอคอน หัวข้อ และข้อความในบล็อกเดียว) ตั้ง Media Type เป็น Icon, จัดกลาง, ตั้งพื้นหลังโปร่งใส และสีข้อความขาว

Accessibility: ไอคอนในส่วนนี้เป็นภาพตกแต่ง เพราะมีหัวข้อ H3 บอกความหมายอยู่แล้ว จึงไม่จำเป็นต้องใส่ป้ายกำกับ (label) ให้ไอคอน

ขั้นที่ 7: ส่วนที่ 4 — Follow Me on… (10 นาที)

1. คลิกใต้ Group ของ What I can Do! (ระดับบนสุด) → + → Group → Full width
2. Styles → Background ขาว → Padding Top/Bottom 40px
3. เพิ่ม Heading H2 Follow Me on… → Align Center → สีข้อความ #333333 (ต้นแบบสะกดผิดเป็น "Fllow" ให้ใช้คำที่ถูกต้องคือ Follow)
4. เพิ่ม Separator (สีเทา #A8A8A8)
5. เพิ่ม Social Icons
   1. คลิก + ในบล็อก → ค้นหาและเพิ่ม Facebook, X, YouTube, WhatsApp, Instagram (หรือ GitHub, LinkedIn ตามที่มีจริง อย่างน้อย 3 รายการ)
   2. คลิกไอคอนทีละตัว → ใส่ URL ของตนเอง (เช่น https://github.com/<username>)
   3. ไอคอนที่ไม่ใส่ URL จะไม่แสดง บนหน้าเว็บจริง
6. เลือกบล็อก Social Icons (ตัวแม่) แล้วตั้งค่า

ความปลอดภัย: WordPress จะเพิ่ม rel="noopener" ให้ลิงก์ที่เปิดในแท็บใหม่โดยอัตโนมัติ ป้องกันหน้าปลายทางควบคุมแท็บเดิมของเรา

ขั้นที่ 8: ส่วนที่ 5 — Call to Action + Synced Pattern (15 นาที)

8.1 สร้างส่วน CTA

1. คลิกใต้ Group ของ Follow Me (ระดับบนสุด) → + → Cover → เลือก cta-bg.jpg
2. Align → Full width
3. Settings → Minimum height 320px
4. Styles → Overlay สีดำ, Overlay opacity 40 → Padding Top/Bottom 60px
5. ลบ Paragraph ตัวอย่าง แล้วเพิ่ม
   • Heading H2 Need a Professional Developer? → Align Center → สีขาว
   • Paragraph ยินดีรับงานพัฒนาเว็บไซต์และร่วมทำโครงงาน ติดต่อได้ทางอีเมล → Align Center
   • Buttons → ปุ่ม Hire Me → Link mailto:<อีเมลของคุณ> → Justification Center → Style Fill พื้น #0070FF, มุมโค้ง 30px

8.2 บันทึกเป็น Synced Pattern (ต่อยอดจากบทที่ 06)

1. เลือก Cover ของ CTA ทั้งก้อน (คลิกที่ชื่อ Cover ใน List View)
2. Block toolbar → Options (⋮) → Create pattern
3. หน้าต่าง Add pattern
   • Name: CTA – Hire Me
   • Categories: Call to action (ถ้ามี)
   • Synced: เปิด
   • คลิก Add
4. สังเกตว่ากรอบของบล็อกเปลี่ยนเป็น สีม่วง แสดงว่าเป็น Synced Pattern
5. คลิก Save draft ในหน้า About
6. ทดสอบการใช้ซ้ำ
   1. Pages → Add New Page → ชื่อ Contact → ปิด Page Title ใน Blocksy Page Settings เหมือนขั้นที่ 3.2
   2. + → แท็บ Patterns → My patterns → คลิก CTA – Hire Me
   3. Publish หน้า Contact
   4. คลิกที่ Pattern → Edit original → เปลี่ยนข้อความหัวข้อ → Save
   5. เปิดทั้งหน้า About และ Contact ตรวจว่าข้อความเปลี่ยนพร้อมกันทั้งสองหน้า

Synced กับ Not synced ต่างกันอย่างไร: Synced Pattern แก้ที่เดียวแล้วเปลี่ยนทุกหน้าที่ใช้ ส่วน Pattern แบบไม่ Synced จะคัดลอกบล็อกไปวางแล้วแก้แยกกันได้

ขั้นที่ 9: เผยแพร่ ตั้งหน้าแรก และเพิ่มในเมนู (10 นาที)

9.1 เผยแพร่

1. ที่หน้า About คลิก Publish → Publish อีกครั้งเพื่อยืนยัน
2. คลิก View Page เพื่อเปิดหน้าจริง

9.2 ตั้งเป็นหน้าแรก (ถ้าต้องการ)

1. Settings → Reading
2. Your homepage displays → A static page
3. Homepage → About
4. Posts page → เลือกหน้า Blog (ถ้ามี) หรือปล่อยว่าง
5. Save Changes

9.3 เพิ่มหน้าในเมนู

Blocksy เป็นธีมแบบ Classic ที่รองรับ Block Editor จึงจัดการเมนูที่ Appearance → Menus

1. Appearance → Menus → create a new menu → ชื่อ Main Menu → Create Menu
2. กล่อง Pages ด้านซ้าย → ติ๊ก About และ Contact → Add to Menu
3. ลากเรียงลำดับ About ไว้บนสุด
4. Menu Settings → Display location → ติ๊กตำแหน่ง Header Menu 1 และ Mobile Menu (ชื่ออาจต่างเล็กน้อยตามเวอร์ชันธีม)
5. Save Menu
6. เปิดหน้าเว็บ → คลิกไอคอนเมนู (≡) ตรวจว่ามีลิงก์ครบ

ขั้นที่ 10: ตรวจสอบ Responsive (10 นาที)

10.1 ตรวจใน Editor

1. แถบเครื่องมือด้านบน → ไอคอน Preview (Device) → สลับ Desktop / Tablet / Mobile
2. หมายเหตุ: ใน Editor บล็อกที่ถูกซ่อนอาจยังแสดงแบบจาง ๆ เพื่อให้แก้ไขได้ ให้ตรวจผลจริงในข้อ 10.2

10.2 ตรวจในเบราว์เซอร์ด้วย DevTools

1. เปิดหน้าจริง → กด F12 → คลิกไอคอน Toggle device toolbar (Ctrl+Shift+M)
2. ทดสอบ 3 ขนาด: 375px (Mobile), 768px (Tablet), 1280px (Desktop)
3. กด Ctrl+Shift+R (Hard reload) หลังเปลี่ยนขนาดทุกครั้ง
4. ตรวจตามตาราง

หมายเหตุ: บนมือถือชุด Desktop ถูกซ่อน และชุด Mobile ใช้ anchor about-m ปุ่ม #about จึงเลื่อนไปไม่ถึงส่วนนี้ ลองหาวิธีแก้ดู (ทดสอบความเข้าใจข้อ 3)

Checklist ตรวจงานก่อนเผยแพร่

ธีมและการตั้งค่า

• ใช้ธีม Blocksy และไม่มีปลั๊กอิน Page Builder ในรายการปลั๊กอิน
• Header มีโลโก้และเมนู ส่วน Footer มีข้อความลิขสิทธิ์ของตนเอง
• หน้า About ไม่มี Page Title ของธีม และส่วน Hero อยู่ติด Header

เนื้อหา

• มีครบ 5 ส่วนเนื้อหา: Hero, About Me, What I can Do!, Follow Me, CTA
• ข้อมูลทั้งหมดเป็นของตนเอง ไม่มีข้อความจากต้นแบบหรือข้อความตัวอย่างค้างอยู่
• หัวข้อเรียงลำดับถูกต้อง: H1 มีหนึ่งเดียว (ชื่อ) → H2 (ชื่อส่วน) → H3 (หัวข้อย่อย)
• ไม่มีเบอร์โทรศัพท์ส่วนตัว ที่อยู่บ้าน หรือข้อมูลส่วนบุคคลที่อ่อนไหว

ภาพ

• ภาพทุกภาพย่อขนาดตามขั้นที่ 0 แล้ว
• รูปโปรไฟล์และโลโก้มี Alt text ภาพพื้นหลังเว้น Alt text ไว้
• ถ้าใช้ภาพจาก AI ได้ระบุไว้ใน Footer หรือ Caption

ฟังก์ชัน

• ตั้ง Block Visibility ให้ About Me ถูกต้องตามอุปกรณ์
• ปุ่ม About Me เลื่อนลงไปยังส่วน About ได้ ส่วนปุ่ม Hire Me เปิดโปรแกรมอีเมลได้
• มี Synced Pattern CTA – Hire Me และใช้ในหน้า Contact แล้ว
• ลิงก์โซเชียลทุกลิงก์ใช้ได้และเปิดในแท็บใหม่
• ตรวจครบทั้ง 3 ขนาดจอตามตารางในขั้นที่ 10

ทดสอบความเข้าใจ

1. หน้าต้นแบบใช้ Elementor แต่บทความนี้ใช้ Block Editor ข้อดีและข้อจำกัดของแต่ละวิธีคืออะไร (ตอบอย่างน้อย 2 ข้อต่อวิธี)
2. การทำ About Me 2 ชุดแล้วซ่อนตามอุปกรณ์ กับการตั้ง Background ให้แต่ละคอลัมน์ วิธีไหนดีกว่า ให้เปรียบเทียบในแง่ขนาดหน้าเว็บ การดูแลเนื้อหา และ SEO
3. ถ้าต้องการให้ปุ่ม "About Me" ใช้ได้ทั้งบน Desktop และ Mobile ควรแก้อย่างไร (เสนออย่างน้อย 1 วิธี)
4. Synced Pattern ต่างจาก Template Part อย่างไร และเมื่อใดควรใช้แต่ละแบบ
5. เหตุใดบล็อก Progress Bar จึงต้องมาจากปลั๊กอิน การเพิ่มปลั๊กอินมีผลต่อความปลอดภัยและประสิทธิภาพของเว็บอย่างไร (เชื่อมโยงกับบทที่ 08–10)
6. การใช้ภาพที่สร้างด้วย AI บนเว็บไซต์ส่วนตัวมีประเด็นด้านจริยธรรมและลิขสิทธิ์อะไรที่ต้องระวัง

อยากไปต่อ? ลองทำโจทย์ท้าทาย

1. Transparent Header — ทำให้ Header ซ้อนอยู่บนภาพ Hero แบบต้นแบบ (Customize → Header) และตั้งให้เป็นแบบนี้เฉพาะหน้า About
2. หน้า Contact — เพิ่มแบบฟอร์มด้วยปลั๊กอิน Contact Form 7 แล้ววาง CTA Pattern ไว้ท้ายหน้า
3. Portfolio — สร้างหมวดหมู่ Projects เขียนบทความ 3 เรื่อง แล้วใช้ Query Loop แสดงเป็นตาราง 3 คอลัมน์ในหน้า About (ระหว่างส่วนที่ 3 และ 4)
4. Performance — วัดคะแนนด้วย PageSpeed Insights หรือ Lighthouse แล้วปรับภาพ (WebP, ขนาดเหมาะสม) ให้ได้คะแนน Performance ≥ 80 บนมือถือ บันทึกภาพก่อนและหลังปรับไว้เปรียบเทียบ
5. Dark overlay tuning — ใช้เครื่องมือตรวจ Contrast (เช่น WebAIM Contrast Checker) ตรวจสีข้อความบน Hero และ CTA ให้ผ่านเกณฑ์ WCAG AA

สรุป

ถึงตรงนี้เราได้หน้า About Me ครบทั้ง 5 ส่วน คือ Hero, About Me, What I can Do!, Follow Me และ CTA โดยใช้บล็อกของ WordPress เกือบทั้งหมด และใช้ปลั๊กอินเสริมเพียงตัวเดียว สิ่งสำคัญที่ได้ฝึกคือการแยกหน้าเว็บออกเป็นบล็อก การตั้งค่าเฉพาะหน้าของธีม การซ่อนบล็อกตามอุปกรณ์ด้วย Block Visibility และการใช้ Synced Pattern เพื่อลดงานซ้ำ

ถ้าทำตามแล้วติดตรงไหน ลองดูตารางปัญหาที่พบบ่อยในภาคผนวก ข หรือถามไว้ในช่องความคิดเห็นได้เลยครับ

ภาคผนวก ก: ตารางเทียบ Elementor (ต้นแบบ) กับ Block Editor (บทความนี้)

ภาคผนวก ข: ปัญหาที่พบบ่อยและวิธีแก้

ภาคผนวก ค: CSS เสริม (ใช้เมื่อจำเป็นเท่านั้น)

วางโค้ดที่ Appearance → Customize → Additional CSS แล้วกด Publish

/* พื้นหลังแบ่งสีของส่วน About (ใส่ class ที่ Group → Advanced → Additional CSS class(es)) */
.about-split   { background: linear-gradient(90deg, #0070FF 50%, #A8A8A8 50%) !important; }
.about-split-m { background: linear-gradient(0deg,  #495157 30%, #0070FF 30%) !important; }
 
/* แถบทักษะแบบ Custom HTML (ใช้แทน Kadence Progress Bar) */
.skill { margin-bottom: 18px; }
.skill label {
  display: flex; justify-content: space-between;
  color: #fff; font-weight: 600; margin-bottom: 6px;
}
.skill progress {
  width: 100%; height: 10px; border: 0; border-radius: 5px;
  appearance: none; -webkit-appearance: none; background: #fff;
}
.skill progress::-webkit-progress-bar   { background: #fff;    border-radius: 5px; }
.skill progress::-webkit-progress-value { background: #0070FF; border-radius: 5px; }
.skill progress::-moz-progress-bar      { background: #0070FF; border-radius: 5px; }

แหล่งอ้างอิง (ตรวจสอบเมื่อ 16 กันยายน 2569)

ธีมและปลั๊กอิน

• Blocksy (WordPress.org) — https://wordpress.org/themes/blocksy/
• Blocksy Documentation — https://creativethemes.com/blocksy/docs/
• Blocksy: Pages (Page Title, Page Structure, Content Area) — https://creativethemes.com/blocksy/docs/post-types/pages/
• Blocksy: Individual Post & Page Settings — https://creativethemes.com/blocksy/video-tutorials/customization/checking-out-blocksys-individual-post-page-settings/
• Blocksy: Header Builder Elements — https://creativethemes.com/blocksy/docs/header-elements/header-builder-elements/
• Blocksy: Logo — https://creativethemes.com/blocksy/docs/header-elements/logo/
• Blocksy Companion — https://wordpress.org/plugins/blocksy-companion/
• Kadence Blocks — https://wordpress.org/plugins/kadence-blocks/
• Kadence Progress Bar Block — https://www.kadencewp.com/help-center/docs/kadence-blocks/progress-bar-block/

WordPress Core / Block Editor

• Block Visibility in WordPress 7.0 (Make WordPress Core) — https://make.wordpress.org/core/2026/03/15/block-visibility-in-wordpress-7-0/
• Blocks list — https://wordpress.org/documentation/article/blocks-list/
• Cover block — https://wordpress.org/documentation/article/cover-block/
• Columns block — https://wordpress.org/documentation/article/columns-block/
• Icon block — https://wordpress.org/documentation/article/icon-block/
• Social Icons block — https://wordpress.org/documentation/article/social-icons/
• What's New in WordPress 7.0 — https://www.wpbeginner.com/news/whats-new-in-wordpress-7-0/

สำหรับเปรียบเทียบกับต้นแบบ (Elementor)

• Elementor Website Builder — https://wordpress.org/plugins/elementor/
• Using Elementor's Full Width Page template — https://elementor.com/help/using-elementors-full-width-page-template/
• Show or Hide Columns Per Device — https://elementor.com/help/show-or-hide-columns-per-device/

เครื่องมือเตรียมภาพ

• Squoosh (ย่อและแปลงภาพ) — https://squoosh.app/
• WebAIM Contrast Checker — https://webaim.org/resources/contrastchecker/

เอกสารในรายวิชา

• บทที่ 06 Block Editor (Gutenberg), บทที่ 07 WordPress Themes & FSE, บทที่ 08 Plugins, บทที่ 09 Responsive & Performance, บทที่ 10 Security
• แบบฝึกหัดบทที่ 06–07: Block Editor และ FSE Themes