WordPress输出Bootstrap4结构的菜单

使用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' => '%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 );

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。