加载中 ...
首页 > 建站 > 经验 > 正文

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

2019-02-11 09:37:53 来源:

尽人皆知,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”。

container_class: 上面的容器的class属性。若是设置为nav,则输出成果为.....,本例中我们利用“warp”

container_id: 上面的容器的id属性。若是设置为menu,则输出成果为.....

menu_class:无序列表ul的class属性。本例中我们设置为“ddsmoothmenu”,则输入成果为

    .....

menu_id:无序列表ul的id属。若是设置为“menu-item”,则输出成果为

    .....
本例中我们利用“nav”

echo: 是不是显示菜单。若是设置为false,则不显示菜单。

fallback_cb: 菜单没法显示时的提醒信息。好比:菜单未找到。

before, after:包括标签容器的名称,若是设置为:则输出成果为:.....

link_before, link_ after: 包括链接文字的标签名称,若是设置为:则输出成果为:链接文字

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代码:

  • 示例页面2

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

    • 实例页面3

    • 文章分类1

    • 示例页面4

    • 示例页面5

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

如许,我们的下拉菜单就建造完成了,只要恰当的美化一下便可,至于CSS代码,相信伶俐的你必定可以写出来。

本文由Wper.So原创,如需转载还请注明原文出处,感谢列位亲,原文地址:http://www.wper.so/how-to-create-a-dropdown-menu-for-wordpress/

“广域创业网”的新闻页面文章、图片、音频、视频等稿件均为自媒体人、第三方机构发布或转载。如稿件涉及版权等问题,请与

我们联系删除或处理,客服邮箱,稿件内容仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同

其观点或证实其内容的真实性。