จะสร้างเมนูแบบเลื่อนลงใน WordPress ได้อย่างไร?

เผยแพร่แล้ว: 2022-09-06

คุณสงสัยหรือไม่ว่าจะ สร้างเมนูแบบเลื่อนลงใน WordPress ได้อย่างไร? หากเป็นกรณีนี้แสดงว่าคุณมาถูกที่แล้ว

การเพิ่มคุณลักษณะการนำทางที่ดีเป็นสิ่งสำคัญเมื่อสร้างเว็บไซต์ โดยเฉพาะอย่างยิ่งถ้าคุณมีเว็บไซต์ที่มีหน้าและโพสต์จำนวนมาก การนำทางที่เหมาะสมเป็นสิ่งสำคัญ

เพราะผู้เยี่ยมชมของคุณควรสามารถเข้าถึงอะไรก็ได้บนเว็บไซต์ของคุณได้อย่างง่ายดาย ดังนั้นการสร้างเมนูแบบเลื่อนลงเป็นวิธีที่จะไป

แต่คุณจะสร้างเมนูแบบเลื่อนลงใน WordPress ได้อย่างไร? ไม่ต้องกังวล! ในบทความนี้ เราจะแนะนำคุณตลอดขั้นตอนทั้งหมดในการสร้างเมนูแบบเลื่อนลงบน WordPress อย่างง่ายดาย

มาเริ่มกันเลย!

ในบทความนี้: ซ่อน
ทำไมต้องเพิ่มเมนูแบบเลื่อนลงใน WordPress?
ประโยชน์ของเมนูแบบเลื่อนลงใน WordPress
จะสร้างเมนูแบบเลื่อนลงใน WordPress ได้อย่างไร?
1. การสร้างเมนูแบบเลื่อนลงใน WordPress การแก้ไขเว็บไซต์แบบเต็ม
2. สร้างเมนูแบบเลื่อนลงด้วยธีมคลาสสิก (Kadence)
3. สร้างเมนูแบบเลื่อนลงใน WordPress ด้วย Plugin
บทสรุป

ทำไมต้องเพิ่มเมนูแบบเลื่อนลงใน WordPress?

ก่อนดำเนินการต่อ คุณอาจต้องการทราบเหตุผลที่ต้องเพิ่มเมนูแบบเลื่อนลงบนเว็บไซต์ WordPress

มีประโยชน์มากมายของการใช้เมนูแบบเลื่อนลงบนเว็บไซต์ของคุณ ประการแรก จะทำให้การนำทางเว็บไซต์ของคุณง่ายขึ้นสำหรับผู้ใช้

ตัวอย่างเช่น หากคุณกำลังสร้างเว็บไซต์อีคอมเมิร์ซ เมนูแบบเลื่อนลงจะช่วยจัดหมวดหมู่ผลิตภัณฑ์และบริการอย่างเหมาะสม

ประโยชน์ของเมนูแบบเลื่อนลงใน WordPress

ด้านล่างนี้คือประโยชน์บางประการของเมนูแบบเลื่อนลง:

  • คุณจะเพิ่มรายการลงในเมนูได้มากเท่าที่ต้องการ
  • ง่ายต่อการเพิ่มรายการเมนูในพื้นที่ขนาดเล็ก
  • เมนูแบบเลื่อนลงช่วยเพิ่มประสบการณ์การนำทางที่ง่ายสำหรับผู้เยี่ยมชมของคุณ
  • จัดการรายการตามหมวดหมู่ได้อย่างง่ายดาย

เมื่อคุณทราบประโยชน์ของเมนูแบบเลื่อนลงบนเว็บไซต์ WordPress แล้ว คุณอาจต้องการสร้างมันขึ้นมา

ดังนั้นโดยไม่ต้องกังวลใจอีกต่อไป มาดูขั้นตอนกันเลย


จะสร้างเมนูแบบเลื่อนลงใน WordPress ได้อย่างไร?

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

นอกจากนี้ คุณสามารถใช้วิธีการต่างๆ เพื่อสร้างเมนูแบบเลื่อนลงใน WordPress ลองดูที่รายละเอียด

1. การสร้างเมนูแบบเลื่อนลงใน WordPress การแก้ไขเว็บไซต์แบบเต็ม

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

กำลังติดตั้งธีม FSE ยี่สิบสอง
กำลังติดตั้งธีม FSE ยี่สิบสอง

ในที่นี้ เราจะใช้ธีม Twenty Twenty-Two ซึ่งเป็นธีมแบบบล็อกเริ่มต้นชุดแรกสำหรับการแก้ไขแบบเต็มไซต์

เริ่มกันเลย!

ขั้นตอนที่ 1. นำทางไปยัง Header

ในการเริ่มต้น ให้ไปที่ ลักษณะที่ ปรากฏ > ตัวแก้ไข และคุณจะได้รับแจ้งไปยังหน้าตัวแก้ไข

ไปที่หน้าบรรณาธิการ
ไปที่หน้าบรรณาธิการ

คุณยังสามารถไปที่หน้าของตัวแก้ไขผ่านการปรับแต่งหรือแก้ไขเว็บไซต์

หลังจากนี้ คลิกที่ตัวเลือก มุมมองรายการ บนแถบเครื่องมือด้านบน จากนั้นคุณจะเห็นตัวเลือก ส่วนหัว คุณต้องเลือกตัวเลือก การนำทาง เพื่อสร้างหรือจัดการเมนู ซ้อนอยู่ภายในส่วนหัวขึ้นอยู่กับจำนวนกลุ่มในส่วนหัว

และหากคุณวางเมาส์เหนือตัวเลือก การนำทาง เมนูของคุณจะไฮไลต์ด้วยเส้นขอบสีน้ำเงิน

มุ่งหน้าไปที่บล็อกการนำทาง
มุ่งหน้าไปที่บล็อกการนำทาง

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

แปลงรายการเพจเป็นลิงค์เดียวเพื่อเริ่มแก้ไข
แปลงรายการเพจเป็นลิงค์เดียวเพื่อเริ่มแก้ไข

ให้คลิกที่ตัวเลือก Convert และดูที่ตัวเลือกมุมมองรายการ คุณจะเห็นตัวเลือก รายการหน้า ถูกแทนที่ด้วยลิงก์ของหน้าแต่ละหน้า

แปลงเป็นลิงค์หน้าเดียว
แปลงเป็นลิงค์หน้าเดียว

ขั้นตอนที่ 2. สร้างเมนู

บล็อกการนำทางยังช่วยให้คุณสร้างเมนูได้ เพียงคลิกที่ช่อง การนำทาง ในมุมมองรายการ แล้วคลิก เลือกเมนู จากนั้นคลิก สร้างเมนูใหม่

คลิกที่สร้างเมนูใหม่
คลิกที่สร้างเมนูใหม่

หลังจากนั้นให้คลิกที่ตัวเลือก Start Empty เมนูใหม่จะถูกเพิ่มลงในรายการ

คลิกเริ่มตัวเลือกว่างเพื่อสร้างเมนูใหม่
คลิกเริ่มตัวเลือกว่างเพื่อสร้างเมนูใหม่

ตอนนี้ คลิกที่ “+” เพื่อเริ่มเพิ่มรายการเมนู คุณสามารถดูขั้นตอนการเพิ่มรายการเมนูในภาพด้านล่าง

การเพิ่มรายการเมนู
การเพิ่มรายการเมนู

ที่นี่ คุณสามารถดู ตัวอย่าง รายการเมนูทั้งหมดที่เราเพิ่มไว้ก่อนหน้านี้ได้

ตัวอย่างรายการเมนู
ตัวอย่างรายการเมนู

คลิกที่รายการเมนูที่ต้องการและคลิกที่ตัวเลือกเพิ่มเมนูย่อยบนแถบเครื่องมือ ในภาพด้านล่าง เราได้สร้างเมนูย่อยสำหรับเมนู ผลิตภัณฑ์

การสร้างเมนูย่อย
การสร้างเมนูย่อย

คุณจะเห็น “+” ไอคอนด้านล่างรายการเมนูที่คุณสามารถ เพิ่มรายการเมนูย่อย

การเพิ่มรายการเมนูย่อย
การเพิ่มรายการเมนูย่อย

ในทำนองเดียวกัน คุณสามารถเพิ่มรายการเมนูย่อยไปยังรายการเมนูใดก็ได้ ตัวอย่างเช่น เราจะเพิ่มรายการเมนูย่อยลงในเมนู สนับสนุน ด้วย

การเพิ่มรายการเมนูย่อยในเมนูสนับสนุน
การเพิ่มรายการเมนูย่อยในเมนูสนับสนุน

คลิกที่ บันทึก เพื่อทำการเปลี่ยนแปลงที่จำเป็นทั้งหมด ก่อนคลิกปุ่ม บันทึก ตรวจสอบให้แน่ใจว่าได้เลือกช่องทั้งหมดของ ชื่อ ส่วนเทมเพลต และชื่อ เมนูการนำทาง ก่อนบันทึก

บันทึกเมนูแบบเลื่อนลง
บันทึกเมนูแบบเลื่อนลง

ขั้นตอนที่ 3: ดูตัวอย่างและเผยแพร่เมนู

ตอนนี้ ดูตัวอย่างโพสต์ที่มีอยู่หรือสร้างขึ้นเพื่อดูเมนูแบบเลื่อนลงที่สร้างขึ้น คุณจะเห็นเมนูแบบเลื่อนลงตามตัวอย่างด้านล่าง

ตัวอย่างเมนูดรอปดาวน์ของผลิตภัณฑ์
ตัวอย่างเมนูดรอปดาวน์ของผลิตภัณฑ์

เรามีตัวอย่างเมนูดรอปดาวน์สำหรับเมนู ผลิตภัณฑ์ และ การสนับสนุน

ดูตัวอย่างเมนูสนับสนุนแบบเลื่อนลง
ดูตัวอย่างเมนูสนับสนุนแบบเลื่อนลง

2. สร้างเมนูแบบเลื่อนลงด้วยธีมคลาสสิก (Kadence)

การสร้างเมนูแบบเลื่อนลงจะค่อนข้างแตกต่างออกไปหากคุณใช้ธีมแบบคลาสสิก (ธีมสำหรับแก้ไขไซต์ที่ไม่ใช่แบบเต็ม)

เพื่อแสดงขั้นตอนดังกล่าว เราใช้เวอร์ชันฟรีของธีม Kadence เป็นตัวอย่าง

มาดูวิธีการสร้างเมนูแบบเลื่อนลงใน WordPress โดยใช้ธีม Kadence

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน Kadence

ขั้นแรก ติดตั้งและเปิดใช้งานธีม Kadence จาก Appearance > Themes

หากต้องการทราบข้อมูลเชิงลึกเพิ่มเติม โปรดดูบทความเกี่ยวกับวิธีติดตั้งธีม WordPress

ติดตั้งและเปิดใช้งานธีม Kadence
ติดตั้งและเปิดใช้งานธีม Kadence

ขั้นตอนที่ 2: สร้างเมนู

ในการสร้างเมนู ให้ไปที่ ลักษณะที่ ปรากฏ > เมนู หลังจากนั้น ให้ตั้งชื่อเมนูของคุณแล้วคลิก สร้างเมนู

ตั้งชื่อเมนูและสร้างเมนู
ตั้งชื่อเมนูและสร้างเมนู

ขั้นตอนที่ 3: เพิ่มองค์ประกอบในเมนูของคุณ

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

เลือกรายการเมนูที่คุณต้องการแล้วคลิก เพิ่มในเมนู จากนั้นคลิกที่ปุ่ม บันทึกเมนู

เพิ่มรายการเมนูลงในเมนูของคุณ
เพิ่มรายการเมนูลงในเมนูของคุณ

ขั้นตอนที่ 4: เลือกตำแหน่งเมนู

คลิกที่ Manage Locations และกำหนดตำแหน่งของเมนูของคุณ ที่นี่คุณสามารถกำหนดเมนูเป็นเมนู หลัก รอง มือถือ หรือส่วน ท้าย ได้

หลักหมายถึงเมนูหลักที่ด้านบนของไซต์หรือที่เรียกว่าส่วนหัว ในทำนองเดียวกัน รองหมายถึงเมนูด้านล่างส่วนหัว มือถือหมายถึงเว็บไซต์เวอร์ชันมือถือ และส่วนท้ายคือส่วนล่างของเว็บไซต์ นอกจากนี้ยังสามารถมีตำแหน่งเมนูที่หลากหลายขึ้นอยู่กับธีมของคุณ

คลิก บันทึกการเปลี่ยนแปลง หลังจากเลือกสถานที่ที่คุณต้องการ

เลือกตำแหน่งเมนูเพื่อเพิ่มเมนูของคุณ
เลือกตำแหน่งเมนูเพื่อเพิ่มเมนูของคุณ

ขั้นตอนที่ 5: เพิ่ม CSS ลงใน Menu

หากต้องการเปิดใช้งาน CSS ที่กำหนดเอง ให้คลิก Screen Options และเลือก CSS Classes ตอนนี้คุณสามารถสร้างเมนูดรอปดาวน์ CSS ที่กำหนดเองได้แล้ว นอกจากนี้ ให้คลิกที่ บันทึกเมนู เพื่อบันทึกการเปลี่ยนแปลงทั้งหมด

ขั้นตอนที่ 6: ดูตัวอย่างและเผยแพร่เมนูของคุณ

ตอนนี้ ดูตัวอย่างโพสต์ที่มีอยู่หรือสร้างโพสต์เพื่อดูเมนูแบบเลื่อนลง คุณจะเห็นเมนูแบบเลื่อนลงดังตัวอย่างด้านล่าง

ดูตัวอย่างและเผยแพร่เมนูของคุณ
ดูตัวอย่างและเผยแพร่เมนูของคุณ

ขอแสดงความยินดี คุณเพิ่มเมนูในเว็บไซต์สำเร็จแล้ว


3. สร้างเมนูแบบเลื่อนลงใน WordPress ด้วย Plugin

วิธีนี้ช่วยให้คุณสร้างเมนูแบบเลื่อนลงใน WordPress โดยใช้ปลั๊กอิน มีปลั๊กอินมากมายที่คุณสามารถเลือกสร้างเมนูแบบเลื่อนลงได้ ที่นี่ เราจะใช้ปลั๊กอิน Max Mega Menu

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งาน Plugin

ก่อนที่คุณจะเริ่ม คุณจะต้องติดตั้งและเปิดใช้งานปลั๊กอิน เพียงไปที่แดชบอร์ด WordPress แล้วคลิก ปลั๊กอิน

ติดตั้งและเปิดใช้งานปลั๊กอิน Max Mega Menu
ติดตั้งและเปิดใช้งานปลั๊กอิน Max Mega Menu

หลังจากนั้นให้คลิกปุ่ม เพิ่มใหม่ และค้นหาปลั๊กอิน หลังจากนั้น ติดตั้ง และ เปิดใช้งาน และคุณทำเสร็จแล้ว

คุณยังสามารถตรวจสอบบทความของเราเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress เพื่อรับข้อมูลเชิงลึกเพิ่มเติม

ขั้นตอนที่ 2: ตั้งค่าคุณสมบัติดรอปดาวน์

หลังจากนั้น คุณจะพบปลั๊กอิน Mega Menu บนแดชบอร์ด WordPress ของคุณ คลิกที่มัน

ตอนนี้ เลือกตำแหน่งในตัวเลือก ตำแหน่งเมนู และคลิกตัวเลือก กำหนดเมนู

ไปที่ตำแหน่งเมนูและกำหนดเมนู
ไปที่ตำแหน่งเมนูและกำหนดเมนู

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

เลือกตำแหน่งเมนูและบันทึกการเปลี่ยนแปลง
เลือกตำแหน่งเมนูและบันทึกการเปลี่ยนแปลง

ไปที่ตัวเลือก เมนูเมก้าบ นแดชบอร์ด และภายในตำแหน่ง เมนู ให้คลิกตำแหน่งที่คุณกำหนดเมนูของคุณ คลิกที่ตัวเลือก Enable ซึ่งจะเปิดใช้งานฟังก์ชันแบบเลื่อนลงในเมนูของคุณ

เปิดใช้งานฟังก์ชันดรอปดาวน์บนเมนูของคุณ
เปิดใช้งานฟังก์ชันดรอปดาวน์บนเมนูของคุณ

นอกจากนี้ ปลั๊กอินของคุณจะปรับให้เข้ากับสไตล์ธีมของคุณโดยอัตโนมัติ ดังนั้น ไปที่ตัวเลือก เมนูเมก้า > ธีมเมนู หากคุณต้องการเปลี่ยนรูปแบบเมนู แอนิเมชั่น ฯลฯ

ที่นั่น คุณสามารถเปลี่ยนชื่อธีม ลักษณะลูกศร ความสูงของเส้น เงา ฯลฯ หลังจากทำการเปลี่ยนแปลงแล้ว ให้คลิกปุ่ม บันทึกการเปลี่ยนแปลง

ขั้นตอนที่ 3: สร้างเมนูแบบเลื่อนลง

ขั้นตอนสุดท้ายคือการสร้างเมนูแบบเลื่อนลง

ในการดำเนินการดังกล่าว ให้ไปที่ ลักษณะที่ ปรากฏ > เมนู แล้วเพิ่มรายการลงในเมนูของคุณโดยใช้ฟังก์ชัน Max Mega Menu ที่เปิดใช้งาน อย่าลืมคลิกที่ปุ่ม บันทึกเมนู เมื่อคุณทำเสร็จแล้ว

ทำการเปลี่ยนแปลงเมนูแบบเลื่อนลงของคุณและบันทึกการเปลี่ยนแปลง
ทำการเปลี่ยนแปลงเมนูแบบเลื่อนลงของคุณและบันทึกการเปลี่ยนแปลง

ตอนนี้ เมนูแบบเลื่อนลงของคุณพร้อมที่จะแสดงในโพสต์และหน้าของเว็บไซต์ของคุณแล้ว

เมื่อปฏิบัติตามวิธีใดๆ ข้างต้น คุณสามารถสร้างเมนูแบบเลื่อนลงบนเนื้อหาของเว็บไซต์ของคุณได้อย่างง่ายดาย นอกจากนี้ยังช่วยให้แถบเมนูของเว็บไซต์ของคุณสะอาดและใช้งานง่ายอีกด้วย


คุณวางแผนที่จะสร้างไซต์ของคุณเองหรือ จากนั้นตรวจสอบบทความแนะนำที่ครอบคลุมเกี่ยวกับวิธีสร้างเว็บไซต์ตั้งแต่เริ่มต้น

บทสรุป

นั่นคือทั้งหมดสำหรับตอนนี้! ในบทความนี้ เราได้กล่าวถึง วิธีการสร้างเมนูแบบเลื่อนลงใน WordPress เราหวังว่าจะช่วยให้คุณทราบวิธีการทั้งหมดในการสร้างเมนูแบบเลื่อนลงใน WordPress

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

คุณยังสามารถอ่านบทความของเราเกี่ยวกับปลั๊กอินสำรวจ WordPress ที่ดีที่สุดสำหรับเว็บไซต์ของคุณ และวิธีที่ธุรกิจจะได้ประโยชน์จากการใช้การวิเคราะห์บนเว็บไซต์ของพวกเขา

อย่าลืมติดตามเราบน Facebook และ Twitter สำหรับบทความที่เป็นประโยชน์เพิ่มเติม

ลิงค์บางส่วนในบทความ/หน้านี้เป็นลิงค์พันธมิตร หากคุณคลิกที่ลิงค์พันธมิตรดังกล่าวและซื้อผลิตภัณฑ์ เราจะได้รับค่าคอมมิชชั่นเฉพาะจากผู้ขายเป็นเปอร์เซ็นต์ แต่จะไม่ส่งผลต่อราคาที่คุณจะจ่ายเลย