首页 WordPress教程 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 );
-=||=-收藏赞 (0)
更多主题
单栏极简文艺WordPress博客主题:Diaspora主题
¥ 0 关注:20,855
详情
简约黑白WordPress个人博客主题:Personal主题
¥ 0 关注:20,658
详情
v1.0.0
小程序收录免费WordPress主题:XCX主题
¥ 0 关注:20,596
详情
v1.0.0
一款简约单栏的免费WordPress博客主题:itheme主题
¥ 0 关注:18,511
详情
功能丰富切轻量的WordPress虚拟资源主题:Rizhuti主题
¥ 599 关注:18,436
详情
大气优雅免费WordPress博客主题:HONEY主题
¥ 0 关注:15,301
详情
回复
暂无评论

不要再留垃圾评论了,主题君整理资源不容易,留几句鼓励的话吧。