วิธีตั้งค่าเมนูนำทาง WordPress ฉบับมือใหม่

เมนูนำทาง (Navigation Menu) คือสิ่งแรกที่ผู้เยี่ยมชมเว็บไซต์จะมองเห็นและใช้งาน ถ้าเมนูสับสน ผู้ใช้ก็จะออกไปในทันที WordPress มีระบบจัดการเมนูที่ง่ายมากผ่าน Dashboard โดยไม่ต้องแก้โค้ดใดๆ บทความนี้จะพาคุณตั้งค่าเมนูตั้งแต่ต้นจนเสร็จสมบูรณ์

เมนูใน WordPress คืออะไร และทำไมถึงสำคัญ

WordPress แบ่งเมนูออกเป็นสองประเภทหลักคือ:

• Primary Menu (เมนูหลัก) — แสดงที่แถบด้านบนของเว็บไซต์ มักเป็นลิงก์ไปยังหน้าสำคัญ เช่น หน้าแรก เกี่ยวกับเรา บริการ ติดต่อ
• Footer Menu (เมนูท้ายเว็บ) — แสดงด้านล่างสุดของทุกหน้า มักใส่ลิงก์รองเช่น นโยบายความเป็นส่วนตัว แผนผังเว็บ
• Social Menu — บางธีมรองรับเมนูพิเศษสำหรับไอคอน Social Media

ตำแหน่งที่เมนูแสดง (Menu Location) ขึ้นอยู่กับธีมที่คุณใช้ แต่ละธีมจะกำหนดตำแหน่งมาให้ต่างกัน

เข้าสู่หน้าจัดการเมนู

มีสองวิธีในการเข้าหน้าจัดการเมนู:

1. ล็อกอิน WordPress Admin → ไปที่ Appearance → Menus
2. หรือใช้ Customize → Menus เพื่อดูผลลัพธ์แบบ Live Preview

วิธีสร้างเมนูใหม่ตั้งแต่ต้น

ขั้นตอนสำหรับธีมแบบ Classic (ส่วนใหญ่ที่นิยมใช้ในไทย):

1. ไปที่ Appearance → Menus
2. คลิก "create a new menu"
3. ตั้งชื่อเมนู เช่น "Main Menu" หรือ "เมนูหลัก"
4. คลิก Create Menu
5. เลือกรายการที่ต้องการเพิ่มจากกล่องด้านซ้าย (Pages, Posts, Custom Links, Categories)
6. คลิก Add to Menu
7. ลากเรียงลำดับรายการตามต้องการ
8. เลือก Menu Location ด้านล่าง เช่น "Primary Menu"
9. คลิก Save Menu

วิธีเพิ่มรายการประเภทต่างๆ ในเมนู

1. เพิ่มหน้า (Pages)

จากกล่อง "Pages" ด้านซ้าย เลือกหน้าที่ต้องการแล้วกด Add to Menu หากไม่เห็นหน้าที่ต้องการ ลองคลิก "View All" เพื่อดูทั้งหมด

2. เพิ่มหมวดหมู่บทความ (Categories)

กล่อง "Categories" จะแสดงหมวดหมู่ทั้งหมดของบล็อก เหมาะสำหรับเว็บที่มีบทความหลายหมวด เพิ่มได้เช่นเดียวกับ Pages

3. เพิ่มลิงก์กำหนดเอง (Custom Links)

ใช้สำหรับลิงก์ไปยัง URL ใดก็ได้ ทั้งภายในและภายนอก:

• URL: ใส่ที่อยู่เว็บ เช่น https://facebook.com/yourpage
• Link Text: ชื่อที่แสดงในเมนู เช่น "Facebook ของเรา"

4. เพิ่มบทความ (Posts) แบบเฉพาะเจาะจง

หากต้องการลิงก์ไปบทความใดบทความหนึ่งโดยตรง ให้คลิก "Screen Options" ด้านบนขวา แล้วเปิดใช้ Posts เพื่อให้กล่อง Posts ปรากฏขึ้น

การสร้างเมนูย่อย (Sub-menu / Dropdown)

เมนูย่อยช่วยจัดระเบียบเมนูที่มีรายการมาก เช่น "บริการ" มีเมนูย่อยเป็น "โฮสติ้ง", "โดเมน", "SSL"

1. เพิ่มรายการทั้งหมดในเมนูก่อน
2. ลากรายการที่ต้องการเป็นเมนูย่อย ไปชิดขวาใต้รายการหลัก (จะเห็น indent เยื้องออกมา)
3. รายการที่เยื้องจะกลายเป็น dropdown อัตโนมัติ
4. คลิก Save Menu

การแก้ไขชื่อที่แสดงในเมนู (Navigation Label)

บางครั้งชื่อหน้าหรือหมวดหมู่ยาวเกินไปสำหรับเมนู คุณสามารถเปลี่ยนชื่อที่แสดงได้โดยไม่กระทบชื่อจริง:

1. คลิกลูกศรลงที่รายการในเมนู
2. แก้ไขช่อง Navigation Label เป็นชื่อสั้นที่ต้องการ
3. ช่อง "Title Attribute" ใส่คำอธิบายที่จะแสดงเมื่อ hover เมาส์ (ไม่บังคับ)
4. กด Save Menu

การกำหนด CSS Class ให้เมนู (สำหรับผู้ต้องการปรับสไตล์)

หากต้องการใส่ CSS Class เพิ่มเติมให้รายการเมนูใด:

1. คลิก Screen Options ด้านบนขวา
2. เปิดใช้ CSS Classes
3. กลับมาที่รายการในเมนู คลิกลูกศรลง จะเห็นช่อง "CSS Classes"
4. ใส่ class name เช่น menu-highlight

/* CSS ใน style.css หรือ Customize → Additional CSS */
.menu-highlight > a {
  background: #16a34a;
  color: #fff !important;
  border-radius: 4px;
  padding: 4px 10px;
}

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

หลังบันทึกเมนูแล้ว ให้ตรวจสอบดังนี้:

# 1. เปิดเว็บไซต์ในแท็บใหม่ ดูว่าเมนูแสดงครบ
# 2. ทดสอบทุกลิงก์ว่าพาไปหน้าที่ถูกต้อง
# 3. ตรวจสอบบนมือถือ (Responsive) ว่า hamburger menu ทำงาน
# 4. ตรวจสอบ Dropdown ว่า hover/tap แล้วเมนูย่อยแสดง
# 5. ใช้ Inspect Element ดู HTML ว่า nav element มี class ถูกต้อง

# ตัวอย่าง HTML เมนูที่ถูกต้องจาก WordPress:
# <nav id="site-navigation" class="main-navigation">
#   <ul id="primary-menu" class="menu">
#     <li class="menu-item"><a href="/">หน้าแรก</a></li>
#   </ul>
# </nav>

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

Error: "เมนูไม่แสดงบนเว็บไซต์เลย"

สาเหตุหลักคือยังไม่ได้กำหนด Menu Location หรือธีมไม่รองรับตำแหน่งนั้น แก้ได้โดย:

1. ไปที่ Appearance → Menus
2. คลิกแท็บ Manage Locations
3. เลือกเมนูที่สร้างไว้ในช่อง Primary Menu
4. กด Save Changes

Error: "Dropdown เมนูย่อยไม่แสดงบนมือถือ"

เป็นปัญหาของธีมที่ไม่รองรับ Touch Event สำหรับ dropdown แก้ด้วยการติดตั้งปลั๊กอิน Superfly Menu หรือ WP Mobile Menu หรือตรวจสอบว่าธีมมีการตั้งค่า Mobile Navigation ให้เปิดใช้งาน

Error: "หน้าที่เพิ่งสร้างไม่ปรากฏในกล่อง Pages"

ให้คลิก View All ในกล่อง Pages เพื่อดูทุกหน้า หรือใช้ Search เพื่อค้นหาชื่อหน้า ถ้ายังไม่เห็น ให้ตรวจว่าหน้านั้น Status เป็น Published แล้ว

Error: "เมนูแสดงผิดลำดับ หรือหายไปหลัง Update ธีม"

การอัปเดตธีมบางครั้งรีเซ็ต Menu Location ให้กลับไปที่ Appearance → Menus → Manage Locations แล้วกำหนดค่าใหม่อีกครั้ง

Error: "ลิงก์เมนูพา 404 หรือไปหน้าผิด"

ตรวจสอบ Permalink ของหน้านั้น (Edit → ดูที่ URL) ถ้า Permalink เปลี่ยน WordPress ไม่อัปเดตเมนูอัตโนมัติ ให้ลบรายการเก่าออกแล้วเพิ่มใหม่ หรือใช้ Custom Link ใส่ URL ตรงๆ

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

Q: สร้างเมนูได้กี่อัน?

WordPress ไม่จำกัดจำนวนเมนู คุณสร้างได้เท่าที่ต้องการ แต่จะแสดงได้เฉพาะตำแหน่งที่ธีมกำหนดไว้เท่านั้น ถ้าธีมรองรับ 2 ตำแหน่ง (Header + Footer) คุณก็จะแสดงเมนูได้พร้อมกัน 2 เมนู

Q: เพิ่ม Custom Link ไปยังหน้าของเว็บตัวเองควรใช้ URL แบบไหน?

แนะนำให้ใช้ URL สัมพัทธ์ (Relative URL) เช่น /contact/ แทนที่จะเป็น https://yoursite.com/contact/ เพราะถ้าเปลี่ยน domain ในอนาคต ลิงก์จะยังทำงานได้ อย่างไรก็ตาม ถ้าใช้ Pages ในการเพิ่มเมนู WordPress จัดการ URL ให้อัตโนมัติ ไม่ต้องกังวล

Q: เมนูใน WordPress Customizer กับ Appearance → Menus ต่างกันอย่างไร?

ทั้งสองอย่างแก้ไขข้อมูลเดียวกัน แต่ Customizer มีข้อดีคือเห็นผลลัพธ์แบบ Live Preview บนเว็บด้านขวา ในขณะที่ Appearance → Menus มี UI ที่จัดการได้ง่ายกว่าสำหรับเมนูที่มีหลายรายการ