文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

WordPress怎么制作主题导航菜单

2023-02-23 11:29

关注

这篇“WordPress怎么制作主题导航菜单”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“WordPress怎么制作主题导航菜单”文章吧。

WP 3.0自定义菜单的制作

WordPress 3.0之后的版本开始支持自定义动态菜单,所谓的动态菜单,也就是允许用户自行决定将哪些项目添加到导航菜单中,进入WordPress的管理后台 - 外观 - 菜单栏目,通过拖拉相应的栏目,即可创建自己的菜单。这对于WordPress主题开发者和使用者来说,都是皆大欢喜的事情。要想实现自定义菜单,需要用到的函数是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>

以上就是关于“WordPress怎么制作主题导航菜单”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网服务器栏目。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-开源
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯