wordpress制作自定义菜单的方法

青州已过万重山 發表於 2023-9-23 00:00:00

要想实现自定义菜单，需要用到的函数是wp_nav_menu()，给这个函数传递一些参数就可以输出自定义菜单菜单，下面简单讲讲如何使用使用这个函数。 首先，在主题目录下的functions.php的 <?php ….. ?> 之间，添加以下菜单注册代码，这样你就可以在主题文件中使用wp_nav_menu函数了：
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>

复制代码

代码如下:
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
 
// This theme uses wp_nav_menu() in one location. 
register_nav_menus();

 接着我们在主题的导航栏处调用wp_nav_menu()，即可输出导航菜单HTML代码：
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>

复制代码

代码如下:
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
 
<?php 
// 列出顶部导航菜单，菜单名称为mymenu，只列出一级菜单 
wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) ); 
?> 
以上代码输出的HTML代码形式如下： 
<div> 
<ul id="menu-menu"> 
<li id="menu-item-1"><a href="...">首页</a></li> 
<li id="menu-item-2"><a href="...">分类A</a></li> 
... 
</ul> 
</div>

 这里列出的 li 项为你在后台 – 外观 – 菜单添加的栏目，如果你还没有在后台添加菜单，导航栏将列出所有页面。另外，wp_nav_menu会为每个 li 添加class，不同的class标记这个菜单项的属性，如当前打开的是某个文章页面，分类A 就是这篇文章所属的分类，那么分类A 所在的 li 将会如下代码所示：
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>

复制代码

代码如下:
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
 
<li id="menu-item-2"><a href="...">分类A</a></li>

 如果是在首页，那么首页的菜单项的 li 可能会如下所示：
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>

复制代码

代码如下:
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
 
<li id="menu-item-1"><a href="..">首页</a></li> 
从这些class的名称就知道它们的作用，通过给这些class添加css属性，可以达到如高亮当前导航菜单的目的，如将当前菜单链接定义成红色： 
.current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a { 
color: red; 
}

 好了，WordPress 3.0的自定义菜单的调用就是这么简单。wp_nav_menu还有很多参数，如自定义 ul 节点、ul 父节点的id和class的参数等等，详情可以参考文档：官方文档 | 中文文档 使用分类和页面作为导航栏 在 WordPress 3.0 之前，大部分WordPress主题都是拿页面作为导航栏的，导航中只能添加页面，显得不够自由。我刚用WordPress 2.7的时候，就为此问题烦恼，最后翻了文档，查了一些资料，实现了在导航中添加分类，详情请看我之前写的文章：WordPress 分类做导航栏，并高亮显示 非常规导航栏的制作 以上提到的两种方式，都是使用WordPress自带的函数来实现，他们输入的HTML代码也都是限定好的，就是使用 ul li 的形式来构建菜单列表：如：
<blockquote>
<ol>
<li>
<ul> 
</li>
<li>
<li class="..">...</li> 
</li>
<li>
<li class="..">...</li> 
</li>
<li>
</ul> 
</li>
</ol>
</blockquote>

如果主题的前端代码不是你写的，而且导航栏的代码写得很龟毛，这根本不是上面的WordPress标准的 ul 导航栏形式，如下面的代码：
<blockquote>
<ol>
<li>
<dl> 
</li>
<li>
<dt>标题</dt> 
</li>
<li>
<dd><a target="_blank" title="#" href="#">菜单A</a></dd> 
</li>
<li>
<dd><a target="_blank" title="#" href="#">菜单B</a></dd> 
</li>
<li>
</dl> 
</li>
</ol>
</blockquote>

頁: [1]

琼殿技术论坛's Archiver

wordpress制作自定义菜单的方法