• 售前

  • 售后

热门帖子
入门百科

wordpress制作自定义菜单的方法

[复制链接]
戏做顿 显示全部楼层 发表于 2021-8-15 19:51:50 |阅读模式 打印 上一主题 下一主题
要想实现自界说菜单,须要用到的函数是wp_nav_menu(),给这个函数传递一些参数就可以输出自界说菜单菜单,下面简单讲讲如何利用利用这个函数。
起首,在主标题录下的functions.php的 <?php ….. ?> 之间,添加以下菜单注册代码,这样你就可以在主题文件中利用wp_nav_menu函数了:

复制代码代码如下:
// This theme uses wp_nav_menu() in one location.
register_nav_menus();

接着我们在主题的导航栏处调用wp_nav_menu(),即可输出导航菜单HTML代码:

复制代码代码如下:
<?php
    // 列出顶部导航菜单,菜单名称为mymenu,只列出一级菜单
    wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) );
?>
     以上代码输出的HTML代码形式如下:
<div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

这里列出的 li 项为你在配景 – 外观 – 菜单添加的栏目,如果你还没有在配景添加菜单,导航栏将列出所有页面。别的,wp_nav_menu会为每个 li 添加class,差别的class标记这个菜单项的属性,如当前打开的是某个文章页面,分类A 就是这篇文章所属的分类,那么 分类A 所在的 li 将会如下代码所示:

复制代码代码如下:
<li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

     如果是在首页,那么首页的菜单项的 li 可能会如下所示:

复制代码代码如下:
<li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" 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 的形式来构建菜单列表:如:

复制代码代码如下:
<ul>
    <li class="..">...</li>
    <li class="..">...</li>
</ul>

如果主题的前端代码不是你写的,而且导航栏的代码写得很龟毛,这根本不是上面的WordPress标准的 ul 导航栏形式,如下面的代码:

复制代码代码如下:
<dl>
    <dt><strong>标题</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜单A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作