WordPress输出Bootstrap4结构的菜单

作者: 站长 上传时间: 浏览: N/A 下载: N/A 格式: N/A 评分: N/A

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

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

register_nav_menus(
array(
'bzg_primary_nav' => __('主导航', 'bzg'),
)
);

然后在header.php中调用：

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

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

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 );