让代码更简单

当前位置:代码狗 > WordPress > WP建站 > 正文

WordPress调用自定义导航菜单函数wp_nav_menu详解

wp_nav_menu() 是WordPress 3.0 以后添加的一个自定义导航菜单调用函数,可用来调用 register_nav_menus() 注册的菜单。wp_nav_menu()的使用方法位于wp-includes/nav-menu-templates.php文件中。

WordPress教程

WordPress教程

可以通过 <?php wp_nav_menu( $args ); ?> 来调用菜单,其中参数 $args 的默认值如下:

  <?php
    $defaults = array(

    'theme_location'  => '',

    'menu'            => '',

    'container'       => 'div',

    'container_class' => '',

    'container_id'    => '',

    'menu_class'      => 'menu',

    'menu_id'         => '',

    'echo'            => true,

    'fallback_cb'     => 'wp_page_menu',

    'before'          => '',

    'after'           => '',

    'link_before'     => '',

    'link_after'      => '',

    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',

    'depth'           => 0,

    'walker'          => ''

    );
    wp_nav_menu( $defaults ); 
    ?>

每个参数的详细介绍如下:

$theme_locaton:(字符串)(可选)

默认值: None

用于在调用导航菜单时指定注册过的某一个导航菜单名,如果没有指定,则显示第一个。

  wp_nav_menu(array( 'theme_location'   =>'primary')); //调用第一个菜单

$menu:(字符串)(可选)

默认值: None

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

$container:(字符串)(可选)

默认值: div

ul 父节点(这里指导航菜单的容器)的标签类型,只支持div 和 nav 标签, 如果是其它值, ul 父节点的标签将不会被显示。也可以用false(container => false)去掉ul父节点标签。

$container_class:(字符串)(可选)

默认值: menu-{menu slug}-container

ul 父节点的 class 属性值。

$container_id:(字符串)(可选)

默认值: None

ul 父节点的 id 属性值。

$menu_class:(字符串)(可选)

默认值: menu

ul 节点的 class 属性值。

$menu_id:(字符串)(可选)

默认值: menu slug, 自增长的

ul 节点的 id 属性值。

$echo:(布尔型)(可选)

默认值: true (直接显示)

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

$fallback_cb:(字符串)(可选)

默认值: wp_page_menu (显示页面列表作为菜单)

用于没有在后台设置导航时调的回调函数。

$before:(字符串)(可选)

默认值: None

显示在每个菜单链接前的文本。

$after:(字符串)(可选)

默认值: None

显示在每个菜单链接后的文本。

$link_before:(字符串)(可选)

默认值: None

显示在每个菜单链接文本前的文本。

$link_after:(字符串)(可选)

默认值: None

显示在每个菜单链接文本后的文本。

$items_wrap:(字符串)(可选)

默认值: None

使用字符串替换修改ul的class。

$depth:(整型)(可选)

默认值: 0

显示菜单的深度, 当数值为 0 时显示所有深度的菜单。

$walker:(对象型)(可选)

默认值:  new Walker_Nav_Menu

导航菜单注册和调用示例

要想定义出灵活强大的菜单,需要我们熟悉上面介绍的 导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数wp_nav_menu() 。

1.首先我们先要激活 WordPress 3.0 以后的自定义菜单功能,也就是要注册菜单。在主题的 functions.php文件中添加下面的代码:

//添加导航

        register_nav_menus(array(

          'left-menu' => '左边栏菜单',

          'top-menu' => '顶部菜单',

        ));

这样我们就注册了 左边栏菜单 和顶部菜单,你可以在 外观-菜单 中查看到:

shouce.ren-201301303

我们可以使用下面的函数调用 左边栏菜单:

<?php 

      if(function_exists('wp_nav_menu')) {

          wp_nav_menu(array( 'theme_location' => 'left-menu','container_id'=>'menu_left') ); 

      }

    ?>

其中,’theme_location’ 后面的值 是 ‘left-menu’,就是调用前面注册的那个 左边栏菜单,而 ‘container_id’ 自定义为 ‘menu_left’,最终输出的html结构如下:

<div id="menu_left" class="menu-xxx-container">

      <ul class="menu">

        <li><a href="http://www.shouce.ren">首页</a></li>

        <li><a href="http://www.shouce.ren/news">WP资讯</a></li>

        …………

        <li><a href="http://www.shouce.ren/announce">本站相关</a></li>

      </ul>

    </div>

也就是说,菜单使用 <div id=”menu_left”>……</div> 来包含了,接下来,你就可以根据这个 id 来写css美化菜单的显示效果了。

感觉很棒!可以赞赏支持我哟~

赞(2) 打赏

评论 3

  1. #3

    文章不错支持一下

    男装品牌1年前 (2018-10-23)回复
  2. #2

    折腾WordPress的前提就是熟悉一下WordPress相关函数,学习了

    boke112导航1年前 (2018-10-22)回复
  3. #1

    支持博主

    网站建设1年前 (2018-10-22)回复
×

请作者吃根烤肠!

支付宝