Bootstrap菜单样式灵活多样,如果你的Wordpress主题是采用Bootstrap框架开发的,你想换掉它的导航样式的话,这篇文章将对我们有一定的帮助。或者你正在开发一个Bootsrap框架的Wordpress主题,在替换wp_nav_menu样式上,是比较麻烦,这篇文章对我们一定会有很大的帮助。
一、加载第三方插件代码
首先下载歪果仁开源的WordPress下生成Bootstrap导航条HTML代码文件:百度网盘下载 wp_bootstrap_navwalker.php ,放到主题根目录里,或者你自己自定义文件夹里,我是放在inc文件夹里。然后在主题的functions.php文件中添加以下代码:
// 导入bootstrap菜单样式
include_once('inc/wp_bootstrap_navwalker.php');
二、注册主题菜单,在主题的functions.php文件中添加以下代码:
register_nav_menus(
array(
'header-menu' => __( 'top_menu' )
)
);
三、在header.php中输出菜单的位置添加代码:
<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'container' => '',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'before' => '',
'after' => '',
'walker' => new wp_bootstrap_navwalker())
);
?>
四、效果截图
您可能感兴趣的文章:
▪ WordPress主题添加后台管理自定义字段面板选项keywords
▪ Cordillera采用Html5和Bootstrap框架的免费wordpress主题
▪ 快速为wordpress网站开发对外的数据接口
▪ WordPress升级遇到Briefly unavailable for scheduled maintenance解决办法
▪ 利用Bootstrap构建你的响应式WordPress主题( 七)
▪ 提升WordPress 国外主题打开速度全面解决方案
▪ wordpress4.4 优化wp-json链接、embeds功能
▪ wordpress主循环显示文章列表不同样式的方法
▪ wordpress短代码显示用户注册日期
▪ 自己动手在你的主机上安装wordpress图文教程