wp bootstrap navwalker
v4.3.0: Version bump to 4.3.0
โค้ดนี้ในสาขา repo หลักกำลังอยู่ระหว่างการเปลี่ยนแปลงครั้งใหญ่เพื่อให้สอดคล้องกับมาตรฐานล่าสุด และเพื่อรวมและทดสอบ Backlog ของ PR ที่ฉันทิ้งไว้นานเกินไป โปรดใช้แท็ก v4.3.0 สำหรับเวอร์ชันเสถียรในขณะที่กระบวนการนี้เกิดขึ้น https://github.com/wp-bootstrap/wp-bootstrap-navwalker/releases/tag/v4.3.0
คลาส WordPress Nav Walker แบบกำหนดเองเพื่อใช้สไตล์การนำทาง Bootstrap 4 อย่างเต็มที่ในธีมแบบกำหนดเองโดยใช้ WordPress ในตัวจัดการเมนู
นี่คือคลาสยูทิลิตี้ที่มีจุดประสงค์เพื่อจัดรูปแบบเมนูธีม WordPress ของคุณด้วยไวยากรณ์ที่ถูกต้องและคลาส CSS เพื่อใช้การนำทางแบบเลื่อนลง Bootstrap ไม่รวมไฟล์ Bootstrap JS และ CSS ที่จำเป็น คุณจะต้องรวมไฟล์เหล่านี้ด้วยตนเอง
โปรแกรมช่วยเดินนี้สอดคล้องกับแนวทางการทบทวนธีมทั้งหมดสำหรับการส่งธีมของ wordpress.org ไม่จำเป็นต้องแก้ไขเพื่อให้เป็นไปตามข้อกำหนด แต่คุณสามารถเลือกแทนที่โดเมนข้อความ wp-bootstrap-navwalker (ซึ่งปรากฏสองครั้งในฟังก์ชัน fallback ) ด้วยโดเมนข้อความของธีมของคุณ
ระหว่างเวอร์ชัน 3 และเวอร์ชัน 4 ของวอล์คเกอร์ มีการเปลี่ยนแปลงที่สำคัญในโค้ดเบส วอล์คเกอร์เวอร์ชัน 4 ได้รับการออกแบบมาเพื่อทำงานกับ Bootstrap 4 และไม่ได้รับการทดสอบความเข้ากันได้แบบย้อนหลังกับ Bootstrap 3 สาขาแยกต่างหากสำหรับ Bootstrap 3 ได้รับการดูแลที่นี่: https://github.com/wp-bootstrap/wp-bootstrap- navwalker/tree/v3-branch
นี่คือรายการการเปลี่ยนแปลงที่โดดเด่นที่สุด:
class- เพื่อให้เหมาะสมกับแบบแผนการตั้งชื่อมาตรฐานการเข้ารหัส PHP มากขึ้นclass-wp-bootstrap-navwalker.phpwp-bootstrap-navwalker.phpCSS Classes แทนอินพุต Titlesr-only วาง class-wp-bootstrap-navwalker.php ในโฟลเดอร์ธีม WordPress ของคุณ /wp-content/themes/your-theme/
เปิดไฟล์ WordPress ธีม Functions.php - /wp-content/themes/your-theme/functions.php - และเพิ่มโค้ดต่อไปนี้:
/**
* Register Custom Navigation Walker
*/
function register_navwalker (){
require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
}
add_action ( ' after_setup_theme ' , ' register_navwalker ' );หากคุณพบข้อผิดพลาดกับโค้ดข้างต้น ให้ใช้การตรวจสอบเช่นนี้เพื่อส่งคืนข้อผิดพลาดใหม่ทั้งหมดเพื่อช่วยวินิจฉัยปัญหา
if ( ! file_exists ( get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ) ) {
// File does not exist... return an error.
return new WP_Error ( ' class-wp-bootstrap-navwalker-missing ' , __ ( ' It appears the class-wp-bootstrap-navwalker.php file may be missing. ' , ' wp-bootstrap-navwalker ' ) );
} else {
// File exists... require it.
require_once get_template_directory () . ' /class-wp-bootstrap-navwalker.php ' ;
} คุณจะต้องประกาศเมนูใหม่ในไฟล์ functions.php ของคุณหากยังไม่มี
register_nav_menus ( array (
' primary ' => __ ( ' Primary Menu ' , ' THEMENAME ' ),
) ); เพิ่มหรืออัปเดตฟังก์ชัน wp_nav_menu() ใด ๆ ในธีมของคุณ (มักพบใน header.php ) เพื่อใช้วอล์คเกอร์ใหม่โดยการเพิ่มรายการ 'walker' ลงในอาร์เรย์ wp_nav_menu args
wp_nav_menu ( array (
' theme_location ' => ' primary ' ,
' depth ' => 2 , // 1 = no dropdowns, 2 = with dropdowns.
' container ' => ' div ' ,
' container_class ' => ' collapse navbar-collapse ' ,
' container_id ' => ' bs-example-navbar-collapse-1 ' ,
' menu_class ' => ' navbar-nav mr-auto ' ,
' fallback_cb ' => ' WP_Bootstrap_Navwalker::fallback ' ,
' walker ' => new WP_Bootstrap_Navwalker (),
) );เมนูของคุณจะถูกจัดรูปแบบด้วยไวยากรณ์และคลาสที่ถูกต้องเพื่อใช้การนำทางแบบเลื่อนลง Bootstrap
โดยทั่วไปแล้ว เมนูจะหุ้มด้วยมาร์กอัปเพิ่มเติม นี่คือตัวอย่างของเมนู fixed-top ที่ยุบลงสำหรับการนำทางแบบตอบสนองที่เบรกพอยต์ md
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<?php
wp_nav_menu ( array (
' theme_location ' => ' primary ' ,
' depth ' => 2 ,
' container ' => ' div ' ,
' container_class ' => ' collapse navbar-collapse ' ,
' container_id ' => ' bs-example-navbar-collapse-1 ' ,
' menu_class ' => ' nav navbar-nav ' ,
' fallback_cb ' => ' WP_Bootstrap_Navwalker::fallback ' ,
' walker ' => new WP_Bootstrap_Navwalker (),
) );
?>
</div>
</nav> หากต้องการเปลี่ยนสไตล์เมนูของคุณ ให้เพิ่มชื่อคลาส Bootstrap nav ในการประกาศ menu_class
ตรวจสอบตัวเลือกในเอกสาร Bootstrap สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคลาส nav
หากต้องการแสดงเมนู คุณต้องเชื่อมโยงเมนูของคุณกับตำแหน่งธีมของคุณ คุณสามารถทำได้โดยเลือกตำแหน่งธีมของคุณในรายการ ตำแหน่งธีม ขณะแก้ไขเมนูในตัวจัดการเมนู WordPress
มีความสนใจในการทำให้อุปกรณ์ช่วยเดินนี้เป็นอุปกรณ์ช่วยเดินเริ่มต้นสำหรับทุกเมนู นั่นอาจส่งผลให้เกิดสถานการณ์ที่ไม่คาดคิด แต่สามารถทำได้โดยการเพิ่มฟังก์ชันนี้ลงในไฟล์ function.php ของคุณ
function prefix_modify_nav_menu_args ( $ args ) {
return array_merge ( $ args , array (
' walker ' => new WP_Bootstrap_Navwalker (),
) );
}
add_filter ( ' wp_nav_menu_args ' , ' prefix_modify_nav_menu_args ' );การอัปเดตวอล์คเกอร์เพียงอย่างเดียวอาจไม่เพียงพอที่จะทำให้เมนูทำงานได้อย่างถูกต้อง คุณอาจต้องเพิ่ม wrapper หรือคลาสเพิ่มเติม คุณสามารถทำได้ผ่านฟังก์ชันด้านบนเช่นกัน
Bootstrap 5 ใช้แอตทริบิวต์ข้อมูลเนมสเปซ ตอนนี้แอตทริบิวต์ data ทั้งหมดรวม bs ไว้เป็นมัด คุณสมบัติใหม่ทำงานเหมือนกับคุณสมบัติเก่า นี่คือปุ่มสลับเมนูจากตัวอย่างด้านบนพร้อมกับแอตทริบิวต์ข้อมูลที่เปลี่ยนชื่อ
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=" #bs - example - navbar - collapse - 1 " aria-controls= " bs - example - navbar - collapse - 1 " aria-expanded= " false " aria-label= " <? php esc_attr_e ( 'Toggle navigation' , 'your - theme - slug' ) ; ?> ">
<span class="navbar-toggler-icon"></span>
</button> วอล์คเกอร์ยังเพิ่มแอตทริบิวต์ข้อมูลสำหรับการสลับแบบเลื่อนลงผ่านเมธอด start_el() วางสิ่งนี้ลงใน Functions.php ของคุณเพื่อให้วอล์คเกอร์ใช้แอตทริบิวต์ข้อมูลที่ตรึงไว้
add_filter ( ' nav_menu_link_attributes ' , ' prefix_bs5_dropdown_data_attribute ' , 20 , 3 );
/**
* Use namespaced data attribute for Bootstrap's dropdown toggles.
*
* @param array $atts HTML attributes applied to the item's `<a>` element.
* @param WP_Post $item The current menu item.
* @param stdClass $args An object of wp_nav_menu() arguments.
* @return array
*/
function prefix_bs5_dropdown_data_attribute ( $ atts , $ item , $ args ) {
if ( is_a ( $ args -> walker , ' WP_Bootstrap_Navwalker ' ) ) {
if ( array_key_exists ( ' data-toggle ' , $ atts ) ) {
unset( $ atts [ ' data-toggle ' ] );
$ atts [ ' data-bs-toggle ' ] = ' dropdown ' ;
}
}
return $ atts ;
}ในบางไซต์ที่สร้างเมนูขนาดใหญ่ซึ่งแทบไม่เคยเปลี่ยนแปลงในทุกคำขอเพจถือเป็นค่าใช้จ่ายที่คุณอาจต้องการหลีกเลี่ยง ในกรณีเหล่านั้น ฉันขอแนะนำให้คุณดูที่ผลลัพธ์ของเมนูการจัดเก็บเป็นแบบชั่วคราว
ข้อเสียเปรียบที่ใหญ่ที่สุดในการแคชเมนูนำทางด้วยวิธีนี้คือ ไม่สามารถใช้ .current-menu-item หรือคลาส .active กับรายการที่ใช้งานอยู่ในปัจจุบันได้อย่างง่ายดาย เนื่องจาก WP ตัดสินใจว่าอะไรกำลังใช้งานอยู่ในปัจจุบันในการโหลดเพจ - และเนื่องจากเมนูถูกแคชไว้ จะรู้เฉพาะเพจที่ใช้งานอยู่ซึ่งถูกแคชไว้ตั้งแต่แรกเท่านั้น
คุณสามารถตัดสินใจได้เองว่าต้องการยอมรับข้อเสียเหล่านั้นเพื่อประโยชน์ในการลบเวลาการสร้างเมนูในการโหลดเพจส่วนใหญ่หรือไม่ คุณสามารถติดตามบทความนี้โดย Dave Clements เพื่อดูว่าเราแคชเมนูนำทางที่สร้างโดยวอล์คเกอร์นี้อย่างไร: https://www.doitwithwp.com/use-transients-speed-wordpress-menus/
ตรวจสอบให้แน่ใจว่าได้ตั้งค่าอาร์กิวเมนต์ echo เป็น FALSE ในการเรียก the wp_nav_menu() เมื่อทำเช่นนี้ เพื่อให้สามารถจัดเก็บผลลัพธ์แทนที่จะสะท้อนไปที่เพจ
ดูเพิ่มเติมที่:
สคริปต์นี้รวมความสามารถในการใช้ Bootstrap nav link mods ในเมนูของคุณผ่าน UI เมนู WordPress รองรับลิงก์ที่ปิดใช้งาน ส่วนหัวแบบเลื่อนลง และตัวแบ่งแบบเลื่อนลง นอกจากนี้ ยังมีการรองรับไอคอนเพิ่มเติมสำหรับ Glyphicons และ Font Awesome (หมายเหตุ: คุณจะต้องรวมสไตล์ชีทของไอคอนหรือเนื้อหาแยกต่างหาก)
หากต้องการเพิ่มไอคอนลงในลิงก์ของคุณ เพียงป้อนชื่อคลาส Glyphicons หรือ Font Awesome ในช่อง คลาส CSS ของลิงก์ใน UI เมนู แล้วคลาสวอล์คเกอร์จะจัดการส่วนที่เหลือเอง IE glyphicons glyphicons-bullhorn หรือ fa fa-arrow-left หรือ fas fa-arrow-left
หากต้องการให้รายการปรากฏขึ้นพร้อมกับไอคอน ให้ใช้คลาสตัวอ่านหน้าจอบูตสแตรป sr-only กับรายการข้างชื่อคลาสไอคอนใดๆ จากนั้นจะซ่อนเฉพาะข้อความที่จะปรากฏเป็นข้อความลิงก์
หากต้องการตั้งค่าลิงก์ที่ปิดใช้งาน เพียงเพิ่มปิด disabled ลงในฟิลด์ คลาส CSS ใน UI เมนู แล้วคลาสวอล์คเกอร์จะจัดการส่วนที่เหลือเอง หมายเหตุ: นอกเหนือจากการเพิ่มคลาส .disabled แล้ว สิ่งนี้จะเปลี่ยนลิงก์ href เป็น # ด้วย เพื่อไม่ให้ลิงก์ติดตามได้
คุณสามารถเพิ่มส่วนหัว ตัวแบ่ง และรายการข้อความเท่านั้นได้ภายในดรอปดาวน์โดยการเพิ่มลิงก์ที่กำหนดเอง และเพิ่ม dropdown-header , dropdown-divider หรือ dropdown-item-text ลงในอินพุต CSS Classes หมายเหตุ: การดำเนินการนี้จะลบ href ในรายการและเปลี่ยนเป็น <span> สำหรับส่วนหัวหรือ <div> สำหรับตัวแบ่ง
ตามเอกสารประกอบสำหรับ wp_nav_menu() เราจะต้องจัดเตรียมอินสแตนซ์ของคลาสวอล์คเกอร์แบบกำหนดเองเพื่อใช้วอล์คเกอร์แบบกำหนดเองกับเมนู เนื่องจากอินสแตนซ์ไม่สามารถทำให้เป็นอนุกรมของ JSON ได้ จะทำให้ทางลัดการแก้ไขเมนูไม่ปรากฏในการแสดงตัวอย่างเครื่องมือปรับแต่ง หากต้องการแก้ไขปัญหานี้ ให้ทำดังต่อไปนี้:
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
- 'walker' => new WP_Bootstrap_Navwalker(),
+ 'walker' => 'WP_Bootstrap_Navwalker',
) );functions.php ของคุณ function slug_provide_walker_instance ( $ args ) {
if ( isset ( $ args [ ' walker ' ] ) && is_string ( $ args [ ' walker ' ] ) && class_exists ( $ args [ ' walker ' ] ) ) {
$ args [ ' walker ' ] = new $ args [ ' walker ' ];
}
return $ args ;
}
add_filter ( ' wp_nav_menu_args ' , ' slug_provide_walker_instance ' , 1001 );โปรดดูบันทึกการเปลี่ยนแปลง
