WordPress输出Bootstrap4结构的菜单

使用Bootstrap可以快速制作出漂亮的WordPress主题,为开发工作节省不少时间和精力。但由于WordPress的一些HTML是使用内置函数输出的,所以结构上可能并不符合Bootstrap的要求,也就是缺少Bootstrap样式需要的类名,其中导航菜单部分是最棘手的。

通常我们在制作WordPress主题时,为了方便后期能够在后台自定义菜单,都会在主题里注册一个菜单,functions.php里添加如下代码:

1
2
3
4
5
register_nav_menus(
    array(
        'bzg_primary_nav' => __('主导航', 'bzg'),
    )
);

然后在header.php中调用:

1
2
3
4
5
6
wp_nav_menu( array(
    'depth' => 2,
    'container' => false,
    'items_wrap' => '{5cc1b29162d549a8071384de182cc9fc6e6a0fd85e7907f22fd9e18cff4269c3}3$s',
    'theme_location' => 'bzg_primary_nav',
) );

如果需要这个菜单应用Bootstrap4的样式,则需要在functions.php中添加以下代码来替换菜单中的一些类名:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
function bzg_nav_class( $classes ) {
    foreach($classes as $key=>$val) {
        switch($val) {
            case 'menu-item' :
                $classes[$key] = 'nav-item';
                break;
            case 'current-menu-item' :
                $classes[$key] = 'active';
                break;
            case 'current-menu-parent' :
                $classes[$key] = 'dropdown';
                break;
            case 'current_page_item' :
                unset($classes[$key]);
                break;
            case 'menu-item-object-custom' :
                unset($classes[$key]);
                break;
            case 'menu-item-type-custom' :
                unset($classes[$key]);
                break;
            case 'menu-item-type-taxonomy' :
                unset($classes[$key]);
                break;
            case 'menu-item-object-category' :
                unset($classes[$key]);
                break;
            case 'menu-item-type-post_type' :
                unset($classes[$key]);
                break;
            case 'menu-item-object-page' :
                unset($classes[$key]);
                break;
            case 'current-menu-ancestor' :
                unset($classes[$key]);
                break;
            case 'current_page_parent' :
                unset($classes[$key]);
                break;
            case 'current_page_ancestor' :
                unset($classes[$key]);
                break;
            case 'menu-item-has-children' :
                $classes[$key] = 'dropdown';
                break;
            default:
               
        }
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'bzg_nav_class', 10, 1 );

function bzg_submenu_css_class( $classes ) {
    $classes[0] = 'dropdown-menu';
    return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'bzg_submenu_css_class', 10, 1 );

function bzg_nav_menu_link_attributes( $atts, $item, $args, $depth ) {
    $atts['class'] = 'nav-link';
    if(array_search('menu-item-has-children', $item->classes) !== false) {
        $atts['class'] .= ' dropdown-toggle';
        $atts['id'] = '';
        $atts['href'] = '#';
        $atts['data-toggle'] = 'dropdown';
        $atts['aria-haspopup'] = 'true';
        $atts['aria-expanded'] = 'false';
    }
    if($depth > 0) {
        $atts['class'] = 'dropdown-item';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'bzg_nav_menu_link_attributes', 10, 4 );
原文链接:https://xiaohost.com/2307.html,转载请注明出处。
0