วิธีใช้ Widget และ Sidebar ใน WordPress สำหรับมือใหม่

จัด Layout เว็บไซต์ได้เอง ด้วย Widget ใน Sidebar และ Footer แบบ Drag & Drop ไม่ต้องเขียนโค้ด

วิธีใช้ Widget และ Sidebar ใน WordPress สำหรับมือใหม่

หนึ่งในความสามารถที่ทำให้ WordPress เป็นที่นิยมสำหรับมือใหม่คือ Widget — ชิ้นส่วนเนื้อหาขนาดเล็กที่ลากวางได้ในพื้นที่ต่างๆ ของเว็บไซต์ เช่น Sidebar, Footer, และ Header โดยไม่ต้องแตะโค้ดแม้แต่บรรทัดเดียว บทความนี้จะพาคุณทำความรู้จัก Widget ตั้งแต่ต้นจนสามารถตั้งค่าได้เองอย่างมั่นใจ

Widget คืออะไร และทำไมถึงสำคัญ

Widget คือ "บล็อก" เนื้อหาสำเร็จรูปที่สร้างมาพร้อมกับ WordPress หรือปลั๊กอิน เช่น Widget สำหรับแสดงรายการโพสต์ล่าสุด, Widget ค้นหา, Widget แสดงหมวดหมู่, หรือ Widget ข้อความแบบกำหนดเอง

ส่วน Widget Area (หรือ Sidebar) คือพื้นที่ที่ธีมกำหนดไว้ให้ใส่ Widget เช่น แถบด้านข้าง (Sidebar Right), Footer Column 1-3 เป็นต้น แต่ละธีมมีจำนวน Widget Area แตกต่างกันไป

เข้าสู่หน้าจัดการ Widget ใน WordPress

WordPress มีสองวิธีในการจัดการ Widget ขึ้นอยู่กับเวอร์ชันและธีมที่คุณใช้

วิธีที่ 1: ผ่าน Appearance > Widgets (Classic)

  1. เข้าสู่ WordPress Admin Dashboard
  2. คลิก Appearance ในเมนูซ้าย
  3. เลือก Widgets
  4. คุณจะเห็น Widget ที่พร้อมใช้งานทางซ้าย และ Widget Area ทางขวา
  5. ลากและวาง Widget จากด้านซ้ายไปยัง Sidebar หรือ Footer Area ที่ต้องการ

วิธีที่ 2: ผ่าน Block-based Widgets (WordPress 5.8+)

  1. เข้า Appearance > Widgets เหมือนเดิม
  2. อินเทอร์เฟซจะเป็น Block Editor คล้าย Gutenberg
  3. คลิกปุ่ม + (Add Block) เพื่อเพิ่มบล็อกเนื้อหา
  4. ค้นหาชื่อ Widget ที่ต้องการ เช่น "Search", "Latest Posts"
  5. คลิกเพื่อเพิ่มลงใน Widget Area ที่เปิดอยู่
หมายเหตุ: ถ้าธีมของคุณไม่มีหน้า Widgets ให้เลือก อาจเป็นเพราะธีมนั้นใช้ Full Site Editing (FSE) แทน ให้ไปที่ Appearance > Editor แทน

วิธีเพิ่ม Widget ลง Sidebar ทีละขั้นตอน

ตัวอย่างนี้จะเพิ่ม Widget "Recent Posts" และ "Search" ลงใน Primary Sidebar

  1. ไปที่ Appearance > Widgets
  2. ค้นหาช่อง Widget Area ชื่อ Primary Sidebar (หรือ Blog Sidebar ขึ้นอยู่กับธีม)
  3. คลิกปุ่ม + ใน Sidebar Area นั้น
  4. พิมพ์ "Search" แล้วคลิก Widget ค้นหา — มันจะปรากฏใน Sidebar ทันที
  5. คลิก + อีกครั้ง พิมพ์ "Latest Posts" แล้วเลือก
  6. ตั้งค่า "Number of items to show" เป็น 5
  7. คลิก Update ที่มุมบนขวาเพื่อบันทึก
เคล็ดลับ: ลำดับ Widget ใน Sidebar มีผล Widget ที่อยู่บนสุดจะแสดงก่อน ลากขึ้นลงเพื่อจัดลำดับได้เลย

วิธีจัดการ Widget ใน Footer

หลายธีมมี Footer Widget Area 2-4 คอลัมน์ เช่น "Footer 1", "Footer 2", "Footer 3" วิธีเพิ่มเหมือนกับ Sidebar เลย แค่เลือก Area ที่ถูกต้อง

ตัวอย่าง Widget ที่นิยมใส่ใน Footer:

<!-- ตัวอย่าง Custom HTML Widget สำหรับข้อมูลติดต่อ -->
<div class="footer-contact">
  <h4>ติดต่อเรา</h4>
  <p>📍 123 ถนนสุขุมวิท กรุงเทพฯ 10110</p>
  <p>📞 02-123-4567</p>
  <p>✉️ [email protected]</p>
</div>

Widget ที่มาพร้อมกับ WordPress เริ่มต้น

WordPress ติดตั้งมาพร้อม Widget หลักดังนี้:

เพิ่ม Widget จากปลั๊กอิน

ปลั๊กอินส่วนมากจะเพิ่ม Widget ของตัวเองมาให้อัตโนมัติหลังติดตั้ง เช่น:

เมื่อติดตั้งปลั๊กอินแล้ว Widget ใหม่จะปรากฏในหน้า Widgets โดยอัตโนมัติ — ลากไปวางได้เลย

การใช้ Customizer เพื่อ Preview Widget แบบ Live

WordPress มีฟีเจอร์ Live Preview ผ่าน Customizer ทำให้เห็นผลทันทีก่อนบันทึก

  1. ไปที่ Appearance > Customize
  2. คลิก Widgets ในแถบด้านซ้าย
  3. เลือก Widget Area ที่ต้องการแก้ไข
  4. เพิ่มหรือเอา Widget ออก — ด้านขวาจะ Preview ทันที
  5. พอใจแล้วคลิก Publish
เคล็ดลับ: Customizer เหมาะมากสำหรับมือใหม่ เพราะเห็นผลก่อนบันทึกจริง ไม่ต้องกังวลว่าจะทำหน้าเว็บพัง

ตรวจสอบว่า Widget ทำงานถูกต้อง

หลังเพิ่ม Widget แล้ว ให้ตรวจสอบดังนี้:

# 1. เปิดเว็บไซต์ใน Browser ใหม่ (Incognito) เพื่อดูในฐานะผู้เยี่ยมชม
# 2. ดูว่า Widget แสดงในตำแหน่งที่ถูกต้อง

# 3. ตรวจสอบด้วย Browser Developer Tools (F12)
# เปิด Console และดูว่ามี Error ไหม

# 4. ทดสอบค้นหาผ่าน Search Widget
# พิมพ์คำค้นหาแล้วกด Enter

# 5. ตรวจสอบ Widget บนมือถือ
# เปิด DevTools > Toggle Device Toolbar (Ctrl+Shift+M)
Tip: ถ้า Widget ไม่แสดง ให้ตรวจสอบว่า Sidebar ถูกเรียกใช้งานในไฟล์ Template ของธีม (sidebar.php) หรือธีมนั้น Support Widget Area นั้นจริงๆ

แก้ปัญหาที่พบบ่อย

Error: "Widget Area ไม่ปรากฏในหน้า Widgets"

สาเหตุ: ธีมที่ใช้อาจไม่ได้ลงทะเบียน Widget Area นั้น วิธีแก้: ตรวจสอบ Documentation ของธีม หรือลองเปลี่ยนธีมชั่วคราวเป็น Twenty Twenty-Four เพื่อทดสอบ ถ้า Widget Area ปรากฏ แสดงว่าธีมเดิมไม่รองรับ

Error: "Widget แสดงไม่ตรงตำแหน่ง"

สาเหตุ: อาจเป็นปัญหา CSS ของธีม หรือ Widget Area ชื่อเหมือนกัน วิธีแก้: ลองเปลี่ยนชื่อ Widget Area หรือเพิ่ม CSS ใน Appearance > Customize > Additional CSS เพื่อปรับตำแหน่ง

Error: "Widget หายหลังอัปเดต WordPress"

สาเหตุ: การอัปเดตธีมหรือ WordPress บางครั้งรีเซ็ต Widget Area วิธีแก้: ถ้ายังมี Widget ค้างอยู่ในส่วน "Inactive Widgets" ด้านล่างของหน้า Widgets ให้ลากกลับขึ้นมาได้เลย

Error: "Custom HTML Widget แสดง Code แทนที่จะ Render"

สาเหตุ: อาจเป็นเพราะมีการ Escape HTML วิธีแก้: ตรวจสอบว่าใช้ Custom HTML Widget จริงๆ ไม่ใช่ Text Widget และไม่มี Plugin Security ที่บล็อก HTML ใน Widget

Error: "Sidebar ไม่แสดงบน Single Post"

สาเหตุ: ธีมบางตัวซ่อน Sidebar บนหน้า Single Post หรือ Full-Width Layout วิธีแก้: ตรวจสอบ Page/Post Settings ในแต่ละโพสต์ หรือดู Theme Options ว่ามีตัวเลือก Layout Sidebar ไหม

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

Q: Widget กับ Block Editor ต่างกันอย่างไร?

A: Widget คือชิ้นส่วนเนื้อหาสำหรับวางใน Widget Area (Sidebar, Footer) ส่วน Block Editor (Gutenberg) ใช้สร้างเนื้อหาภายในโพสต์หรือเพจ ตั้งแต่ WordPress 5.8 เป็นต้นมา หน้า Widget Editor ใช้ Block Editor เป็น Interface แต่ยังคงทำหน้าที่เดิมคือจัดการ Widget Area

Q: สามารถซ่อน Widget บนมือถือได้ไหม?

A: WordPress เองไม่มีฟีเจอร์ซ่อน Widget บนมือถือในตัว แต่ทำได้โดยเพิ่ม CSS class และใช้ Media Query ใน Appearance > Customize > Additional CSS เช่น @media(max-width:768px){ .widget-class { display:none; } } หรือใช้ปลั๊กอินอย่าง Widget Options เพื่อควบคุมการแสดงผลตามอุปกรณ์

Q: เพิ่ม Widget Area ใหม่ได้เองไหมโดยไม่แก้โค้ดธีม?

A: ถ้าไม่อยากแก้โค้ดธีม สามารถใช้ปลั๊กอินอย่าง Widget Options หรือ Widgetkit เพื่อสร้าง Widget Area เพิ่มได้ หรือถ้าธีมรองรับ Page Builder อย่าง Elementor ก็สามารถวาง Widget ได้อิสระยิ่งขึ้นในทุกพื้นที่

บทความที่เกี่ยวข้อง