WordPress主题导航菜单制作的几种方法(一)

日期: 标签:WordPress教程主题制作企业建站
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我
文章目录

在WordPress主题制作中,导航菜单的制作算是一个重点,已经写好导航菜单的HTML代码,放在WordPress主题中如何动态调用呢?本文将给你介绍几种编写PHP代码动态实现导航的方法,本文也将只侧重于动态代码的开发,不会教你如何编写HTML、CSS和Javascript来实现华丽的导航菜单。

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主题导航菜单制作的几种方法(二)

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/wordpress-create-navigation-menu.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

65 条留言

点此留言
1 2 293
  1. Ruijiao

    二级菜单我还是没有看明白怎么实现,我就想做出例子(集团远景—关于耐舒,页面左上角的子菜单导航的样子,想看看楼主是怎么写的,不知道方便给我这个模版看看嘛?或者针对这一块详细讲解一下呢?)谢谢,麻烦博主了,在这里随时等候解答!!

  2. kinddylee kinddylee

    刚刚接触wordpress,感谢作者!

  3. 我爱欧姆定律 我爱欧姆定律

    现在我的模板不支持二级菜单,学习下…

  4. ITGeeker ITGeeker

    大侠,请教我的这个CSS代码怎么改才能取消当前页面高亮显示,找了好久没搞定,先谢了

    • Ludou

      @ITGeeker 你给类.current_page_item重新定义一下样式就可以了。

      • ITGeeker ITGeeker

        @Ludou 谢谢!具体语句应该怎么写?我这样写没有作用:
        #navigation > li .current_page_item > a {background-color:#ffffff;}

  5. xiaoqi

    hi,Ludou。我想请教下,像你博客导航栏,当点击wordpress后,这个li的背景变白色了,点教程指南,则它背景变白,而wordpress这个li又恢复到和其他一样的样式。想请教这是如何实现的。
    点击后页面是刷新的,单单js操作css样式好像不行。。。是要用到cookie吗?我现在想不到怎么实现,望解惑,谢谢啦

    • Ludou

      @xiaoqi 文章中貌似已经介绍了方法。具体样式请定义文中提到的css的class

      • xiaoqi

        @Ludou 嗯,文章中有提到wp_nav_menu的用法。
        但我自己做的主题没这么规范,而且这个功能我不是加在菜单栏上。
        所以想请问,如何在点击刷新页面后,改变他的样式?

        • Ludou

          @xiaoqi 可以参考这篇文章:
          https://www.ludou.org/wordpress-highlight.html

          • xiaoqi

            @Ludou 谢谢ludou啦,lol

  6. doopaa doopaa

    最近公司接到一个需要制作wordpress主题的项目,而之前我对这个开源程序闻所未闻,网上找了好多资料和教程,无意中进来了这个博客,里面的文章我都看了看对我的帮助帮助挺大的,感谢博主ludou了,博客的一些其他文章也浏览了下,嘿嘿,感觉博主是个真技术流,有机会交个朋友0.0

  7. 小雨

    我添加了新的分类目录,可是在首页不显示,而且在菜单的左下角的分类目中也不显示。我想制作个头部导航,里面既有分类目录又有页面,可是分类目录不显示是怎么回事呢?我用的是3.5.2版本的,望博主帮忙解决!

  8. 美设之家 美设之家

    博主真是个wp界大咖,很多时候找答案都来到你的站点,而且很详细很精辟,赞一个!

  9. xiaomiao

    大大,菜单具体输出什么内容怎么定义的呢,比如注册了一个primary菜单,它具体显示什么东西怎么写,在哪里写的?新手,望能得到解答。

  10. 优团聚 优团聚

    现在我的模板不支持二级菜单,学习下

  11. Hyun

    原文中有“如果你还没有在后台添加菜单,导航栏将列出所有页面。”这样的话,
    我现在遇到这个问题,如果不添加菜单,那么菜单位置就出现页面,请问有没有什么办法,让页面不出现。就是不加菜单的时候也不出现页面,加菜单就显示菜单,求解答,万分感谢。

    • Ludou

      @Hyun 必须加菜单,不然会全都显示页面

      • Hyun

        @Ludou 额,看来还是无法抛弃菜单了,谢谢兜兜

  12. 辰枫网络 辰枫网络

    我这里生成的链接地址有点小问题
    都是类似于 http://www.example.com/./catagory 这种样子,中间多个“./”,只有分类地址是这样,page地址正常。。但是本地测试却没有
    这是为什么?
    代码用的这个wp_nav_menu(array('theme_location' => 'nav', 'echo' => false))

    • 辰枫网络 辰枫网络

      @辰枫网络 知道了~ 我点了分类目录前缀了

  13. ysam ysam

    请问有办法给A标签加上自定义的CLASS吗

  14. shus shus

    为什么我制作导航的时候,点击导航的分类目录,老是在首页,为什么啊

    • 露兜

      @shus 不知道你用的是什么代码。

  15. aoweisi aoweisi

    有个需要
    <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>

    里面的 ul 类是固定的 menu 有没有办法改默认class的类名 或者说添加公用的类名变成:
    <ul class="down-menu nav-menu " id="menu-menu">

  16. aoweisi aoweisi

    已解决 但是感谢!!!

  17. 我是你牛大爷

    傻逼货,整天抄点小豆腐块蒙人,你丫累不累,傻逼哈哈哈

  18. 菜鸟

    博主问一下如果类似这种<li class="navli"><a href="/guanyuwomen/" rel="dropmenu1">关于我们</a></li>li标签有class样式要怎么调用出来呢?

    • 露兜

      @菜鸟 怎么调出来?你在style.css中写css代码就可以了

1 2

发表留言