您现在的位置是:首页 > 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{...}
本文标签:
很赞哦! ()
相关教程
图文教程
wordpress图片存放位置在哪里
如果您通过WordPress后台直接上传图片,那么这些上传的图片就会被默认存储到"wp-content/uploads"文件夹里面——除非您对默认设置进行更改。
怎么打开Wordpress调试模式进行测试
下面由代码号给大家介绍如何Wordpress打开调试模式,希望对需要的朋友有所帮助!Wordpress打开调试模式:
WordPress搬家数据迁移的方法
用本地环境搭建好的WordPress网站在做好之后如何从本地迁移到网络空间或者网络服务器上呢?首先请确认你在本地建站的时候只做了themes里面的模版文件,如果只是自己改了下模版
WordPress主题制作之index.php制作方法
前面我们已经制作完成博客所有公用页面sidebar.php、footer.php和header.php,今天开始我们就要制作单独的页面了。现在我们要制作的是索引页index.php
相关源码
-
(PC+WAP)生活资讯百科新闻门户类pbootcms网站模板为生活资讯、百科门户类企业打造的高性能网站模板,基于PbootCMS开源内核开发,采用HTML5响应式架构,PC与手机端实时数据同步,覆盖全终端用户浏览场景。查看源码 -
(自适应)科技产品设备技术作品pbootcms网站模板带下载和招聘基于PbootCMS内核开发的高端科技企业模板,采用响应式布局技术,适配各类移动终端设备。模板设计聚焦科技行业特性,通过模块化结构实现企业形象展示、技术成果发布与人才招募等核心需求查看源码 -
(自适应)五金配件机械加工设备pbootcms模板免费下载这款基于PbootCMS开发的网站模板为五金配件和机械加工行业设计,采用简洁有力的设计风格,突出工业产品的专业性和可靠性。模板结构清晰,功能完善,能够有效展示各类工业产品的技术参数和应用场景。查看源码 -
自适应营销型IT网络工作室互联网建站公司pbootcms网站模板为IT网络服务商、建站企业打造的高性能营销门户,基于PbootCMS开源内核深度开发采用HTML5自适应架构,实现PC与手机端数据实时同步交互。查看源码 -
(自适应多语言)WordPress开源主题MirageV资讯个人博客源码MirageV资讯类个人博客主题源码/WordPress主题/全开源MirageV 是一款开源的 WordPress 主题,支持自适应、暗黑模式、多语言等功能,查看源码 -
(自适应响应式)投资理财金融机构财务管理pbootcms模板本模板基于PbootCMS系统开发,为投资理财、金融机构等行业设计。采用专业严谨的布局风格,突出金融服务行业特色,适合展示各类理财产品、投资服务和金融资讯。查看源码
| 分享笔记 (共有 篇笔记) |

