สอนสร้าง Mega Menu ใน WordPress ทำได้อย่างไร

สอนสร้าง Mega Menu ใน Wordpress ทำได้อย่างไร
https://www.youtube.com/embed/muK_AsPo8As?feature=oembed&autoplay=1
ช่วยแชร์ให้เพื่อน... สนับสนุนผู้เขียนครับ :)

สำหรับบทเรียนนี้ ผมก็จะสอนเรื่องของ การสร้าง Mega Menu ใน WordPress เว็บไซต์ของเรานั่นเองครับ แต่ก่อนอื่นเราจะต้องรู้ก่อนว่า Mega Menu นั้นคืออะไร ประกอบด้วยอะไรบ้างครับ

Mega Menu คืออะไร

Mega Menu เป็นเมนูประเภทหนึ่งที่เราสามารถสร้างได้ใน WordPress ครับ ซึ่งเมนูประเภทนี้ จะเป็นเมนูขนาดใหญ่ที่มี ไอเท็มย่อย หรือ เมนูย่อยอยู่ครับ และ เมนูย่อยเหล่านี้ ก็จะถูกแบ่งเป็นหลายคอลั่มน์ได้นั่นเองครับ

เริ่มสร้าง Mega Menu ในเว็บไซต์ WordPress

บางครั้งเจ้า Mega Menu จะมากับธีมบางธีมที่เราติดตั้งครับ แต่ธีมส่วนมาก บอกได้เลยว่าไม่มีครับ แต่เพียงเท่านั้น ก็ยังหยุดยั้งเราให้สร้าง Mega Menu ไม่ได้ครับ เราสามารถที่จะติดตั้ง Plugins เพิ่มเติมใน WordPress เพื่อสร้าง Mega Menu ได้ครับ

Plugin ตัวนี้มีชื่อว่า Max Mega Menu มีคน Download เป็นหลักแสนครับ สามารถไว้วางใจได้ในระดับหนึ่งเลยทีเดียวครับ ลิงค์อยู่ที่นี่เลยครับ

https://wordpress.org/plugins/megamenu/

ซึ่งเราสามารถที่จะค้นหาใน WordPress และ ติดตั้งได้เลยครับ เมื่อติดตั้งเสร็จแล้วก็อย่าลืม Activate ก่อนนะครับ

2 ขั้นตอนง่ายๆในการสร้าง Mega Menu

การสร้าง Mega Menu จะมีขั้นตอนง่ายๆ สองขั้นครับ คือ 1. จัดเตรียมข้อมูล 2. ตกแต่งเมนู เท่านี้จริงๆครับ ถ้าเราทำเสร็จ เราก็สามารถสร้าง Mega Menu ได้ไม่ยากแล้วครับ

ขั้นที่ 1 สร้างเมนูเตรียมไว้ก่อน

ก่อนที่จะเริ่มตกแต่งได้ เราต้องสร้างข้อมูลเตรียมเอาไว้ให้เรียบร้อยก่อนครับ โดยการสร้างโครงสร้างเมนูใน  WordPress Menu Editor ครับ เมื่อสร้างเรียบร้อยแล้ว เราต้องทำการติดตั้ง Menu ที่เราสร้าง ไปยัง Theme Location ที่ใดที่หนึ่งก่อนที่จะทำการ Enable Max Mega Menu ครับ

เมื่อเราทำการติดตั้ง Max Mega Menu ไปที่ Theme Location เรียบร้อยแล้ว เราก็สามารถ Enable Max Mega Menu ได้เลย เมื่อเราทำการเปิดใช้งาน Mega Menu เรียบร้อยแล้ว ที่ตัวเมนูไอเท็ม เราจะเห็นได้ว่า มี Icon ให้เราทำการตั้งค่าของ Mega Menu อยู่ แต่ก่อนอื่น ขอให้เราทำความเข้าใจให้เรียบร้อยก่อนว่าส่วนประกอบของ Mega Menu มีอะไรบ้างครับ

– Menu Item Level 1 ลิงค์สำหรับเปิด Mega Menu
– Menu Item Level 2 หัวข้อสำหรับแต่ละ Column
– Menu Item Level 3 ลิงค์ย่อยของแต่ละ Column

เมื่อเราสร้าง Menu Item ทั้ง 3 Level เรียบร้อยแล้ว เราก็จะเข้าสู่เรื่องของการตั้งค่าครับ โดยเฉพาะที่ Menu Item Level 1 เราสามารถที่จะตั้งได้ว่า จะให้เมนูหัวข้อนี้เป็น Mega Menu หรือ Flyout Menu  ครับ ถ้าเราจะทำการตั้งค่า คลิกที่คำว่า Mega Menu ใน Menu Item นี้ได้เลย ตั้งค่าเสร็จแล้ว อย่าลืมกดจัดเก็บหรือ Save นะครับ

ใน Level ที่ 2  และ Level ที่ 3 เราก็สามารถตั้งค่าได้เช่นกันครับ แต่จะเป็นการตั้งค่าส่วนอื่นมากกว่าครับเช่น การใส่ ICON ของเมนูนั้นนั่นเองครับ สำหรับ Version Free เราก็จะใช้ได้แต่ Icon ที่มีอยู่ใน WordPress  เท่านั้นครับ ถ้าอยากได้ Icon มากกว่านี้ ต้องไปซื้อ Version PRO ครับ

การตั้งค่า Mega Menu

จุดที่สำคัญในการตั้งค่า Mega Menu ก็คือ การตั้งค่าในส่วนของ Menu Theme ครับ ซึ่งจะเป็นการปรับแต่งให้เมนูของเราสวยงามมากขึ้นครับ จุดที่สำคัญในการปรับแต่งมีดังนี้ครับ

Menu Bar

ส่วนหลักของเมนูที่เราจะเห็นก่อนครับ เราสามารถปรับแต่งในส่วนของ สีพื้นหลัง ขอบ และ รัศมีของขอบครับ ซึ่งสีของพื้นหลังเราสามารถเลือกได้ 2 สีครับ มันจะทำเป็นเฉดสีให้เราอัตโนมัติครับ

นอกจากนั้น ที่ Menu Item เราก็สามารถตั้งค่าพื้นหลัง ขอบ รัศมีของขอบได้เช่นเดียวกันครับ โดยแยกเป็น Menu Item สภาพปกติ กับ Menu Item ในตอนที่ Active อยู่ครับ

Mega Menu

ในส่วนนี้ จะเป็นการปรับแต่ง Mega Menu ที่ Drop ลงมาครับว่า จะให้มีพื้นหลังสีอะไร มี Padding หรือระยะขอบเท่าไร มีขอบอย่างไรครับ

นอกจากนั้นเรายังสามารถปรับแต่งในส่วนของตัวหนังสือที่แสดงผล ใน Mega Menu นี้ได้อีกด้วยครับ

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

Flyout Menu

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

ทดสอบ Mega Menu

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

สรุป

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


ช่วยแชร์ให้เพื่อน... สนับสนุนผู้เขียนครับ :)
ประชาสัมพันธ์
คอร์สเรียนออนไลน์
ทำ Blog ง่ายๆ ใครก็ทำได้

Blog คือ เครื่องมือที่ใช้สร้างโอกาส 

และ สร้างตัวตนได้ ทุกยุคทุกสมัย 

ราคาปกติ 3,990 บาท
Early Bird 1,990 บาท
(สำหรับ 50 ท่านแรก)

พลากร สอนสร้างเว็บ

รับเทคนิค ความรู้ ข่าวสาร การทำเว็บไซต์

จาก พลากร สอนสร้างเว็บ

เฉพาะ สมาชิกเท่านั้น

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *