Giải thích 1 số giá trị trong Menu Bootstrap Navwalker WordPress

Code WordPress 13/01/2025 08/02/2025 In trang này

Trong quá trình phát triển 1 số website WordPress tôi có sử dụng Menu Bootstrap Navwalker để custom menu nhanh chóng và kế thừa các chức năng trong Bootstrap và dưới đây là 1 số thông số mà tôi note lại để 1 số đồng nghiệp, nhân viên và chính tôi sẽ ghi nhớ nhanh hơn các giá trị.

Bạn có thể tải về wp-bootstrap-navwalker tại đây sau đó tích hợp vào theme của bạn như sau:

/**
 * Register Custom Navigation Walker
 */
function vts_register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'vts_register_navwalker' );

Sau đó sử dụng code sau để tuỳ biến đầu ra và class cho phù hợp, trong code tôi có comment nên bạn có thể đọc qua sẽ hiểu cách sử dụng

wp_nav_menu(array(
    // Vị trí menu đã đăng ký trong theme
    'theme_location' => 'primary',

    // Class xử lý cấu trúc HTML của menu
    'walker' => new WP_Bootstrap_Navwalker(),

    // Độ sâu của menu (số cấp menu)
    'depth' => 2,

    // Container bọc menu
    'container' => 'div',  // HTML tag bọc ngoài menu (div, nav, false để không có container)
    'container_class' => 'main-menu', // Class của container
    'container_id' => 'primary-menu', // ID của container
    
    // Class và ID của thẻ ul chính
    'menu_class' => 'menu-list', // Class của thẻ ul 
    'menu_id' => 'menu-primary', // ID của thẻ ul
    
    // Các tùy chọn hiển thị
    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', // Format HTML bọc menu items
    'link_before' => '<span>', // HTML trước text của link
    'link_after' => '</span>', // HTML sau text của link
    
    // Fallback khi không có menu nào được chọn
    'fallback_cb' => false, // Hàm callback khi không có menu (false để disable)
    
    // Chọn menu cụ thể
    'menu' => '', // Có thể chọn theo ID, slug hoặc tên menu
    
    // Echo hay return menu
    'echo' => true, // true để in menu, false để return HTML
    
    // CSS class cho các item menu
    'add_li_class' => 'menu-item', // Thêm class cho các thẻ li
    
    // Kiểu hiển thị menu
    'item_spacing' => 'preserve', // 'preserve' hoặc 'discard' khoảng trắng giữa các items
));