1. <div id="11111"></div>

    1. <div id="11111"></div>

      1. <div id="11111"></div>

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

        日期: 标签:WordPress教程,主题制作,企业建站 65 条留言
        如需帮忙改代码,或者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」创作共享协议,转载请标注以下信息:
        原文出处:露兜博客 http://www.szeverich.net.cn/wordpress-create-navigation-menu.html
        露兜
        kaapass@outlook.com  QQ 825533758

        业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

        65 条留言

        点此留言
        1 2 293
        1. Ruijiao

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

        2. kinddylee

          刚刚接触wordpress,感谢作者!

        3. 我爱欧姆定律

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

        4. ITGeeker

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

          • Ludou

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

            • 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 可以参考这篇文章:
                http://www.szeverich.net.cn/wordpress-highlight.html

                • xiaoqi

                  @Ludou 谢谢ludou啦,lol

        6. 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

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

        14. shus

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

          • 露兜

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

        15. 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

          已解决 但是感谢?。?!

        17. 我是你牛大爷

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

        18. 菜鸟

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

          • 露兜

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

        1 2

        发表留言

        可以挣钱的游戏 21| 260| 388| 688| 739| 974| 789| 420| 590| 484| 102| 680| 88| 877| 49| 548| 364| 864| 799| 24| 892| 656| 709| 381| 158| 842| 607| 898| 913| 717| 627| 984| 66| 936| 426| 205|