สวัสดี! เช่นเคย มีเรื่องมากมายเกิดขึ้นในชีวิตของฉัน ดังนั้นจึงเป็นเรื่องยากมากที่จะหาเวลาสำหรับบล็อก เมื่อวานซื้อตั๋วไปศรีลังกาแล้วกำลังจะออกอีก 4 เดือนเร็วๆ นี้ มาเที่ยวกัน! และตอนนี้ฉันกำลังมองหาชุดแต่งงานที่สวยที่สุด :))
วันนี้เราจะพูดถึงวิธีสร้างเมนูใน WordPress รวมถึงการเพิ่มบล็อกเหล่านี้ในพื้นที่ที่กำหนดเองของเทมเพลต
เราจะเรียนรู้วิธีปรับแต่งเมนูและแก้ไขตามดุลยพินิจของคุณ

การแก้ไขและปรับแต่งเมนูใน WordPress

ขั้นแรก มาดูฟังก์ชันที่เราสามารถใช้ได้ในแผงผู้ดูแลระบบบล็อก ในเทมเพลตใหม่ที่เข้ากันได้กับ เวอร์ชันล่าสุด WordPress การแสดงเมนูค่อนข้างง่ายและการตั้งค่าไม่ยากโดยเฉพาะ

เมื่อเราสร้างธีมลูกที่สามารถแก้ไขได้โดยไม่ส่งผลกระทบต่อธีมหลัก เราจะเพิ่มฟังก์ชันต่อไปนี้ลงในไฟล์ function.php

register_nav_menus(array("เมนูเพิ่มเติม" => __("เมนูเพิ่มเติม", "ชื่อธีมของคุณ")));

หากคุณไม่ได้สร้างธีมลูก ให้เพิ่มลงในไฟล์ฟังก์ชันหลักของธีมของคุณ

ฟังก์ชั่นนี้จะให้เราเพิ่ม เมนูเพิ่มเติม WordPress ลงในเทมเพลตของเราและจะสร้างพื้นที่อื่นให้กับมัน

หลังจากเพิ่มแล้ว ให้ไปที่แผงผู้ดูแลระบบใน "จัดการพื้นที่":

พื้นที่หัวข้อเพิ่มเติมควรปรากฏพร้อมกับชื่อที่เราตั้งไว้ในฟังก์ชัน

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

ในกรณีของเรา เราสร้างเมนูใหม่ที่เรียกว่า เพิ่มเติม:

เลือกพื้นที่ธีม "เมนูเพิ่มเติม" สำหรับมัน

แต่ตอนนี้เราต้องเชื่อมโยงพื้นที่นี้กับบล็อกเทมเพลต ตัวอย่างเช่น เราจำเป็นต้องสร้างเมนูเพิ่มเติมใต้ส่วนหัวของไซต์ WordPress ไปที่ไฟล์ header.php หรือคัดลอกไปยังธีมลูก หลังจากแท็ก body ให้เพิ่มสิ่งต่อไปนี้:

มาดูผลลัพธ์กัน:

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

เราทำการเปลี่ยนแปลงต่อไปนี้กับไฟล์ style.css:

สีพื้นหลัง : #000 ;

/* สีพื้นหลัง */ ตำแหน่ง : สัมพันธ์ ;

-

#เมนูเพิ่มเติม nav ( width: 940px; /*ความกว้างของคอนเทนเนอร์ */ ระยะขอบ: 0 อัตโนมัติ; ) #เมนูเพิ่มเติม li ( จอแสดงผล: อินไลน์; การขยาย: 10px; /* การขยาย */ ระยะขอบ: 20px 0; ) #เมนูเพิ่มเติม ( ความกว้าง: 100% ; ด้านบน: 420px; /* ระยะห่างจากขอบด้านบน */ สีพื้นหลัง: #000;

มาดูกันว่าเกิดอะไรขึ้น:

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

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

ไปกันเถอะ”

รูปร่าง

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

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

ดังนั้นในแผงด้านข้างทางด้านขวาเราจะแสดงบล็อกต่อไปนี้:

นอกจากวิดเจ็ตมาตรฐานที่สร้างไว้ในธีมแล้ว ยังมีปลั๊กอินเพิ่มเติมอีกมากมายที่ออกแบบมาเพื่อสร้างเมนูประเภทต่างๆ เช่น แนวตั้ง แนวนอน แบบเลื่อนลง ฯลฯ

ตัวอย่างเช่นนี่คือปลั๊กอินสำหรับสร้างเมนูหลายระดับแนวตั้งใน WordPress: Navgoco Vertical Multilevel Slide Menu

หลังจากติดตั้ง JQuery Slick Menu Widget แล้ว ให้ไปที่ “Appearance” - “Widgets”

อันใหม่ที่เราติดตั้งควรปรากฏในรายการวิดเจ็ตที่มีอยู่ ย้ายไปยังพื้นที่ที่สามารถเข้าถึงได้ ในกรณีของเรา แถบด้านข้าง:

มาขยายการตั้งค่ากัน:

เลือกชื่อของเมนู (ส่วนที่เราสร้างขึ้น), Tab Text - ชื่อของบล็อกที่จะแสดงบนไซต์, ตำแหน่งตำแหน่ง (เลือกซ้าย - ทางซ้าย), Offset - ออฟเซ็ตจากขอบด้านบนใน พิกเซล, Animation Speed ​​​​- ความเร็วของแอนิเมชั่น (Fast) คุณสามารถเลือกเมนูปิดอัตโนมัติเพื่อทำให้บล็อกหายไปโดยอัตโนมัติ และเลือกสีของบล็อก คลิกบันทึกและดูผลลัพธ์:

เมนูแบบเลื่อนปรากฏที่ด้านซ้ายของส่วนหัว เมื่อคุณคลิกที่แท็บ การแสดงส่วนต่างๆ จะปรากฏขึ้น:

เมื่อกดอีกครั้งบล็อกก็จะหายไปอีกครั้ง

นี่เป็นเพียงวิธีหนึ่งในการติดตั้ง แก้ไข และแสดงเมนูใน WordPress

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

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

Mega Menu นี้คืออะไรกันแน่? ใช่ สิ่งเดียวกัน เมนูนำทางปกติที่คุณอาจพบและปรับแต่งมากกว่าหนึ่งครั้ง เพียงแต่ยังมีฟังก์ชันอื่นๆ ที่ไม่เหมือนกับฟังก์ชันมาตรฐานอีกด้วย คุณสมบัติเพิ่มเติมเพื่อกำหนดค่าและแสดงองค์ประกอบแต่ละรายการ ตัวอย่างเช่น การเพิ่มไม่เพียงแต่แนวตั้ง แต่ยังรวมถึงเมนูย่อยแนวนอน การเพิ่มไอคอนและรูปภาพแต่ละภาพลงในเมนู การตั้งค่าโดยละเอียดการปรากฏตัวของรายการเมนูทั้งหมด ฯลฯ ทั้งหมดนี้อยู่ในปลั๊กอินของเราที่พิจารณาในวันนี้

โอกาสที่ดีในการเพิ่มเมนูนำทางสุดเจ๋งให้กับเว็บไซต์ของคุณด้วยปลั๊กอินคือ Mega Menu โดย WooRockets.com การติดตั้งและเปิดใช้งานปลั๊กอินเป็นไปตามมาตรฐาน

ปลั๊กอินนี้ค่อนข้างเรียนรู้ได้ยากกว่า แต่ก็มีความเป็นไปได้มากกว่าคู่แข่งที่อธิบายไว้ข้างต้น ที่นี่ การสร้างเมนูจะคล้ายกับการสร้างเพจใน Visual Composer มาตรฐานมาก

ไปที่ส่วน เมนูเมกะ WRในแผงผู้ดูแลระบบของคุณแล้วคลิก เพิ่มใหม่- เราไปถึง หน้าใหม่เพื่อสร้างเมนูใหม่ ผู้ที่เคยติดต่อกับนักแต่งเพลงแบบ Drag & Drop จะรู้สึกเหมือนอยู่บ้านทันที กระบวนการสร้างเมนูไม่แตกต่างจากการสร้างเพจมากนัก

ขั้นแรกตรวจสอบให้แน่ใจว่าที่ด้านบนสุดของเมนู - ที่ตั้งเมนูคือสิ่งที่คุณต้องการ หรือคลิกที่ ที่ตั้งเมเนจเพื่อเลือกเมนู

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

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

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

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

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

เวลาในการอ่าน: 8 นาที เผยแพร่เมื่อ 11/01/2016

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

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

คุณสามารถติดตั้งปลั๊กอิน Super ได้โดยตรงจากแผงผู้ดูแลระบบ WordPress ไปที่หน้า: ปลั๊กอิน – เพิ่มใหม่ ป้อนชื่อของปลั๊กอินในแบบฟอร์มการค้นหา กด Enter ติดตั้งและเปิดใช้งานปลั๊กอิน

การตั้งค่าทั่วไป .

– คลิกพฤติกรรมของเหตุการณ์พฤติกรรมการคลิก ที่นี่คุณมีสองตัวเลือกให้เลือก:

• คลิกแรกจะเปิดเมนูย่อย คลิกที่สองจะปิดเมนูย่อยคลิกแรกจะเปิดเมนูย่อย คลิกที่สองจะปิดเมนูย่อย
• คลิกแรกจะเปิดเมนูย่อย คลิกที่สองจะไปตามลิงก์คลิกแรกจะเปิดเมนูย่อย คลิกที่สองจะเปิดลิงก์
• ปล่อยให้เป็นค่าเริ่มต้น ไม่ต้องเปลี่ยนแปลงอะไร

– พฤติกรรมเมนูมือถือพฤติกรรมบนเมนูมือถือ

• มาตรฐาน – เมนูย่อยที่เปิดจะยังคงเปิดอยู่จนกว่าผู้ใช้จะปิด, มาตรฐาน - เมนูย่อยที่เปิดอยู่จะยังคงเปิดอยู่จนกว่าผู้ใช้จะปิด
• หีบเพลง - เมนูย่อยที่เปิดอยู่จะปิดโดยอัตโนมัติเมื่อมีการเปิดเมนูอื่นหีบเพลง – เมนูย่อยที่เปิดอยู่จะปิดโดยอัตโนมัติเมื่อเมนูอื่นเปิดอยู่

– เอาต์พุต CSSปล่อยให้เป็นค่าเริ่มต้น ไม่จำเป็นต้องเปลี่ยนแปลงอะไรที่นี่

– คำอธิบายรายการเมนูเปิดหรือปิดคำอธิบายสำหรับรายการเมนู

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

– .

ธีมเมนู .

– เลือกธีมที่จะแก้ไขนี่คือเมนูที่คุณจะแก้ไข คุณสามารถสร้างและเลือกเมนูอื่นได้

– ชื่อธีมชื่อธีมเมนู ปล่อยให้เป็นค่าเริ่มต้น

– ลูกศรคุณสามารถเลือกลูกศรที่ปรากฏในรายการเมนูแบบเลื่อนลงได้

– ความสูงของเส้นเส้นความสูง

– ดัชนี Z,ตัวบ่งชี้ดัชนี Z สามารถปล่อยให้เป็นค่าเริ่มต้นได้

– เงา,คุณสามารถปรับแต่งเงาเมนูได้

– การเปลี่ยนแบบโฮเวอร์เปิดใช้งานการเปลี่ยนภาพเมื่อวางเมาส์เหนือรายการเมนู

– รีเซ็ตสไตล์วิดเจ็ตปิดการใช้งานสไตล์วิดเจ็ต Mega Menu

แถบเมนู .

– ความสูงของเมนูความสูงของเมนู

– พื้นหลังเมนูสีพื้นหลังของเมนู

– การขยายเมนูเมนูเบาะ.

– รัศมีเส้นขอบเมนูรัศมีเส้นขอบเมนู

– รายการเมนูจัดตำแหน่งตำแหน่งของรายการเมนู

– พื้นหลังรายการเมนูสีพื้นหลังของรายการเมนู

– พื้นหลังรายการเมนู (โฮเวอร์)สีพื้นหลังของรายการเมนูเมื่อโฮเวอร์

– ระยะห่างรายการเมนูช่วงเวลารายการเมนู

– แบบอักษร,พารามิเตอร์แบบอักษร สี ขนาด ตำแหน่ง ตระกูล ฯลฯ

– แบบอักษร (โฮเวอร์)ตัวเลือกแบบอักษรโฮเวอร์

– การขยายรายการเมนูเบาะรายการเมนู

– เส้นขอบรายการเมนูตัวเลือกเส้นขอบรายการเมนู

– เส้นขอบรายการเมนู (โฮเวอร์)ตัวเลือกเส้นขอบรายการเมนูเมื่อโฮเวอร์

– รายการเมนู รัศมีเส้นขอบพารามิเตอร์รัศมีเส้นขอบรายการเมนู

– ตัวแบ่งรายการเมนูตัวแยกเมนู

– ไฮไลท์รายการปัจจุบันไฮไลท์รายการเมนูปัจจุบัน

เมนูเมกะ .

– พื้นหลังแผงสีพื้นหลังของเมนูแบบเลื่อนลง

– ความกว้างของแผงความกว้างของหน้าต่างเมนูแบบเลื่อนลง

– แผงบุนวม,เบาะ

– ขอบแผงสีและขนาดของเส้นขอบ

– รัศมีขอบแผงรัศมีชายแดน

– การขยายรายการการขยายรายการเมนูในเมนูแบบเลื่อนลง

วิดเจ็ต .

– แบบอักษรหัวเรื่องตัวเลือกแบบอักษรชื่อวิดเจ็ตในเมนูแบบเลื่อนลง

– หัวข้อการแพดดิ้งช่องว่างภายในส่วนหัว

– ขอบหัวเรื่อง,ช่องว่างภายในจากเส้นขอบส่วนหัวของวิดเจ็ต

– เส้นขอบส่วนหัว,พารามิเตอร์เส้นขอบ

– แบบอักษรของเนื้อหาแบบอักษรในเนื้อหาวิดเจ็ต

รายการเมนูระดับที่สอง .

– แบบอักษร,แบบอักษรรายการเมนูระดับที่สอง

–แบบอักษร (โฮเวอร์)เลื่อนแบบอักษร

– พื้นหลัง (โฮเวอร์)สีพื้นหลังเมื่อโฮเวอร์

– แพดดิ้ง,เบาะ

– ขอบ,การเยื้อง

– ชายแดน,ขอบถนน.

รายการเมนูระดับที่สาม - การตั้งค่าเดียวกันเฉพาะรายการเมนูระดับที่สามเท่านั้น

เมนูลอยออก .

– พื้นหลังเมนูสีพื้นหลังของเมนูแบบเลื่อนลงระดับที่สองหรือสาม

– ความกว้างของเมนูความกว้างของเมนู

– การขยายเมนูเบาะ

– เส้นขอบเมนูชายแดน.

– รัศมีเส้นขอบเมนูรัศมีชายแดน

– พื้นหลังรายการสีพื้นหลังของรายการเมนู

– พื้นหลังรายการ (โฮเวอร์)สีพื้นหลังของรายการเมื่อโฮเวอร์

– ความสูงของรายการความสูงของรายการเมนู

– การขยายรายการรายการเบาะ

– แบบอักษรของรายการแบบอักษรของข้อความในรายการเมนู

– แบบอักษรของรายการ (โฮเวอร์)เลื่อนแบบอักษร

– ตัวแบ่งรายการตัวแยกองค์ประกอบ

เมนูมือถือ .

– นักออกแบบบาร์สลับนี่จะแสดงลักษณะของเมนูบนอุปกรณ์เคลื่อนที่

– เบรกพอยต์ที่ตอบสนองความกว้างสำหรับการไปที่เมนูมือถือ

– สลับพื้นหลังแถบสีพื้นหลังของปุ่มเปิดเมนูบนมือถือ

– ปิดการใช้งานสลับมือถือคุณสามารถปิดสวิตช์เมนูได้

– สลับความสูงของแถบความสูงของสวิตช์เมนูมือถือ

– คอลัมน์เมนูเมกะมีกี่คอลัมน์ในเมนูแบบเลื่อนลงบนเว็บไซต์บนมือถือ

– พื้นหลังเมนูสีพื้นหลังเมนูมือถือ

– ความสูงของรายการเมนูความสูงของรายการเมนู

จัดแต่งทรงผมแบบกำหนดเอง- คุณสามารถเพิ่มสไตล์ CSS ของคุณเองสำหรับเมนูได้ที่นี่

– บันทึกการเปลี่ยนแปลงของคุณ.

ตำแหน่งเมนู .

– ที่นี่คุณสามารถสร้างพื้นที่เมนูซึ่งคุณสามารถเพิ่มเมนูได้ หากต้องการสร้างพื้นที่สำหรับเมนูให้คลิกที่ปุ่ม – เพิ่มตำแหน่งเมนูอื่น

พื้นที่เมนูคุณสามารถเพิ่มลงในไซต์ได้โดยใช้รหัสย่อหรือรหัส php

บนหน้า: ลักษณะ – เมนู – การจัดการพื้นที่คุณจะสามารถเพิ่มเมนูสำหรับพื้นที่ได้

เครื่องมือ .

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

– ข้อมูลปลั๊กอินลบข้อมูลปลั๊กอินทั้งหมดที่บันทึกไว้ในฐานข้อมูล WordPress เฉพาะในกรณีที่ปลั๊กอินถูกลบออก!

– ส่งออกธีมคุณสามารถส่งออกธีมเมนูเด่นในรูปแบบ JSON หรือ PHP ได้

– นำเข้าธีมคุณสามารถนำเข้าธีมเมนูเด่นได้

– เปิดใช้งานทำเครื่องหมายที่ช่องที่นี่เพื่อเปิดใช้งานเมนูเด่น

– เหตุการณ์,ที่นี่คุณสามารถเลือกวิธีการเปิดเมนูแบบเลื่อนลงได้

– ผลคุณสามารถเลือกเอฟเฟ็กต์ได้จากเมนูแบบเลื่อนลง

– ธีม,ธีมเมนูเริ่มต้น

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

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

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

– ซ่อนข้อความซ่อนข้อความจากรายการเมนู

– ซ่อนลูกศรซ่อนลูกศร

– ซ่อนรายการบนมือถือซ่อนรายการเมนูบนอุปกรณ์มือถือ

– ซ่อนรายการบนเดสก์ท็อปซ่อนรายการเมนูบนคอมพิวเตอร์

– รายการเมนูจัดตำแหน่งตำแหน่งของรายการเมนู

– เมนูย่อยจัดตำแหน่งตำแหน่งเมนูระดับที่สอง

– ซ่อนเมนูย่อยบนมือถือซ่อนเมนูระดับที่สองบนอุปกรณ์มือถือ

– บันทึกการเปลี่ยนแปลง.

ทุกอย่างพร้อมแล้ว!บันทึกเมนู ไปที่ไซต์แล้วเพลิดเพลินกับผลลัพธ์!

ความสนใจ!หลังจากเปิดใช้งาน Mega Menu รูปแบบเมนูเริ่มต้นของคุณจะเปลี่ยนไปโดยสิ้นเชิง คุณจะต้องปรับแต่งสไตล์เมนูในแท็บการตั้งค่า “ธีมเมนู”.

ยังมีคำถามอยู่ใช่ไหม? เขียนความคิดเห็น! ขอให้โชคดี!

เท่าที่ฉันเข้าใจ คำว่า mega menu ใน WordPress หมายถึงบล็อกขนาดใหญ่ที่ใช้งานได้จริงและมีองค์ประกอบที่แตกต่างกันมากมาย เช่น รายการ รูปภาพ ข้อความ แถบเลื่อน ฯลฯ คุณคงเคยเจอคนแบบนี้มาก่อน สักวันหนึ่งฉันจะเผยแพร่คอลเลกชันเต็มรูปแบบในหัวข้อนี้ แต่วันนี้เราจะพูดถึงวิธีแก้ปัญหาที่เฉพาะเจาะจงมาก - ปลั๊กอิน Max Mega Menu ฉันเลือกมันเพราะฉันได้ทดสอบมันแล้ว และมักจะจบลงในรายการ แถมยังมีหนึ่งในเวอร์ชันฟรี (Lite) ที่ชาญฉลาดที่สุดและพัฒนาอยู่ตลอดเวลา

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

ในขณะนี้ เวอร์ชันระบบขั้นต่ำที่ต้องการคือ 3.8 และเวอร์ชันล่าสุดคือ 4.8.3 มีการดาวน์โหลดประมาณ 100,000 ครั้ง ฉันชอบที่ในช่วง 2 เดือนที่ผ่านมา มีการแก้ไขข้อบกพร่องเกือบ 70 รายการจากทั้งหมด 89 รายการ ซึ่งบ่งชี้ถึงกิจกรรมที่ดีจากนักพัฒนา

ฟังก์ชั่นหลักและคุณสมบัติของ Max Mega Menu

• รองรับตำแหน่งตำแหน่งหลายแห่ง โดยแต่ละตำแหน่งคุณสามารถเลือกพารามิเตอร์ของคุณเองได้
• ทำงานง่าย ๆ ด้วยองค์ประกอบการนำทางด้วยการลากและวาง
• ส่วนที่เพิ่มเข้าไป.
• มีตัวแก้ไขธีมที่สะดวก
• การเพิ่มวิดเจ็ต: รูปภาพ ข้อความ รายการ ฯลฯ
• เงื่อนไขทริกเกอร์: เมื่อโฮเวอร์ คลิก
• เอฟเฟกต์การแสดงเมนูย่อย: การจากไป การปรากฏ/การซีดจาง ฯลฯ
• ตัวเลือกเพิ่มเติมต่างๆ เช่น การซ่อนข้อความ/ลิงก์ หรือการปิด รุ่นมือถือ. จุดสุดท้ายจะช่วยลดความยุ่งยากในการสร้างไฟล์.
• การจัดตำแหน่งสำหรับรายการเมนู

เพื่อให้เข้าใจว่าทั้งหมดนี้เจ๋งและสะดวกเพียงใด ฉันขอแนะนำให้คุณดูวิดีโอต่อไปนี้:

นอกจากนี้นักพัฒนายังสามารถอวดแนวทางที่ถูกต้องและถูกต้องในการสร้างโซลูชันของตนได้ WordPress Max Mega Menu เป็นผลิตภัณฑ์คุณภาพสูงจริงๆ นี่คือการยืนยันสองสามประการ:

• การออกแบบทั้งหมดได้รับการตั้งค่าโดยใช้อันเดียว ไฟล์ซีเอสเอสโดยที่ไม่ได้ใช้ทรัพย์สินสำคัญที่ “มีชื่อเสียง” เลย
• รองรับ Retina, ความสามารถในการปรับตัว, การกระตุ้นบนสมาร์ทโฟนและแท็บเล็ต (ทดสอบในเบราว์เซอร์เดสก์ท็อปและมือถือที่มีอยู่เกือบทั้งหมด);
• โค้ดสะอาด สคริปต์ JS เมื่อ gzipped จะใช้พื้นที่น้อยกว่า 2Kb
• รองรับตัวกรอง/ตะขอต่างๆ
• เอกสารประกอบโดยละเอียด + แตกต่างจากปลั๊กอินอื่น ๆ ทำให้ฟอรัมมีชีวิตชีวา

การตั้งค่าและทำงานกับ Max Mega Menu

ทันทีหลังการติดตั้ง ส่วนที่มีชื่อเดียวกันจะปรากฏในแผงผู้ดูแลระบบ ใน "การตั้งค่าพื้นฐาน" คุณสามารถปรับตัวเลือกได้หลายตัวเลือกเกี่ยวกับการทำงานของเมนูย่อย อุปกรณ์มือถือ ฯลฯ “ธีม” ดูน่าสนใจยิ่งขึ้นมาก

มี 6 แท็บที่นี่พร้อมคุณสมบัติที่แตกต่างกัน:

• พื้นฐาน - เลือกประเภทของลูกศร เงา ความสูงของเส้น ฯลฯ
• แถบเมนู - การออกแบบบล็อกหลัก: พื้นหลัง, การเยื้อง, แบบอักษร, โฮเวอร์
• Mega Menus - สไตล์และ การตั้งค่าเมกะเมนู.
• เมนูแบบเลื่อนลงคือชุดของสไตล์ที่คล้ายกับสไตล์อื่นๆ
• เมนูมือถือ - ขนาดหน้าจอทริกเกอร์และตัวเลือกเมนูมือถืออื่นๆ
• การออกแบบที่กำหนดเอง - เพิ่มสไตล์ CSS ของคุณเอง

หลังจากตั้งค่าพารามิเตอร์พื้นฐานแล้ว ให้ไปที่ส่วนผู้ดูแลระบบ WP “ลักษณะที่ปรากฏ” - “เมนู”

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

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

ขั้นแรกคุณสามารถกำหนดจำนวนคอลัมน์และเพิ่มวิดเจ็ตต่างๆ ได้ที่นี่ นอกจากนี้ขนาดของแต่ละองค์ประกอบยังสามารถเปลี่ยนแปลงได้ คุณสามารถเลือกวิดเจ็ตได้ในระดับการนำทางแรก (หลัก) เท่านั้น หากคุณคลิกที่ปุ่ม "Mega Menu" ตรงข้ามกับองค์ประกอบอื่น ๆ ให้ตั้งค่าไอคอนและคุณสมบัติต่าง ๆ เท่านั้น:

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

Max Mega Menu Pro และบทสรุป

โดยทั่วไป นอกเหนือจากพื้นที่เก็บข้อมูลแล้ว การพัฒนานี้ยังมีเว็บไซต์แยกต่างหากอีกด้วย มีคำอธิบายเกี่ยวกับความสามารถทั้งหมดของโมดูล เอกสารประกอบ และการสาธิตเล็กๆ น้อยๆ ของโมดูล และยังมีลิงก์ไปยังการสนับสนุนด้านเทคนิคและการดาวน์โหลดอีกด้วย ต้นทุนขั้นสูง เวอร์ชันสูงสุดโดยหลักการแล้ว Mega Menu Pro นั้นไม่แพงขนาดนั้น - สำหรับไซต์ 1/5/99 จะมีราคาอยู่ที่ 23 ดอลลาร์ / 35 ดอลลาร์ / 99 ดอลลาร์ตามลำดับ ซึ่งรวมถึงการอัปเดตและการสนับสนุนตลอดทั้งปี หากคุณเป็นนักพัฒนา การรับใบอนุญาตธุรกิจ Pro และติดตั้งปลั๊กอินบน 5 ไซต์ คุณจะได้รับค่าใช้จ่ายรวมของโซลูชัน = 7 ดอลลาร์!

สิ่งที่รวมอยู่ใน Max Mega Menu Pro:

• การรวม Google Fonts, FontAwesome และไอคอนที่กำหนดเองในการตั้งค่า
• รองรับเมนูแนวตั้งและหีบเพลง
• โลโก้ทั่วไปในการนำทาง + บล็อกการค้นหา
• รูปแบบของแต่ละรายการ
• รองรับ WooCommerce และ EDD
• ความเป็นไปได้ของการปรับแต่ง
• ค้นหา ไอคอน/โลโก้ และ HTML สำหรับองค์ประกอบบนมือถือ
• การสนับสนุนการอัปเดตอัตโนมัติและลำดับความสำคัญ

สำหรับไซต์คลาสสิกทั่วไปไซต์ปกติก็เพียงพอแล้ว รุ่นฟรี Max Mega Menu ใน WordPress ซึ่งมีฟังก์ชันการทำงานที่ดีมาก การตั้งค่าต่างๆมีมากมายที่นี่ นอกจากนี้ ฉันยังชอบที่นักพัฒนาสนับสนุนการสร้างสรรค์ แก้ไขจุดบกพร่องในปัจจุบันค่อนข้างรวดเร็ว และดูแลความสะอาด/ความถูกต้องของโค้ด ต้องใช้เวลาพอสมควรในการทำความคุ้นเคย แต่ก็คุ้มค่า เพื่อให้เข้าใจวิธีการทำงานของปลั๊กอินได้ง่ายขึ้น โปรดดูวิดีโอและอ่านเอกสารประกอบ

คุณใช้โมดูล Mega Menu ใดใน WordPress และเพราะเหตุใด คุณเคยใช้โซลูชันนี้แล้ว คุณจะเพิ่มอะไรได้บ้าง

เป็นที่ทราบกันดีว่า WordPress 3.0 เพิ่มการรองรับเมนูแบบกำหนดเอง (เมนูแบบกำหนดเอง) ในความคิดของฉันสิ่งนี้สะดวกและมีประโยชน์อย่างยิ่ง จริงๆแล้วนี่คือที่มาของบทความนี้

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

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

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

หมายเหตุ: เมนูทำงานผ่านอนุกรมวิธานของ WordPress (nav_menu) และลิงก์ที่กำหนดเอง (ภายนอก) จะถูกเขียนลงในตารางฐานข้อมูลโพสต์หลัก แนวทางนี้มีความยืดหยุ่นและไดนามิกมากกว่า แต่ต้องมีการสร้างเมนูดังกล่าวอย่างต่อเนื่อง

Register_nav_menus(array("top" => "Top menu", //ชื่อของตำแหน่งเมนูในเทมเพลต "bottom" => "Bottom menu" //ชื่อของตำแหน่งเมนูอื่นในเทมเพลต));

ตอนนี้เราได้ลงทะเบียน 2 เมนูพร้อมตัวระบุ "บน" และ "ล่าง" พร้อมชื่อที่เกี่ยวข้อง จำเป็นต้องใช้ตัวระบุในธีมเพื่อระบุตำแหน่งที่เมนูที่สร้างในแผงผู้ดูแลระบบจะปรากฏขึ้นผ่านฟังก์ชันเอาต์พุต wp_nav_menu() เราจะเห็นชื่อของสถานที่ที่ลงทะเบียนในแผงผู้ดูแลระบบเมื่อเราไปที่ส่วนลักษณะที่ปรากฏ -> เมนู

หลังจากลงทะเบียนเมนูแล้ว ให้ไปที่แผงผู้ดูแลระบบและสร้างเมนูของคุณ (ใน ในตัวอย่างนี้ 2 เมนู):

ตั้งชื่อเมนู (เมนูในเทมเพลตสามารถแสดงตามชื่อที่ระบุได้โดยใช้ฟังก์ชัน wp_nav_menu()

การสร้างรายการเมนู เราใช้บล็อกด้านซ้าย: หน้าลิงก์ หมวดหมู่

1. เราเลือกตำแหน่งที่จะวางเมนูเนื่องจากเราลงทะเบียน 2 เมนูเราจะมี 2 ตัวเลือก: "เมนูด้านบน" และ "เมนูด้านล่าง"

เปิดใช้งานการรองรับเมนูแบบกำหนดเองใน WordPress สำหรับแต่ละธีมแยกกัน โดยมีบรรทัดนี้ในไฟล์ function.php add_theme_support("menus"); อย่างไรก็ตาม บรรทัดนี้ไม่จำเป็นหากเรากำลังลงทะเบียนเมนู ในกรณีนี้ การสนับสนุนจะถูกเปิดใช้งานโดยอัตโนมัติ

การแสดงเมนูแบบกำหนดเองโดยใช้ฟังก์ชัน wp_nav_menu

เมนูได้รับการลงทะเบียนและสร้างแล้ว สิ่งที่เหลืออยู่คือการเพิ่มลงในเทมเพลต ซึ่งทำได้โดยฟังก์ชัน wp_nav_menu() ซึ่งสามารถรับพารามิเตอร์ต่อไปนี้:

Wp_nav_menu(array("menu" => "", // (string) ชื่อของเมนูที่แสดง (ระบุในผู้ดูแลระบบเมื่อสร้างเมนู จะมีความสำคัญเหนือกว่า // เหนือตำแหน่งที่ระบุ theme_location - หากระบุ พารามิเตอร์ theme_location ถูกละเว้น) "container" => "div", // (string) คอนเทนเนอร์เมนู ul wrapper ระบุแท็กคอนเทนเนอร์ (โดยค่าเริ่มต้นในแท็ก div) "container_class" => "", // (string) คลาสของ คอนเทนเนอร์ (แท็ก div) "container_id" => "" , // (สตริง) id ของคอนเทนเนอร์ (แท็ก div) "menu_class" => "เมนู", // (สตริง) คลาสของเมนูเอง (แท็ก ul) "menu_id" => "", // (string) id ของเมนู ( tag ul) "echo" => true, // (boolean) แสดงหรือส่งคืนสำหรับการประมวลผล "fallback_cb" => "wp_page_menu", // (string) ฟังก์ชั่น (ทางเลือกสำรอง) ที่จะใช้หากไม่มีเมนู (ไม่สามารถรับ ) "before" => "", // (string) ข้อความก่อนหน้า แต่ละลิงก์ "หลัง" => "", // (สตริง) ข้อความหลังแต่ละลิงก์ "link_before" => "", // (สตริง) ข้อความก่อนจุดยึด (ข้อความ) ของลิงก์ "link_after" => "", // (สตริง) ข้อความหลังจุดยึด (ข้อความ) ของลิงก์ "ความลึก " => 0, / / ​​(จำนวนเต็ม) ความลึกของการซ้อน (0 - ไม่ จำกัด 2 - เมนูสองระดับ) "walker" => "", // (วัตถุ) คลาสที่รวบรวมเมนู ค่าเริ่มต้น: ใหม่ Walker_Nav_Menu "theme_location" => "" // (string) ตำแหน่งของเมนูในเทมเพลต (ระบุรหัสที่เมนูลงทะเบียนในฟังก์ชัน register_nav_menus)));

ในตัวอย่างนี้ คุณจะต้องแทรกโค้ด 2 รายการต่อไปนี้โดยประมาณ (ขึ้นอยู่กับพารามิเตอร์ที่คุณต้องการ) ลงในเทมเพลต:

#1. การแสดงเมนูตามสถานที่

เมนูยอดนิยมเราแทรกมันลงในส่วนหัวของเทมเพลต (header.php) โดยที่เมนูด้านบนจะปรากฏขึ้น:

"menu", "theme_location"=>"top", "after"=>" /")); -

จะแสดงเมนูที่สร้างในแผงผู้ดูแลระบบซึ่งแนบมากับตำแหน่ง "เมนูบนสุด" โดยมีโครงสร้างคล้ายกัน:

เมนูด้านล่าง.เราแทรกมันลงในส่วนท้ายของเทมเพลต (footer.php) ซึ่งเมนูด้านล่างจะปรากฏขึ้น:

แสดงเมนูที่สร้างขึ้นในแผงผู้ดูแลระบบซึ่งแนบมากับตำแหน่ง "เมนูด้านล่าง" โครงสร้างจะเหมือนกับอันแรก

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

#2 แสดงเมนูตามชื่อ

หากต้องการแสดงเมนูตามชื่อคุณสามารถใช้อาร์กิวเมนต์ "เมนู" ชื่อจะถูกระบุตามที่ระบุไว้เมื่อสร้างเมนูในแผงผู้ดูแลระบบ ในตัวอย่างของเรา (ดูรูป) “เมนูหลัก” อาร์กิวเมนต์เมนูมีลำดับความสำคัญสูงกว่า theme_location ซึ่งหมายความว่าหากเราแสดงตามชื่อ พารามิเตอร์ theme_location จะถูกละเว้น

คุณสามารถระบุรหัสเมนูแทนชื่อได้ ดังนั้นหากเปลี่ยนชื่อเมนูโค้ดจะยังคงใช้งานได้ รหัสเมนูสามารถดูได้ใน URL ขณะแก้ไขเมนู:

หมายเหตุ

ลองลบ wrapper Div ออก

คุณอาจสังเกตเห็นว่าเมนูมักจะ "ห่อ" ด้วยแท็ก div ที่ไม่จำเป็น สามารถลบออกได้โดยการระบุพารามิเตอร์ว่าง "container"=>"" ในอาร์กิวเมนต์ของฟังก์ชัน wp_nav_menu()

การเปลี่ยนการตั้งค่าเริ่มต้น

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

Register_nav_menus(array("top" => "เมนูด้านบน", "bottom" => "เมนูด้านล่าง")); add_filter("wp_nav_menu_args", "my_wp_nav_menu_args"); ฟังก์ชั่น my_wp_nav_menu_args($args="")( $args["container"] = ""; return $args; )

จากการเปรียบเทียบ คุณสามารถสร้างอาร์กิวเมนต์เริ่มต้นของคุณเองได้: $args["argument"] = "value"

ตรวจสอบว่าเมนูได้รับการลงทะเบียนแล้วหรือไม่

WordPress ยังมีฟังก์ชันเงื่อนไข: has_nav_menu("top") - ตรวจสอบว่าตำแหน่งเมนูด้านบนได้รับการลงทะเบียนแล้วหรือไม่ หากไม่ได้ระบุเมนู ฟังก์ชัน wp_nav_menu() จะทำงานเหมือน wp_list_pages() แต่ div “wrapper” จะยังคงอยู่ แม้ว่าเราจะลบมันออกจากอาร์กิวเมนต์แล้วก็ตาม คุณสามารถแก้ไขปัญหานี้ได้ดังนี้:

ถ้า (has_nav_menu("top"))( wp_nav_menu(array("container" => "", "theme_location" => "top", "menu_class" => "menu")); ) else ( echo "

"; wp_list_pages(array("ความลึก" => 1, "title_li" => "")); echo "