使用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，转载请注明出处。
