• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress CMS主题如何自定义导航菜单?

    wordpress CMS主题如何自定义导航菜单?

    作者: 分类:wordpress CMS主题制作 点击: 452 次
    wordpress CMS主题:ssmay主题

      一个网站的导航菜单可能有好多个:顶部导航菜单、主导航菜单、底部导航菜单等。所以,在开发wordpress CMS主题时,我们就要考虑到如何自定义这些导航菜单。令人喜悦的是,wordpress就提供了这方面的函数。下面,来看看我们如何让wordpress CMS主题有自定义导航菜单。

      第一步:注册创建自定义导航菜单

      wordpress为我们提供了一个注册自定义导航的函数:register_nav_menus(),参数是一个数组。我们在wordpress主题的functions.php文件中添加如下代码:

      //注册自定义导航菜单
      register_nav_menus( array(
      'top_menu' => '顶部导航',
      'header_menu' => '主导航',
      'footer_menu' => '底部导航菜单',
      'mobile_menu' => '手机端菜单',
      ));

      上面的代码注册了4个自定义导航菜单,其中 'top_menu'  、 'header_menu' 、 'footer_menu'、 'mobile_menu'分别是这4个菜单的“键key”,这个键很有用,在我们调用这些菜单的时候会用到。而后面的 '顶部导航' 、 '主导航'、 '底部导航菜单'、 '手机端菜单' 是对这个菜单的描述,会在wordpress主题后台的【 外观 - 菜单 】中显示出来(如下图)。

      wordpress CMS主题如何自定义导航菜单?

      第二步:在模板文件中调用这些注册好的导航菜单

      wordpress为我们提供了调用自定义导航菜单的函数:wp_nav_menu(),参数是一个数组。比方说,我们要在header.php文件中调用【主导航】菜单,代码如下:

      wp_nav_menu( array(
      'container' => '',
      'theme_location' => 'header_menu',  //这里的header_menu就是注册菜单中的key键名
      'items_wrap' => '%3$s',
      'fallback_cb' => ''
      ) );

      这样,我们就可以调用上面注册好的header_menu的主导航菜单了。以上,我们只是为wordpress CMS主题添加了自定义导航菜单的功能,我们要想让这些个菜单在前面页面显示,我们还要在wordpress主题后台设置菜单,如何设置菜单,请参阅 新手建站12:wordpress后台之添加导航菜单

      wp_nav_menu()的数组参数详解:

      $echo:默认值: true (直接显示)。确定直接显示导航菜单还是返回 HTML 片段,如果想将导航的代码作为赋值使用,可设置为false。

      $fallback_cb:默认值: wp_page_menu (显示页面列表作为菜单)用于没有在后台设置导航时调的回调函数。

      $theme_locaton:调用导航菜单时指定注册过的某一个导航菜单名(键名),如果没有指定,则显示第一个。

      $menu:使用导航菜单的名称调用菜单,可以是 id, slug, name (按顺序匹配的) 。

      $items_wrap:默认值: None。使用字符串替换修改ul的class。

      $depth:默认值: 0。显示菜单的深度, 当数值为 0 时显示所有深度的菜单。

      $before:默认值: None。显示在每个菜单链接前的文本。

      $after:默认值: None。显示在每个菜单链接后的文本。

      $link_before:默认值: None。显示在每个菜单链接文本前的文本。

      $link_after:默认值: None。显示在每个菜单链接文本后的文本。

      $container:默认值div。ul的父节点(这里指导航菜单的容器)的标签类型,只支持div 和 nav 标签。

      $container_class:默认值: menu-{menu slug}-container。ul 父节点的 class 属性值。

      $container_id:默认值: None。ul 父节点的 id 属性值。

      $menu_class:默认值: menu。ul 节点的 class 属性值。

      $menu_id:默认值: menu slug, 自增长的。ul 节点的 id 属性值。

      开发wordpress CMS主题时,肯定会用到自定义导航菜单,所以,这里就做一下总结。

       



      QQ二维码

    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201807055846.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    2条回应:“wordpress CMS主题如何自定义导航菜单?”

    1. gao说道:

      开发wordpress CMS主题时,肯定会用到自定义导航菜单

    2. steam说道:

      原来wordpress导航菜单是这样的呀?

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.