您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程
WordPress开启导航菜单功能的实现方法
钟召云2025-03-17WordPress教程已有人查阅
导读步骤一:开启导航菜单功能。步骤二:在后台创建菜单,并设置菜单项目,将菜单项目和第一步注册的菜单建立关系。步骤三:早模版文件中调用导航菜单
步骤一:开启导航菜单功能
步骤二:在后台创建菜单,并设置菜单项目,将菜单项目和第一步注册的菜单建立关系
步骤三:早模版文件中调用导航菜单
1/默认版:
3/完整版参数:
theme_location 导航别名,如步骤一functions.php设置的:header_menu
menu 期望显示的菜单
container_id ul父节点id值
container_class ul父节点class值
menu_class ul节点class值
menu_id ul节点id值
before 菜单链接前的文本
after 菜单链接后的文本
link_before 每个菜单链接文本前的文本
link_after 每个菜单链接文本后的文本
depth 菜单深度
container false 时去除div标签
items_wrap 值为 '%3$s' 去ul保持li不变
控制当前样式:
.current-menu-item{...}
<?php
/*
register_nav_menu( $location, $description )
函数功能:开启导航菜单功能
@参数 string $location, 导航菜单的位置
@参数 string $description, 导航菜单的描述
开启多个位置的导航菜单,只需要重复调用此函数即可
*/
register_nav_menu( 'header-menu', '我的顶部导航' ); //注册一个菜单
?>
多个菜单可以这样写
<?php
register_nav_menus( array(
'header_menu' => '我的顶部导航',
'footer_menu' => '我的底部导航'
) );
?>
如果使用钩子
/*----------------
开启自定义菜单
----------------*/
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => '我的顶部导航',
'footer-menu' =>'我的底部导航',
'top-nav'=>'网站上部导航'
)
);
}
add_action( 'init', 'register_my_menus' );
然后后台就会出现步骤二:在后台创建菜单,并设置菜单项目,将菜单项目和第一步注册的菜单建立关系
步骤三:早模版文件中调用导航菜单
1/默认版:
<?php wp_nav_menu(); ?>
2/简单版:
<?php wp_nav_menu(array( 'menu' => 'nav', 'depth' => 1,'menu_class'=>'navcontainer')); ?>
获取的菜单名称为nav,只列出一级菜单,样式名为navcontainer3/完整版参数:
wp_nav_menu( array(
'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
'walker' => ''
) );
参数说明:theme_location 导航别名,如步骤一functions.php设置的:header_menu
menu 期望显示的菜单
container_id ul父节点id值
container_class ul父节点class值
menu_class ul节点class值
menu_id ul节点id值
before 菜单链接前的文本
after 菜单链接后的文本
link_before 每个菜单链接文本前的文本
link_after 每个菜单链接文本后的文本
depth 菜单深度
container false 时去除div标签
items_wrap 值为 '%3$s' 去ul保持li不变
控制当前样式:
.current-menu-item{...}
本文标签:
很赞哦! ()
相关教程
图文教程
在linux下安装wordpress的方法示例
win下的简直傻瓜式操作:xampp打包一键安装linux下的考虑到一些权限问题 还是有点蛋疼的 现在把流程贴出来做下记录:linux下安装xampp和wordpress的流程×由于linux下没有截
wordpress获取某个栏目链接地址的实现方法
wordpress获取某个分类的链接地址的两种方法,本文将详细介绍,需要了解的朋友可以参考下通过get_category_link() 获取分类文章的链接URL
WordPress怎么禁用表情符号
WordPress Emoji 的实现将调用 http:// sworg / images / core / emoji / 72x72 / 来渲染 Emoji,并且在中国无法访问此地址
wordpress乱码的解决方法
1、修改“wp-config.php”文件里的“define(’DB_CHARSET’, ‘utf8′);”为“define(’DB_CHARSET’, ”);”;2、把新数据库的编码设置成“latin1_swedish_ci”;
相关源码
-
(PC+WAP)绿色日志美文文学说说博客网站pbootcms模板除日志博客类网站外,通过替换图文内容可快速适配:心情日记分享平台、文学创作社区、朋友圈内容聚合站、美文鉴赏网站、读书笔记平台等应用场景。查看源码 -
(自适应)html5宽屏电线电缆材料加工制造类企业网站源码下载本模板基于PbootCMS系统开发,特别适合电线电缆、电缆材料及相关加工制造类企业使用。采用HTML5宽屏设计,能够展示各类电缆产品的技术参数和规格详情,帮助客户全面了解产品特性。查看源码 -
(PC+WAP)蓝色公司注册财务会计公证律师网站源码下载本模板基于PbootCMS内核开发,为财务会计事务所、律师公证机构等专业服务机构打造。采用自适应设计,确保在各类设备上都能呈现专业视觉效果,帮助机构建立值得信赖的线上形象。查看源码 -
自适应电子科技类产品公司pbootcms网站模板基于PbootCMS内核开发,为电子科技类企业设计,适用于电子产品展示、企业官网等场景。该模板采用开源架构,用户可自由访问和修改源码,灵活适配各类行业需求,无需二次开发成本查看源码 -
html5响应式pbootcms模板新闻资讯博客网站源码该模板采用PbootCMS内核开发,专为新闻资讯类网站打造,同时具备高度行业适配性--只需替换图文内容即可快速转型为企业官网、行业门户等各类站点。查看源码 -
(自适应)蓝色沙盘复古建筑模型制作网站模板源码下载为建筑沙盘模型企业设计的响应式网站模板,通过三维空间展示技术结合产品参数可视化,有效提升模型作品的线上呈现效果与客户咨询转化率。查看源码
| 分享笔记 (共有 篇笔记) |

