为WordPress主题制作下拉菜单详解

2019-03-27 08:55:40来源： wper.so 阅读 ()

众所周知，WordPress3.0中增加了一个非常实用方便的自定义菜单功能，这个功能可以使我们轻松的制作出多级下拉菜单，今天，笔者就通过一个简单的二级下拉菜单的示例来告诉各位童鞋具体怎么操作。

Step 1 — 在functions.php中添加以下代码，使我们的主题支持自定义菜单功能。

add_theme_support（‘nav-menus’）;

Step 2 — 添加一个顶部菜单。

if （ function_exists（ ‘register_nav_menus’ ）） {

register_nav_menus（

array（

‘header_menu’ => ‘Header Navigation’

）

）;

}

Step 3 — 把wp_nav_menu()函数放到一个自定义函数当中.

function wper_so_menu（）{

if（function_exists（‘wp_nav_menu’） && has_nav_menu（‘header_menu’））：

wp_nav_menu（

array（

‘menu’ => ‘Header Navigation’,

‘container’ => ‘div’,

‘container_class’ => ‘warp’,

‘container_id’ => ‘’,

‘menu_class’ => ‘ddsmoothmenu’,

‘menu_id’ => ‘nav’,

‘echo’ => true,

‘fallback_cb’ => ‘fallback_no_menu’,

‘before’ => ‘’,

‘after’ => ‘’,

‘link_before’ => ‘’,

‘link_after’ => ‘’,

‘depth’ => 2,

‘walker’ => new Walker_Nav_Menu（）,

‘theme_location’ => ‘’,

‘show_home’ => true

）

）;

endif;

}

这里我解释一下wp_nav_menu()函数的各个参数。这个函数的功能就是显示一个自定义导航菜单(官方文档)：

menu：我们创建的菜单名称。本例中我们使用“Header Navigation”

container：我们创建的菜单所在容器的名称。如果设置为“div”，则输出结果为<div>.....</div>，本例中我们使用“div”。

container_class：上面的容器的class属性。如果设置为nav，则输出结果为<div class=“nav”>.....</div>，本例中我们使用“warp”

container_id：上面的容器的id属性。如果设置为menu，则输出结果为<div id=“menu”>.....</div>

menu_class：无序列表ul的class属性。本例中我们设置为“ddsmoothmenu”，则输入结果为<ul class=“ddsmoothmenu”>.....</ul>

menu_id：无序列表ul的id属。如果设置为“menu-item”，则输出结果为<ul id=“menu-item”>.....</ul>本例中我们使用“nav”

echo：是否显示菜单。如果设置为false，则不显示菜单。

fallback_cb：菜单无法显示时的提示信息。比如：菜单未找到。

before， after：包含<a&>标签容器的名称，如果设置为：<span>和</span>则输出结果为：<span><a>.....</a></span>

link_before， link_ after：包含链接文字的标签名称，如果设置为：<em>和</em>则输出结果为：<a><em>链接文字</em></a>

depth：下拉菜单的深度，本例中我们设置为：2，则只支持两级下拉菜单。默认为0，即无限级下拉菜单。

walker：自定义的遍历对象，调用一个对象定义显示导航菜单。默认为：new Walker_Nav_Menu（）

theme_location：后台菜单页面中包含菜单名称的容器的ID.

show_home：布尔型值，是否显示首页。

Step 4 — 在header.php中的适当位置调用我们的自定义函数.

Step 5 — 现在我们的主题已经支持一个自定义菜单了，接下来利用jQuery实现下来菜单的动画效果。加载jQuery库是必须地！

所用到的jQuery代码：

（function（$） {

$（function（） {

$（document）.ready（function （） {

$（‘#nav li’）.hover（

function （） {

//显示二级菜单，括号中的数字表示下拉菜单完全显示出来需要200毫秒。

$（‘ul’， this）.slideDown（200）;

},

function （） {

//隐藏二级菜单

$（‘ul’, this）.slideUp（150）;

}

）;

）;

}）;

}）（jQuery）;

最后，我们得到如下HTML代码：

<div class=“warp”>

<ul id=“nav” class=“ddsmoothmenu”>

<li id=“menu-item-6” class=“menu-item .... menu-item-6”>

<a href=“http://localhost/？page_id=2”>

<span><em>示例页面2</em></span>

</a>

<！-- 二级下拉菜单 -->

<ul class=“sub-menu”>

<li id=“menu-item-36” class=“menu-item .... menu-item-36”>

<a href=“http://localhost/？page_id=3”>

<span><em>实例页面3</em></span>

</a>

</li>

<li id=“menu-item-54” class=“menu-item .... menu-item-54”>

<a href=“http://localhost/？cat=1”>

<span><em>文章分类1</em></span>

</a>

</li>

<li id=“menu-item-55” class=“menu-item .... menu-item-55”>

<a href=“http://localhost/？page_id=4”>

<span><em>示例页面4</em></span>

</a>

</li>

<li id=“menu-item-56” class=“menu-item ..... menu-item-56”>

<a href=“http://localhost/？page_id=5”>

<span><em>示例页面5</em></span>

</a>

</li>

</ul>

<！-- 二级下拉菜单结束 -->

</li>

</ul>

</div>