WordPress输出Bootstrap4结构的菜单
使用Bootstrap可以快速制作出漂亮的WordPress主题,为开发工作节省不少时间和精力。但由于Word…
使用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 );
类别:WordPress教程、
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
还没有任何评论,赶紧来占个楼吧!