วิธีสร้างโครงสร้างเมนูแบบกำหนดเองใน WordPress

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

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

ประเภทของเมนู

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

• เมนูหลัก – เมนูนี้จะปรากฏใต้ส่วนหัว ควรมีการนำทางหลักและหน้าที่ผู้เยี่ยมชมคาดหวังตามประเภทของเว็บไซต์ที่คุณมี: หน้าแรก เกี่ยวกับ ติดต่อ บล็อก ผลงาน ฯลฯ
• เมนูรอง – เมนูนี้จะปรากฏเหนือส่วนหัว ซึ่งควรรวมถึงลิงก์และหน้าที่คุณต้องการให้ผู้อ่านของคุณอยู่ในตำแหน่งที่สะดวก แต่ไม่จำเป็นต้องอยู่ในโครงสร้างการนำทางหลักของคุณ นี่อาจเป็นรายการต่างๆ เช่น บทช่วยสอน ตะกร้าสินค้า ฯลฯ
• แถบด้านข้าง – เมนูแบบกำหนดเองของคุณสามารถวางในแถบด้านข้างโดยใช้วิดเจ็ตเมนูแบบกำหนดเอง คุณสามารถใช้วิดเจ็ตได้มากเท่าที่ต้องการและใส่เมนูใดก็ได้ลงในวิดเจ็ต
• ส่วนท้าย – คุณสามารถสร้างเมนูสำหรับส่วนท้ายของคุณเท่านั้น เมนูนี้มักจะมีข้อมูลน้อยกว่าเมนูหลักของคุณ ขึ้นอยู่กับความต้องการของไซต์ของคุณ โดยปกติแล้วจะมีบ้าน เกี่ยวกับ ติดต่อ บล็อก ฯลฯ หากไซต์ของคุณมีประกาศรับสมัครงาน โปรแกรมพันธมิตร และไซต์ในเครือก็สามารถรวมไว้ที่นี่ได้เช่นกัน
• เมนูลิงก์โซเชียล – นี่คือเมนูพิเศษที่พบในธีม เช่น Twenty Fifteen ที่วางลิงก์โซเชียลมีเดียในแถบด้านข้างของคุณ หากชุดรูปแบบรู้จักเครือข่ายโซเชียลก็จะมีไอคอนที่เหมาะสม หากไม่เป็นเช่นนั้น ระบบจะแสดงชื่อเป็นข้อความ (ตามที่คุณติดป้ายกำกับลิงก์)

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

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

การสร้างเมนูที่กำหนดเองของคุณเอง

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

การสร้างเมนูจากส่วนหลัง

ที่ส่วนหลัง ให้ไปที่ ลักษณะที่ปรากฏ และเลือก เมนู ที่ส่วนหน้า ให้ไปที่ปรับแต่งและเลือกการนำทาง

บนหน้าจอเมนู ให้เลือกสร้างเมนูใหม่ ตั้งชื่อเมนู แล้วคลิกปุ่มสร้างเมนู

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

หน้า

เลือกแท็บ Pages ในหน้าต่างด้านซ้าย หากยังไม่ได้เปิด เมื่อต้องการเพิ่มหน้าในเมนู ให้เลือกหน้าทั้งหมดที่คุณต้องการแล้วคลิก เพิ่มในเมนู

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

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

ลิงค์ที่กำหนดเอง

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

จากนั้นคุณสามารถลากและวางในตำแหน่งที่คุณต้องการในโครงสร้างเมนู

หมวดหมู่

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

บันทึกเมนูของคุณ

เมื่อคุณชอบโครงสร้างเมนูใหม่ของคุณแล้ว ให้บันทึก จากนั้นคุณก็สามารถใช้งานได้

จัดการสถานที่

มีสองวิธีในการใช้เมนูของคุณจากส่วนหลัง

การตั้งค่าเมนู

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

จัดการสถานที่

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

วิดเจ็ต

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

การทดสอบ

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

การใช้ส่วนหน้าสำหรับมุมมอง WYSIWYG

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

ปรับแต่งรูปลักษณ์ด้วยธีมอย่าง Divi

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

มาดูการปรับเมนูของ Divi คุณสามารถทำการปรับเปลี่ยนแบบเดียวกันนี้เพื่อเปลี่ยนรูปลักษณ์ของแต่ละรายการในเมนู

ปรับแต่งเพิ่มเติม – ใช้ปลั๊กอินเพื่อแก้ไขเมนูของคุณ

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

วิดเจ็ตตัวช่วยสร้างเมนูแบบกำหนดเอง

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

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

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

เมนูหีบเพลงถัดไป

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

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

นอกจากนี้ยังมีรุ่น Pro ที่เพิ่มธีมและการสนับสนุนสามแบบ ราคาเริ่มต้นที่ 29 เหรียญ

เมนูตอบสนอง

ปลั๊กอินฟรีนี้มี 70 ตัวเลือกในการปรับรูปลักษณ์ ความรู้สึก และการกระทำของเมนูของคุณ คุณสามารถเปลี่ยนชื่อ, CSS, การกระทำ, ขนาด, แอนิเมชั่น, สคริปต์ และอื่นๆ อีกมากมาย ใช้งานได้ดีกับอุปกรณ์พกพาและมีคุณสมบัติในการดึงเมนูจากด้านหนึ่งและกำหนดตำแหน่งของเมนู มันจะย่อขนาด CSS และ JavaScript ของเมนูของคุณ คุณยังสามารถเพิ่ม HTML ที่กำหนดเองและนำเข้า/ส่งออกการตั้งค่าของคุณได้

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

ปลั๊กอินอื่น ๆ เพื่อแก้ไขเมนู

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

• WordPress Mega Menu
• เมนูดรอปดาวน์ CSS3 Mega
• WP Responsive Menu
• Font Awesome 4 เมนู
• รหัสย่อในเมนู
• ลักษณะที่ปรากฏเร็วขึ้น – Menus
• เมนูอาหารและเครื่องดื่ม
• เมนูขายปลีกอย่างง่าย
• Purify WordPress Menus
• เมนูวิดเจ็ต

เคล็ดลับในการสร้างโครงสร้างเมนูที่ยอดเยี่ยม

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

ความคิดสุดท้าย

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

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