วิธีสร้างและจัดการ Navigation Menu ใน WordPress

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

Navigation Menu ใน WordPress คืออะไร?

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

• Primary Menu — เมนูหลักแนวนอนด้านบนสุด
• Footer Menu — เมนูที่อยู่ส่วนท้ายหน้า
• Sidebar Menu — เมนูที่อยู่ในแถบด้านข้าง
• Mobile Menu — เมนูสำหรับหน้าจอโทรศัพท์มือถือ

จำนวน Location ที่มีให้ขึ้นอยู่กับธีมที่ใช้ บางธีมมีให้ 2 ตำแหน่ง บางธีมมีมากถึง 5 ตำแหน่ง

วิธีสร้าง Navigation Menu ใหม่

ก่อนจะใส่เมนูลงในเว็บไซต์ คุณต้องสร้างเมนูก่อน ทำตามขั้นตอนนี้:

1. ล็อกอินเข้า WordPress Admin แล้วไปที่ Appearance → Menus
2. คลิกลิงก์ "create a new menu" หรือกรอกชื่อเมนูในช่อง Menu Name แล้วคลิก Create Menu
3. ตั้งชื่อเมนูให้ชัดเจน เช่น "Main Navigation" หรือ "เมนูหลัก"
4. เมนูเปล่าจะปรากฏขึ้น พร้อมให้เพิ่มรายการเมนู

วิธีเพิ่มหน้า (Pages) และโพสต์เข้าในเมนู

หลังจากสร้างเมนูแล้ว คุณสามารถเพิ่มรายการเข้าเมนูได้หลายแบบ:

เพิ่มหน้า (Page)

1. ในแผง Add menu items ทางซ้าย คลิกแท็บ Pages
2. เลือกหน้าที่ต้องการจากรายการ หรือค้นหาชื่อหน้า
3. คลิก Add to Menu
4. หน้าจะปรากฏในรายการเมนูทางขวา

เพิ่มหมวดหมู่ (Category)

1. คลิกแท็บ Categories
2. เลือกหมวดหมู่โพสต์ที่ต้องการ
3. คลิก Add to Menu

เพิ่มลิงก์ภายนอก (Custom Links)

1. คลิกแท็บ Custom Links
2. ใส่ URL เช่น https://facebook.com/yourpage
3. ใส่ชื่อที่แสดง เช่น "Facebook"
4. คลิก Add to Menu

วิธีทำเมนูแบบ Dropdown (Sub-menu)

เมนู Dropdown คือเมนูที่มีเมนูย่อยซ่อนอยู่ เมื่อผู้ใช้โฮเวอร์หรือคลิกที่เมนูหลักจะแสดงรายการย่อยขึ้นมา วิธีทำ:

1. เพิ่มรายการเมนูหลักและเมนูย่อยลงในเมนูทั้งหมดก่อน
2. จับรายการที่ต้องการให้เป็นเมนูย่อย แล้ว ลากไปทางขวา ประมาณ 30px จนมีลักษณะ "ย่นเข้าไป" ใต้เมนูหลัก
3. รายการนั้นจะกลายเป็น sub-item ของเมนูด้านบน
4. คุณสามารถซ้อนเมนูย่อยได้หลายระดับ แต่แนะนำไม่เกิน 2 ระดับ
5. คลิก Save Menu

วิธีกำหนด Menu Location (ตำแหน่งแสดงเมนู)

การสร้างเมนูเสร็จแล้วยังไม่พอ คุณต้องกำหนดตำแหน่งให้เมนูด้วย:

1. ในหน้า Menus คลิกแท็บ Manage Locations ด้านบน
2. จะเห็นรายการ Location ทั้งหมดที่ธีมรองรับ เช่น Primary Menu, Footer Menu
3. ในช่อง Assigned Menu ของแต่ละ Location ให้เลือกเมนูที่คุณสร้างไว้
4. คลิก Save Changes
5. เข้าหน้าเว็บไซต์เพื่อตรวจสอบว่าเมนูแสดงถูกตำแหน่งแล้ว

หรืออีกวิธีคือ เมื่ออยู่ในหน้าแก้ไขเมนู ให้เลื่อนลงมาที่ส่วน Menu Settings แล้วติ๊กเลือก Display location ที่ต้องการได้เลย

วิธีแก้ไขและจัดเรียงรายการเมนู

เมื่อเพิ่มรายการเมนูแล้ว คุณสามารถแก้ไขได้ตามต้องการ:

• เปลี่ยนชื่อที่แสดง: คลิกลูกศรของรายการเมนู แล้วแก้ไขในช่อง Navigation Label
• เพิ่ม Title Attribute: ใส่คำอธิบายสั้น ๆ ที่แสดงเมื่อโฮเวอร์เมาส์
• เปลี่ยนลำดับ: ลากรายการขึ้น-ลงเพื่อจัดลำดับใหม่
• ลบรายการ: คลิก "Remove" ในแผงรายการเมนูนั้น
• เปิดลิงก์ในแท็บใหม่: ติ๊ก "Open link in a new tab" ในแผงแก้ไข

การสร้างเมนูด้วย Block Editor (Gutenberg Full Site Editing)

หากคุณใช้ธีมที่รองรับ Full Site Editing (FSE) เช่น Twenty Twenty-Four หรือ Twenty Twenty-Five การจัดการเมนูจะใช้วิธีที่แตกต่างออกไปเล็กน้อย:

1. ไปที่ Appearance → Editor
2. คลิกที่ส่วน Header ของเว็บไซต์
3. คลิกที่บล็อก Navigation
4. ใช้ปุ่ม + เพื่อเพิ่มรายการเมนูใหม่
5. คลิก Save เพื่อบันทึก

ในธีม FSE จะไม่มีหน้า Appearance → Menus แบบเดิม แต่จะจัดการผ่าน Site Editor แทน

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

หลังตั้งค่าเมนูเสร็จแล้ว ให้ตรวจสอบด้วยวิธีต่อไปนี้:

# ตรวจสอบ HTML ของเมนูผ่าน curl (ตรวจจาก terminal หรือ cPanel Terminal)
curl -s https://yourwebsite.com | grep -i "nav"

# ตรวจสอบ Menu Location ที่ลงทะเบียนไว้ผ่าน WP-CLI
wp menu location list

# ดูรายการเมนูทั้งหมด
wp menu list

# ดูรายการในเมนูชื่อ "Main Menu"
wp menu item list "Main Menu"

# ตรวจสอบว่าแต่ละลิงก์ในเมนูไม่ 404
wp post list --post_type=page --post_status=publish --fields=post_title,post_name

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

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

สาเหตุหลักคือยังไม่ได้กำหนด Menu Location แก้ไขโดยไปที่ Appearance → Menus → Manage Locations แล้วเลือกเมนูที่สร้างไว้ในช่อง Assigned Menu ของ Location ที่ต้องการ จากนั้นคลิก Save Changes

Error: "Dropdown เมนูไม่แสดงบน Mobile"

ปัญหานี้เกิดจาก JavaScript ของธีมไม่ทำงาน หรือธีมไม่รองรับ Mobile Menu แก้โดยตรวจสอบว่า JavaScript ไม่ถูกบล็อก หรือลองติดตั้ง Plugin เช่น Responsive Menu เพื่อช่วยจัดการเมนูบนมือถือโดยเฉพาะ

Error: "ลิงก์ในเมนูพาไปหน้า 404"

เกิดเมื่อหน้าหรือโพสต์ที่เชื่อมโยงถูกลบไปแล้ว แก้ไขโดยเปิดเมนูแล้วหารายการที่มีเครื่องหมาย "!" สีเหลือง คลิกและเปลี่ยน URL หรือเปลี่ยนไปชี้ที่หน้าอื่น หรือ Remove รายการนั้นออก

Error: "เมนูแสดงผิดตำแหน่ง"

เกิดจากการกำหนด Location ผิด ให้ไปที่ Manage Locations แล้วตรวจสอบว่าเมนูถูกกำหนดให้ตรงกับตำแหน่งที่ธีมรองรับ นอกจากนี้ตรวจสอบว่าธีมมี Location นั้นจริง เช่น บางธีมไม่มี Footer Menu

Error: "เพิ่มหน้าเข้าเมนูแล้วแต่ไม่ปรากฏ"

ลองล้าง Cache ของเว็บไซต์ก่อน หากใช้ Plugin Cache เช่น W3 Total Cache หรือ WP Rocket ให้คลิก Clear Cache แล้วรีเฟรชหน้าเว็บ ปัญหานี้มักเกิดจาก Cache เก่าค้างอยู่

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

Q: สร้างเมนูได้กี่ชุดใน WordPress?

A: ไม่จำกัด คุณสามารถสร้างเมนูได้กี่ชุดก็ได้ตามต้องการ แต่จำนวน Location ที่สามารถแสดงเมนูได้พร้อมกันนั้นขึ้นอยู่กับธีมที่ใช้ โดยทั่วไปธีมส่วนใหญ่รองรับอย่างน้อย 2 Location

Q: ทำ Mega Menu ใน WordPress ต้องใช้ Plugin อะไร?

A: หากต้องการ Mega Menu ที่มีรูปภาพหรือคอลัมน์หลายคอลัมน์ แนะนำ Plugin ฟรีอย่าง Max Mega Menu หรือ WP Mega Menu ซึ่งใช้งานง่ายและรองรับธีมส่วนใหญ่

Q: ถ้าเปลี่ยนธีม เมนูที่สร้างไว้จะหายไปไหม?

A: รายการเมนูที่คุณสร้างจะยังคงอยู่ในฐานข้อมูล WordPress ไม่หายไป แต่การกำหนด Menu Location อาจต้องตั้งค่าใหม่เพราะ Location ของธีมใหม่อาจมีชื่อหรือจำนวนต่างจากธีมเดิม