用Bootstrap菜单样式替换你的WordPress菜单

   日期:2020-09-21     浏览:88    评论:0    
核心提示:Bootstrap菜单样式灵活多样,如果你的Wordpress主题是采用Bootstrap框架开发的,你想换掉它的导航样式的话,这篇文章将对我们有一定的帮助。或者你正在开发一个Bootsrap框架的Wordpress主题,在替换wp_nav_menu样式上,是比较麻烦,这篇文章对我们一定会有很大的帮助。一、加载第三方插件代码首先下载歪果仁开源的WordPress下生成Bootstrap导航条HTML代码文件:百度网盘下载wp_bootstrap_navwalker.php,放到主题根目录里,或者..

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图文教程 

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服