您好,欢迎来到菜鸟吧源码网(www.cniao8.com)本站只做精品网站源码!
  • 首 页
  • 菜鸟云
  • 公告:本站资源均来源于互联网及会员投稿发布,所有资源仅供学习参考研究使用,请勿商用或其它非法用途,商用请购买正版,否则产生一切后果由用户自行承担!谢谢!

     

    当前位置:主页 > 站长学堂 > WP教程 >
    本文介绍了wordpress中自定义菜单制作详细教程
    时间:2019-10-15 15:49 作者:菜鸟吧 浏览:收藏 挑错 打印

    本文介绍了wordpress中自定义菜单制作详细教程

    要想实现自定义菜单,需要用到的函数是wp_nav_menu(),给这个函数传递一些参数就可以输出自定义菜单菜单,下面简单讲讲如何使用使用这个函数。
    首先,在主题目录下的functions.php的 <?php &hellip;.. ?> 之间,添加以下菜单注册代码,这样你就可以在主题文件中使用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 项为你在后台 &ndash; 外观 &ndash; 菜单添加的栏目,如果你还没有在后台添加菜单,导航栏将列出所有页面。另外,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>

    郑重声明:
    本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
    我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。
    如有侵犯您的版权,请给我们来信:admin@cniao8.com,我们尽快处理。

    最新版WordPress小工具制作最新版WordPress小工具制作
    wordpress评论插件修改美化评论内容评论wordpress评论插件修改美化评论内容评
    用wordpress制作网站的遇到的问题总结用wordpress制作网站的遇到的问题总结