วิธีสร้างเมนูไดนามิกใน WordPress

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

ในส่วนที่ 2 ของชุดนี้ เราจะก้าวไปอีกขั้นด้วยการสร้างเมนูการนำทางแบบไดนามิก คุณจะได้เรียนรู้วิธีสร้างเมนูแบบมีเงื่อนไขตามตำแหน่งของเมนูใน Block Visibility โดยใช้ Pro add-on ธีมบล็อกใช้เพื่อสร้างส่วนเทมเพลตที่ยึดตามหลักการบล็อก บทแนะนำนี้จะแนะนำคุณตลอดขั้นตอนที่จำเป็นในการสร้าง เมนูการนำทาง รองในหน้า "การเดินป่า" ทำได้ง่ายเพียงแค่คลิก Site Editor เพื่อแก้ไขส่วนหัวของเว็บไซต์ การใช้การควบคุมตำแหน่งในปลั๊กอิน Block Visibility ทำให้เราจำกัดตำแหน่งของเมนูรองได้ ในฐานความรู้ เลือกตัวเลือกตำแหน่ง จากนั้นคลิกไอคอนจุดไข่ปลาเพื่อเปิดใช้งาน

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

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

ฉันจะสร้างเมนูไดนามิกในธีม WordPress ที่กำหนดเองได้อย่างไร

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

โดยทำตามขั้นตอนเหล่านี้ คุณสามารถสร้างเมนูการนำทางที่เรียบง่ายและเป็นไดนามิกใน WordPress ขั้นตอนหลักคือการลงทะเบียนเมนูการนำทางโดยใช้ฟังก์ชัน register_nav_menus() ในการเรียกใช้ คุณต้องลงทะเบียนในไฟล์ functions.php ในธีมย่อยของคุณก่อน แล้วจึงใช้เบ็ด 'init' ในตัวอย่างนี้ เราจะใช้ประโยชน์จากเมนูส่วนหัวหลัก ปลั๊กอินเมนูการนำทางมีอยู่ใน WordPress.org และช่วยให้คุณสามารถกำหนดเมนูต่างๆ ให้กับผู้ใช้ที่แตกต่างกันตามบทบาทของพวกเขา เรายังสามารถใช้ปลั๊กอินนี้เพื่อลงทะเบียน หลายเมนู พร้อมกันได้ ในขั้นตอนก่อนหน้านี้ เราสามารถจัดรูปแบบเมนูการนำทางตามการออกแบบของไซต์โดยอ้างอิงคลาส CSS ที่กำหนดเองในการเรียกใช้ฟังก์ชัน WP_nav_menu

วิธีสร้างเมนูส่วนหัวแบบไดนามิกใน WordPress

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

หากเราสร้าง หน้าเมนู ไดนามิกโดยใช้วิธีหน้าเมนูไดนามิกของ WordPress ซึ่งอธิบายในภายหลังในบทช่วยสอนนี้ เราจะสามารถเปลี่ยนแปลงได้ ในการนำทางหลัก ภาพพื้นหลังใช้เพื่อเปลี่ยนตำแหน่งของรายการเมนูตามรหัส การใช้แท็ก "span" จะทำให้เราสามารถซ่อนข้อความเพื่อดูภาพพื้นหลังตามที่เราเห็น โค้ดที่เราจะใช้นั้นสร้างแบบไดนามิกโดย WordPress โดยใช้คลาสพิเศษที่เรียกว่า current_page_ancestor ดังนั้นจึงควรมีลักษณะดังนี้: ไม่มีการพูดถึงอย่างอื่น หากเราต้องการเพิ่มจำนวนหน้าย่อย เพียงเพิ่มหรือลดการตั้งค่าความลึก=2 เพื่อให้แสดงจำนวนหน้าได้ไม่จำกัด เมื่อใช้ CSS ลิงก์ของหน้าปัจจุบัน ดังที่แสดงในภาพด้านล่าง ตอนนี้แสดงเป็นตัวหนาได้ง่ายมาก นำทางไปยังหน้าหลักที่มีส่วนที่ไฮไลต์ เน้นหน้าลูกของผู้ปกครอง

WordPress เพิ่มรายการเมนูแบบไดนามิก

การเพิ่ม รายการเมนู ในเมนู WordPress สามารถทำได้ผ่านทางแดชบอร์ดผู้ดูแลระบบ WordPress หรือโดยการเพิ่มโค้ดในธีมของคุณ หากคุณต้องการเพิ่มรายการเมนูในเมนูที่มีอยู่ เพียงลงชื่อเข้าใช้ไซต์ WordPress ของคุณและไปที่หน้า "ลักษณะที่ปรากฏ > เมนู" จากที่นั่น คุณสามารถเพิ่มรายการเมนูใหม่โดยเลือกจากด้านซ้ายมือและคลิกปุ่ม "เพิ่มในเมนู" หากคุณต้องการเพิ่มรายการเมนูด้วยโค้ด คุณจะต้องเพิ่มโค้ดสองสามบรรทัดลงในไฟล์ functions.php ของธีมของคุณ สิ่งแรกที่คุณต้องทำคือสร้างฟังก์ชันใหม่ที่จะเพิ่มรายการเมนู ฟังก์ชันนี้สามารถตั้งชื่ออะไรก็ได้ที่คุณต้องการ แต่เราจะเรียกมันว่า “my_ custom_menu_items()” ภายในฟังก์ชันนี้ คุณจะต้องใช้ตัวกรอง "wp_nav_menu_items" ของ WordPress เบ็ดนี้ช่วยให้คุณสามารถเพิ่มรายการใหม่ลงในเมนูที่มีอยู่ได้ รหัสภายในฟังก์ชันของคุณจะมีลักษณะดังนี้: function my_custom_menu_items( $items, $args ) { // ทำอะไรกับ $items return $items; } add_filter( 'wp_nav_menu_items', 'my_custom_menu_items', 10, 2 ); รหัสด้านบนจะเพิ่มฟังก์ชันใหม่ที่สามารถใช้เพื่อเพิ่มรายการในเมนูที่มีอยู่ ฟังก์ชันนี้ยังไม่ได้ทำอะไรเลย แต่มีเฟรมเวิร์กที่คุณสามารถใช้เพื่อเพิ่มรายการเมนูที่คุณกำหนดเองได้ ในการเพิ่มรายการเมนู คุณจะต้องแก้ไขโค้ดภายในฟังก์ชันเพื่อให้เหมาะกับความต้องการของคุณ ตัวอย่างเช่น หากคุณต้องการเพิ่มลิงก์ไปยังหน้า "เกี่ยวกับ" คุณจะต้องใช้โค้ดต่อไปนี้: function my_custom_menu_items( $items, $args ) { $items .= 'About'; ส่งคืนสินค้า $; } add_filter( 'wp_nav_menu_items', 'my_custom_menu_items', 10, 2 ); โค้ดด้านบนจะเพิ่มลิงก์ใหม่ให้กับเมนูของคุณด้วยข้อความ "เกี่ยวกับ" คุณสามารถเพิ่มรายการเมนูได้มากเท่าที่คุณต้องการโดยการเพิ่มบรรทัดโค้ดเพิ่มเติมภายในฟังก์ชัน

ปลั๊กอิน WordPress เมนูไดนามิก

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

วิธีสร้างเมนูที่กำหนดเองใน WordPress

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

Vegibit ช่วยให้คุณเข้าใจวิธีสร้างธีม WordPress เมนูจะอยู่ด้านล่างชื่อไซต์และพื้นที่สโลแกน แต่จะสูงกว่าเนื้อหาไซต์ เพื่อให้เมนูปรากฏขึ้น อันดับแรก เราต้องลงทะเบียนตำแหน่งในไฟล์ functions.php ของธีม สร้างเมนูที่กำหนดเองของเราใน WordPress Dashboard ตอนนี้จำเป็นต้องลงทะเบียนเมนูใหม่ของเราด้วยแกนหลักของ WordPress ด้วยคุณสมบัตินี้ เราสามารถจัดการตำแหน่งของแดชบอร์ดได้แล้ว เราต้องการให้ดูเหมือนว่ามาจากฟังก์ชัน WordPress_nav_menu() โดยตรง

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

การสร้างเมนูที่กำหนดเองใน WordPress

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