บทช่วยสอน: วิธีสร้างเมนูเมก้าสำหรับเว็บไซต์ WordPress ของคุณ

เผยแพร่แล้ว: 2018-05-01

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

ศิลปะแห่งความโดดเด่นจากฝูงชนนั้นไม่ใช่เรื่องง่ายที่จะเชี่ยวชาญ แต่ต้องขอบคุณโซลูชันของบริษัทอื่นที่มีให้สำหรับ WordPress การเปลี่ยนโฉมแบบมืออาชีพไม่ได้ทำให้เราต้องฝ่าฟันอุปสรรคใดๆ

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

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

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

ตอนนี้ โดยไม่เสียเวลาอันมีค่าอีกต่อไป มาดูตัวเลือกที่มีให้กัน

เมก้าเมนูคืออะไรกันแน่?

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

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

สารบัญ

ปลั๊กอินสำหรับสร้างเมนูเมก้า

หากธีมไม่รองรับฟีเจอร์นี้ ต่อไปนี้คือโซลูชันของบริษัทอื่นที่ดีที่สุด หรือที่เรียกว่าปลั๊กอิน Mega Menu ที่ดีที่สุด

#1 แม็กซ์เมก้าเมนู

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

รายละเอียดและดาวน์โหลดแบบเต็ม

#2 WP เหนียว

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

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

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

#3 UberMenu

Uberเมนู เป็นปลั๊กอินระดับพรีเมียมและเป็นที่รู้จักและเป็นที่นิยมใน CodeCanyon ซึ่งนำเสนอคุณลักษณะที่ไม่ค่อยมีให้ในคู่แข่งรายใดเลย การออกแบบเป็นจุดดึงดูดหลักที่นี่และมีตัวเลือกมากมายสำหรับการปรับแต่ง นักพัฒนาซอฟต์แวร์เสนอการอัปเดตเป็นประจำเพื่อให้เข้ากันได้กับ WordPress เวอร์ชันล่าสุดเสมอ และยังมีการสนับสนุนเฉพาะอีกด้วย

รายละเอียดและดาวน์โหลดแบบเต็ม

#4 เมกะเมนูหลัก

เมก้าเมนูหลัก หากการแสดงไอคอนเป็นเป้าหมายหลักของคุณ ให้อ่านคำแนะนำล่าสุดที่นี่ เป็นโซลูชันระดับพรีเมียมที่มีให้ในแพ็คเกจซึ่งมีการสนับสนุนเฉพาะจากนักพัฒนา มีไอคอนเวกเตอร์มากกว่า 1600 ไอคอนและแบบอักษร Google กว่า 600 แบบ พร้อมด้วยตัวเลือกการปรับแต่งอื่นๆ การเริ่มต้นใช้งานนั้นง่ายมากและ UI นั้นโต้ตอบได้อย่างรวดเร็วและทำงานให้เสร็จได้อย่างรวดเร็ว

รายละเอียดและดาวน์โหลดแบบเต็ม

#5 Mega Menu โดย WooRockets.com

Mega Menu โดย WooRockets.com เป็นผลิตภัณฑ์ฟรีที่มีอยู่ใน Github เพื่อประโยชน์ในการเปิดกว้าง มันทำงานได้อย่างสมบูรณ์กับ WordPress และมีตัวสร้างเฉพาะพร้อมคุณสมบัติเช่น Live Preview ผลิตภัณฑ์สุดท้ายรองรับทั้งการวางแนวตั้งและแนวนอน และยังรองรับ CSS ที่กำหนดเองอีกด้วย

#6 NOO เมนู

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

#7 DW Mega Menu

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

วิธีสร้าง Mega Menu สำหรับเว็บไซต์ WordPress ของคุณ

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

มาเรียนรู้วิธีสร้างเมนูใน WordPress กันดีกว่า การดำเนินการนี้จะใช้ได้กับการติดตั้งสมัยใหม่ โดยไม่ขึ้นกับธีมและปลั๊กอินที่ใช้

ขั้นตอนที่ 1 – เข้าสู่ระบบในพื้นที่ Dashboard ของเว็บไซต์ และภายใต้แท็บ Appearance ให้คลิกที่ Menus

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

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

สร้างเมนูเมก้าสำหรับเว็บไซต์ WordPress ของคุณ3 ขั้นตอนที่ 4 – สุดท้ายนี้ ใต้พื้นที่การเลือก คุณจะต้องเลือกตำแหน่งของเมนู เลือกหนึ่งรายการ (แตกต่างกันไปตามธีม) และคลิกที่ปุ่ม ' บันทึกเมนู ' เพื่อให้ใช้งานได้จริง

คุณสามารถแก้ไขรายการที่มีอยู่จากพื้นที่เดียวกัน และสิ่งทั้งหมดนี้สามารถทำได้จากเครื่องมือ Live Customizer

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

บทสรุป

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

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

*อัพเดทล่าสุด 01/06/2020