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

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


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

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

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

เมื่อใดที่คุณต้องการกวดวิชาเมนูนำทาง WordPress นี้?

ธีม WordPress ส่วนใหญ่มีจุดอย่างน้อยหนึ่งจุดที่คุณสามารถแสดงลิงก์การนำทางของเว็บไซต์ในเมนู.

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

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

เป้าหมายของบทช่วยสอนนี้คือการช่วยผู้ใช้งาน DIY / ขั้นกลางในการเพิ่มเมนูนำทางที่กำหนดเองในธีม WordPress ของพวกเขา.

เราจะครอบคลุมหัวข้อต่อไปนี้ในบทความนี้:

    ต้องบอกว่ามาดูวิธีเพิ่มเมนูนำทาง WordPress ที่กำหนดเองในธีมของคุณ.

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

    เมนูการนำทางเป็นคุณลักษณะหนึ่งของธีม WordPress แต่ละธีมสามารถกำหนดตำแหน่งเมนูของตัวเองและรองรับเมนูได้.

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

    ฟังก์ชั่น wpb_custom_new_menu () {
    register_nav_menu (‘my-custom-menu’, __ (‘My Custom Menu’))
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

    ตอนนี้คุณสามารถไปที่ หน้าตา»เมนู หน้าในผู้ดูแลระบบ WordPress ของคุณและลองสร้างหรือแก้ไขเมนูใหม่ คุณจะเห็น ‘เมนูที่กำหนดเองของฉัน’ เป็นตัวเลือกที่ตั้งของธีม.

    เพิ่มเมนูการนำทางแบบกำหนดเองให้กับธีม

    หากคุณต้องการเพิ่มตำแหน่งเมนูนำทางใหม่มากกว่าหนึ่งตำแหน่งคุณจะต้องใช้รหัสดังนี้:

    ฟังก์ชั่น wpb_custom_new_menu () {
    register_nav_menus (
    array (
    ‘my-custom-menu’ => __ (‘เมนูที่กำหนดเองของฉัน’),
    ‘เมนูพิเศษ’ => __ (‘เมนูเพิ่มเติม’)
    )
    );
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

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

    สิ่งนี้จะทำให้เราสามารถไปยังขั้นตอนถัดไปซึ่งแสดงเมนูในธีมของคุณ.

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

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

    อย่างไรก็ตามคุณสามารถเพิ่มเมนูนำทางได้ทุกที่ที่คุณต้องการ.

    คุณจะต้องเพิ่มรหัสนี้ในไฟล์แม่แบบของชุดรูปแบบที่คุณต้องการแสดงเมนูของคุณ.

    <?PHP
    wp_nav_menu (อาร์เรย์ (
    ‘theme_location’ => ‘ที่กำหนดเองเมนูของฉัน’,
    ‘container_class’ => ‘เมนูกำหนดเอง’));
    ?>

    ตำแหน่งของธีมคือชื่อที่เราเลือกในขั้นตอนก่อนหน้า.

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

    กำหนดเองแสดงเป็นรายการธรรมดา

    คุณสามารถใช้คลาส CSS .custom_menu_class เพื่อกำหนดสไตล์เมนูของคุณ นี่คือตัวอย่าง CSS ที่จะช่วยคุณเริ่มต้นใช้งาน:

    div.custom-menu-class ul {
    กำไร: 20px 0px 20px 0px;
    list-style-type: none;
    รายการสไตล์: ไม่มี;
    รายการรูปแบบภาพ: ไม่มี;
    text-align: ขวา;
    }
    div.custom-menu-class li {
    การขยาย: 0px 20px 0px 0px;
    แสดงผล: อินไลน์;
    }
    div.custom-menu-class a {
    สี: #FFFFFF;
    }

    สไตล์เมนูที่กำหนดเอง

    หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการออกแบบเมนูนำทางโปรดดูบทแนะนำโดยละเอียดเกี่ยวกับวิธีจัดรูปแบบเมนูนำทางของ WordPress

    การเพิ่มเมนูการนำทางที่กำหนดเองใน WordPress โดยใช้ตัวสร้างหน้า

    หากคุณกำลังสร้างหน้า Landing Page ที่กำหนดเองหรือเค้าโครงหน้าแรกการใช้ปลั๊กอินตัวสร้างหน้า WordPress จะทำให้ทุกอย่างง่ายขึ้นมาก.

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

    ซึ่งรวมถึงการเพิ่มเมนูนำทางที่กำหนดเองลงในเค้าโครงเพจของคุณ.

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

    เมื่อเปิดใช้งานคุณจะต้องสร้างหน้าใหม่หรือแก้ไขหน้าที่มีอยู่ซึ่งคุณต้องการเพิ่มเมนูการนำทาง ในหน้าจอเครื่องมือแก้ไขบทความให้คลิกที่ปุ่ม ‘เปิดตัว Beaver Builder’.

    เรียกใช้ Beaver Builder

    หากเป็นหน้าใหม่คุณสามารถใช้เทมเพลตสำเร็จรูปหนึ่งรายการที่มาพร้อมกับ Beaver Builder นอกจากนี้คุณยังสามารถแก้ไขหน้าที่ออกได้ทันที.

    เลือกเทมเพลต

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

    เพิ่มโมดูลเมนูไปยังหน้าของคุณ

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

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

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

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

    ดูตัวอย่างของเมนูการนำทางแบบกำหนดเองที่เพิ่มด้วย Beaver Builder

    การสร้างเมนูตอบสนองที่เหมาะกับมือถือใน WordPress

    ด้วยการเพิ่มขึ้นของการใช้อุปกรณ์มือถือคุณอาจต้องการทำให้เมนูของคุณเป็นมิตรกับมือถือโดยการเพิ่มเอฟเฟกต์ยอดนิยมอย่างใดอย่างหนึ่ง.

    ตัวอย่างเมนูตอบสนอง

    คุณสามารถเพิ่มเอฟเฟกต์แบบเลื่อนออก (ด้านบน) เอฟเฟกต์แบบเลื่อนลงและแม้กระทั่งเอฟเฟกต์สลับสำหรับเมนูมือถือ.

    เรามีคำแนะนำอย่างละเอียดทีละขั้นตอนเกี่ยวกับวิธีสร้างเมนู WordPress ที่ตอบสนองต่อมือถือ.

    ทำได้มากกว่าด้วยเมนูนำทาง WordPress

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

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

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

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

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map