WordPress输出Bootstrap4结构的菜单-利剑分享-科技生活
利剑分享-科技生活-利剑分享-科技生活
利剑分享-科技生活

WordPress输出Bootstrap4结构的菜单

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' => '{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 );

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享