Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ระบบเครือข่าย >> อินเทอร์เน็ต

Supercharge เมนู WordPress ของคุณด้วย Max Mega Menu

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

หนึ่งในองค์ประกอบสำคัญของ Web Design ที่เข้าใจง่ายและใช้ง่ายคือ Menu หากคุณต้องการทำให้เมนูของคุณโดดเด่นจากเมนูเว็บธรรมดาส่วนใหญ่ คุณสามารถใช้ Mega Menu เพื่อรวม รูปภาพ Widgets และเกือบ Element โต้ตอบบนเว็บที่คุณต้องการ ภายในเมนูของคุณ และหากคุณเป็นผู้ใช้ WordPress มีปลั๊กอินสำหรับเรื่องนี้

ทำความเข้าใจ Mega Menu

Mega Menu คืออะไร? มันเป็นหนึ่งในเทรนด์ล่าสุดของ Web Design ที่ถูกนำไปใช้โดยเว็บไซต์ใหญ่ๆ โดยเฉพาะในวงการ E-commerce อย่าง Wal-Mart, OfficeMax, Target, Adidas, Puma, Toys-R-Us ฯลฯ ลักษณะของ Mega Menu ทำให้มันสมบูรณ์แบบสำหรับผู้ค้าปลีกออนไลน์ แต่มันยังเหมาะสำหรับเว็บไซต์ประเภทอื่นๆ เช่น The White House หรือ IMDB

Menu เกิดมานานเท่าเว็บไซต์เอง มันคือเครื่องมือที่ผู้เยี่ยมชมใช้ช่วยนำทางเว็บไซต์ที่พวกเขาเยี่ยมชม เมนูแบบดั้งเดิมที่เราโตมากับความรักและเกลียด ให้ผู้ใช้ Strings ของข้อความ และ Drop-down text เพื่อทำภารกิจ แต Mega Menu นำสิ่งต่างๆ ขึ้นไปอีกระดับ

Mega Menu อนุญาตให้ผู้ใช้เพิ่ม Web Elements อื่นๆ เข้าไปในเมนู ตัวอย่างเช่น คุณสามารถรวมโพสต์ล่าสุด 5 โพสต์จากบล็อกของคุณ พร้อม Featured Images ไว้ในเมนูได้ ด้วยความสามารถนี้ ผู้ค้าปลีกออนไลน์สามารถเพิ่มรูปภาพสินค้า และอาจจะเป็น Deal of the day ใน Mega Menu และใช้มันเป็นอีก Billboard หนึ่งที่พวกเขาสามารถโปรโมทสินค้าเพิ่มเติม

การเพิ่ม Mega Menu ให้บล็อก WordPress ของคุณ

หาก WordPress ขับเคลื่อนเว็บไซต์ของคุณ และคุณต้องการใส่ Mega Menu เป็นส่วนหนึ่งของ User Experience กระบวนการง่ายเท่าการติดตั้งปลั๊กอินและตั้งค่านิดหน่อย

มีทางเลือกหลายอย่างที่คุณหาได้ใน WordPress Plugin Repository แต่เราจะใช้หนึ่งในตัวที่นิยมที่สุด ที่ติดตั้งเกิน 100 พัน ครั้ง 排名เกือบ 5 ดาวสมบูรณ์ และอัปเดตเป็นประจำ: Max Mega Menu คุณสามารถใช้กับธีมที่มีอยู่ และแก้ไขได้โดย Drag and Drop

คุณสามารถได้ปลั๊กอินจากภายในแดชบอร์ด WordPress โดยไปที่เมนู "Plugins → Add New" และค้นหา "Max Mega Menu"

หลังจากติดตั้งและเปิดใช้งานปลั๊กอินแล้ว ไปที่ "Appearance → Menus" จากแถบด้านข้าง แล้วคุณต้องเปิดใช้งาน Max Mega Menu ผ่าน Settings ด้านซ้ายของ Menu Tree หากคุณหา Settings ไม่เจอ ลองเลือก "Primary" เป็นเมนูที่จะแก้ไขจาก Drop-down

คุณจะเห็นตัวเลือก Mega Menu เพิ่มเติมเมื่อคุณวางเมาส์เหนือ Menu Item แต่ละรายการ

การคลิกตัวเลือก Mega Menu จะเปิด Panel ที่มี Mega Menu Settings ทั้งหมดสำหรับ Menu Item นี้ การกระทำพื้นฐานที่คุณสามารถทำได้คือ:

  • เลือกระหว่าง Regular, Cascading, Drop-down menu ที่เรียกว่า "Flyout" หรือ "Mega Menu" ที่พื้นที่เมนูเต็มความกว้างของเมนู
  • เพิ่ม Widgets ที่มีอยู่เข้าไปในเมนู
  • เลือกว่าต้องการใช้กี่ Column สำหรับ Menu Item นั้นๆ

Widget เพิ่มเติมแต่ละตัวมาพร้อมปุ่ม Edit ให้ผู้ใช้ปรับเนื้อหาในตัวได้

เนื่องจากผลลัพธ์สุดท้ายจะขึ้นอยู่กับ Widgets ที่คุณใส่ใน Mega Menu ทุกอย่างจึงขึ้นอยู่กับ Widgets ที่คุณมีในมือ บางธีมและปลั๊กอินมาพร้อม Widgets พิเศษของตัวเอง คุณยังสามารถหา Widgets WordPress เพิ่มเติมได้ด้วยความช่วยเหลือของ Google ที่ดี และเนื่องจากคุณสามารถเพิ่มสิ่งได้เกือบอย่างไรก็ได้ ผ่านการผสมผสานของ Widget "Text" และการเขียนโค้ดเบาๆ ท้องฟ้าคือขีดจำกัดสำหรับจินตนาการของคุณ

Quick Case Study (กรณีศึกษาเร็ว)

เพื่อให้คุณได้ไอเดียว่าคุณสามารถทำอะไรกับปลั๊กอินนี้ ผมลองทำ Case Study เร็วๆ

ก่อนอื่น ผมเปลี่ยนเมนูจาก Flyout เป็น Mega Menu แล้วเลือกเมนูที่มีอยู่ซึ่งมี Sub-menus อยู่ในตัว ลบ Sub-menus บางส่วนที่ไม่ต้องการ และเปิด Panel Max Mega Menu ผมปรับ Column ให้ตรงกับจำนวน Sub-menus และเพิ่มรูปภาพโดยใช้ Widget รูปภาพของ JetPack

เพื่อทำให้สนุกขึ้น ผมเพิ่มปฏิทิน และ Widget ไอคอนโซเชียลมีเดีย เข้าไปอีก เพราะว่าทำได้

ตอนนี้มาเปรียบเทียบ Before และ After ของ Case Study เล็กๆ นี้ นี่คือเมนูดูยังไงก่อนที่ผมจะเพิ่ม Mega Menu

และนี่คือผลลัพธ์ของเมนูของผมหลังจากปรับแต่ง

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