เคล็ดลับ เคล็ดลับและปลั๊กอินที่ดีที่สุดสำหรับการปรับแต่งเมนู WordPress

เผยแพร่แล้ว: 2018-04-04

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

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

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

เพิ่มไอคอนในเมนู WordPress ของคุณ

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

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

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

ไอคอนเมนู

ราคา: ฟรี

ไอคอนเมนู

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

  1. ไปที่ Plugins->Add New
  2. ค้นหา "ไอคอนเมนู"
  3. ติดตั้งและเปิดใช้งานปลั๊กอิน
  4. ไปที่ ลักษณะที่ปรากฏ -> เมนู
  5. เปิดเมนูการนำทางของคุณ
  6. เลือกหน้าภายใต้โครงสร้างเมนูที่คุณต้องการเลือกไอคอน
  7. เลือกไอคอน แก้ไขตำแหน่งและขนาด
  8. บันทึกเมนู

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

เพิ่มปุ่มเข้าสู่ระบบ/ออกจากระบบไปยังเมนู

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

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

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

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

หากคุณพร้อมที่จะเพิ่มคุณลักษณะการเข้าสู่ระบบที่เรียบง่ายแต่เรียบร้อยลงในเมนู สิ่งที่คุณต้องทำมีดังนี้:

  1. เปิด functions.php
  2. คัดลอกและวางสิ่งต่อไปนี้:
 ฟังก์ชั่น add_login_logout_link($items, $args) {
$loginoutlink = wp_loginout('index.php', เท็จ);
$items .= '<li>' $loginoutlink .'</li>';
ส่งคืนสินค้า $;
}
add_filter('wp_nav_menu_items', 
'add_login_logout_link', 10, 2);
  1. บันทึกการเปลี่ยนแปลง

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

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

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

เราชอบที่จะปรับแต่ง WordPress ด้วยตัวอย่างเล็กๆ น้อยๆ แบบนี้ แล้วคุณล่ะ?

แสดงเมนู WordPress ได้ทุกที่ที่คุณต้องการ

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

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

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

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

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

สร้างรหัสย่อและแสดงเมนู WordPress ได้ทุกที่ที่คุณต้องการ

  1. เปิดไฟล์ functions.php
  2. คัดลอกและวางรหัสที่จะลงทะเบียนรหัสย่อ:
 ฟังก์ชัน menu_function($atts, $content = null) {
สารสกัด(
shortcode_atts(
array( 'name' => null, ),
$atts
)
);
กลับ wp_nav_menu(
อาร์เรย์ (
'menu' => $name,
'echo' => false
)
);
}
add_shortcode('เมนู', 'menu_function');
  1. บันทึกการเปลี่ยนแปลง

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

[ชื่อเมนู=”เมนูหลัก”]

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

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

วิธีเพิ่มช่องค้นหาในเมนู WordPress ของคุณ

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

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

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

เพิ่มช่องค้นหาในเมนู:

  1. เปิด functions.php
  2. คัดลอกและวางสิ่งต่อไปนี้:
 add_filter( 'wp_nav_menu_items', 'add_search_box', 
10, 2 );
ฟังก์ชั่น add_search_box( $items, $args ) {
$items .= '<li>' get_search_form( เท็จ ) 
'</li>';
ส่งคืนสินค้า $;
}
  1. บันทึกการเปลี่ยนแปลง

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

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

  1. เพิ่มคลาสให้กับแท็ก <li> ที่พบในโค้ดบรรทัดที่สาม:
 $items .= '<li class=”searchbox-position”>' 
get_search_form( เท็จ ) '</li>'
  1. บันทึกการเปลี่ยนแปลง
  2. เปิด style.css
  3. คัดลอกและวางโค้ด CSS:
 .searchbox-ตำแหน่ง {
ขอบบน: 15px;
ระยะขอบขวา: 20px;
}
  1. เปลี่ยนรหัสตามใจชอบ
  2. บันทึกการเปลี่ยนแปลง

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

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

วิธีทำให้เมนูนำทางติดด้านบนของหน้า

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

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

หากคุณมีความรู้เกี่ยวกับ CSS บ้าง คุณจะไม่มีปัญหาในการทำให้เมนูของคุณติดหนึบ คุณต้องเพิ่มโค้ดลงในไฟล์ Style.css ของคุณเท่านั้น จากนั้นจึงจะเพลิดเพลินไปกับคุณสมบัติเมนูใหม่ได้

  1. เปิดสไตล์ชีตของคุณ (style.php)
  2. ค้นหา . nav-menu หรือ . genesis-nav-menu (หรือคล้ายกัน ขึ้นอยู่กับธีมที่คุณใช้)
  3. ใช้รหัสต่อไปนี้สำหรับคอนเทนเนอร์เมนูหลักของคุณ:
 .nav-เมนู {
ตำแหน่ง:คงที่;
พื้นหลัง: #333;
ด้านบน: 0px;
ขวา: 0px;
ซ้าย: 0px;
ดัชนี z:99;
}

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

  1. อัปเดตไฟล์ของคุณและเพลิดเพลินกับเมนูการนำทางที่ติดหนึบของคุณ

หากคุณไม่ชอบยุ่งกับโค้ด คุณสามารถใช้ปลั๊กอินเพื่อทำให้เมนูของคุณติดหนึบ

สร้างเมนูนำทางด้วยปลั๊กอิน

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

UberMenu ส่วนขยายติดหนึบ

ราคา: $8

UberMenu ส่วนขยายติดหนึบ

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

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

myStickymenu

ราคา: ฟรี – สาธิต

myStickymenu

ปลั๊กอินนี้ออกแบบมาเพื่อใช้กับธีม Twenty Thirteen แต่ถ้าคุณปรับแต่งเล็กน้อย คุณสามารถใช้มันกับธีมใดก็ได้ที่คุณชอบ โดยค่าเริ่มต้น จะใช้คลาส CSS การนำทางของธีม “.navbar” ดังนั้นหากคุณต้องการใช้กับธีมอื่น คุณต้องค้นหาคลาสที่ธีมของคุณใช้ เพื่ออธิบายเมนูการนำทางและเปลี่ยนชื่อของคลาสนั้น

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

เมนูเหนียว (หรืออะไรก็ได้!) บน Scroll

ราคา: ฟรี

เมนูเหนียว (หรืออะไรก็ได้!) บน Scroll

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

วิธีลบรายการเมนูระดับบนสุดใน WordPress

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

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

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

ลบรายการเมนูระดับบนสุด:

  1. เปิดไฟล์ functions.php ของคุณ
  2. คัดลอกและวางรหัสต่อไปนี้:
 ถ้า (!current_user_can( 'manage_options' )) {
add_action( 'admin_menu', 'my_remove_menus', 999 );
}
ฟังก์ชั่น my_remove_menus() {
remove_menu_page( 'index.php' ); //แผงควบคุม
remove_menu_page( 'edit.php' ); //โพสต์
remove_menu_page( 'upload.php' ); //สื่อ
remove_menu_page( 'edit.php?post_type=page' ); //หน้า
remove_menu_page( 'แก้ไขความคิดเห็น.php' ); //ความคิดเห็น
remove_menu_page( 'themes.php' ); //รูปร่าง
remove_menu_page( 'plugins.php' ); // Plugins
remove_menu_page( 'users.php' ); //ผู้ใช้
remove_menu_page( 'tools.php' ); //เครื่องมือ
remove_menu_page( 'options-general.php' ); //การตั้งค่า
}
  1. บันทึกการเปลี่ยนแปลง

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

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

ปลั๊กอินเมนูยอดนิยม 4 อันดับแรกสำหรับ WordPress

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

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

เมนู Uber

ราคา: $20 – สาธิต

เมนู Uber

ด้วยยอดขายมากกว่า 43,000 รายการ Uber Menu เป็นหนึ่งในปลั๊กอินยอดนิยมสำหรับ WordPress เมื่อคุณเปิดไซต์สาธิตและดูว่าเมนูที่สร้างด้วยปลั๊กอินนี้เป็นอย่างไร คุณจะเข้าใจว่าทำไมเมนูนี้ถึงได้รับความนิยม และเมื่อคุณเริ่มแสดงคุณลักษณะต่างๆ แล้ว คุณอาจต้องการคุณลักษณะนี้สำหรับตัวคุณเอง

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

  • การสร้างรายการแบบไดนามิก
  • เมนูย่อยที่แท็บ
  • ปรับปรุงส่วนต่อประสานผู้ใช้

Morph: เมนู WordPress Fly-Out ที่ปรับแต่งได้

ราคา: $20 – สาธิต

มอร์ฟ

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

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

  • ใช้งานได้ดีทั้งบนเดสก์ท็อปและอุปกรณ์มือถือ
  • เพิ่ม/ลบองค์ประกอบที่ปรับแต่งได้
  • สามารถเรียกโดยองค์ประกอบใด ๆ

เมนูฮีโร่

ราคา: 19 เหรียญ – สาธิต

เมนูฮีโร่

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

มีการรองรับการสัมผัสพิเศษสำหรับ Android, iOS และ Windows Phone เลือกแถบการนำทางแบบเต็มความกว้างหรือความกว้างคงที่ ซึ่งคุณสามารถ เพิ่มองค์ประกอบพิเศษได้ง่ายๆ โดยใช้เทคนิคการลากและวาง มีชุดสีที่ตั้งไว้ล่วงหน้ามากกว่า 60 แบบ และคุณสามารถใช้ Google Fonts แต่ละแบบได้ฟรี ทำให้เมนูติดหนึบ เลือกระยะการเปิดใช้งาน… ปลั๊กอินที่ยอดเยี่ยมนี้สามารถนำเสนอได้มากกว่า ดังนั้นอย่าลืมตรวจสอบรายการคุณสมบัติทั้งหมดใน CodeCanyon

  • ตัวสร้างโครงสร้างเมนูลาก&วาง
  • สร้างเมนูง่ายๆ หรือเมนูเมก้าที่ซับซ้อน
  • การนำทางมือถือพิเศษ

มัลติ-เอ็กซ์ บาร์

ราคา: $16 – สาธิต

มัลติ เอ็กซ์ บาร์

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

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

  • 8 โมดูลการทำงานแบบฝังตัว
  • ธีม 2 สี + ธีมที่กำหนดเอง
  • ตำแหน่งบนหรือล่าง

สุดยอดปลั๊กอินเมนูมือถือ WordPress

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

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

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

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

สัมผัส

ราคา: $18 – สาธิต

สัมผัส

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

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

  • หลายประเภทเมนู
  • ฟังก์ชั่นการค้นหา
  • ตำแหน่งคงที่/แน่นอน

TapTap

ราคา: $10 – สาธิต

Tap-Tap

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

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

  • เมนูหลายระดับ
  • การออกแบบและแอนิเมชั่นปุ่มเมนู 2 ปุ่ม
  • ตำแหน่งคงที่/แน่นอน

โมบิ

ราคา: $16 – สาธิต

โมบิ

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

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

  • ลากและวางการปรับแต่ง
  • การวางตำแหน่งเมนูบนหรือล่าง
  • การมองเห็นผู้ใช้สำหรับแขกและผู้ใช้ที่เข้าสู่ระบบ

Wah-เมนู

ราคา: $44 – สาธิต

วา-วา

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

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

  • บรรณาธิการ WYSIWYG
  • เมนูย่อยที่รองรับ HTML, วิดีโอแบบฝัง ฯลฯ
  • ตัวเลือกสถานะ Out หรือ Docked

เมนูรูปแบบเส้นทาง

ราคา: $12 – สาธิต

รูปแบบเส้นทาง

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

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

  • สร้างเมนูรอบปุ่ม
  • ปรับแต่งได้สูง
  • ใช้เมนู WP มาตรฐานในการแก้ไขเมนู

Scrollnav

ราคา: $10 – สาธิต

Scrollnav

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

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

  • ปุ่มวงกลมพร้อมฟังก์ชันต่างๆ
  • เมนูที่กำหนดเองและส่วนลิงก์ที่กำหนดเอง
  • หลายสี

เลื่อนไปที่เมนู

ราคา: $24 – สาธิต

เลื่อนไปที่เมนู

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

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

  • สัมผัสที่เปิดใช้งาน
  • กว่า 750 ไอคอน + ภาพที่กำหนดเอง
  • พื้นที่โฆษณาเพิ่มเติม

บทสรุป

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