WordPress自定义菜单wp_nav_menu

wordpress可以自定义导航菜单。

激活WordPress自定义菜单wp_nav_menu

在你的functions.php文件中添加如下代码:

上述代码中,我们定义了一个名叫"header-menu"的主题位置。名称叫"headnav"

添加自定义菜单

进入后台 外观 - 菜单 - 创建菜单,菜单名称我命名为"顶部导航",然后在左侧勾选你要添加的栏目,选好后点击“添加到菜单。”,下边有个“主题位置”,就是我们刚才在functions.php中定义的“header-menu”。如果是二级栏目可以点击相应的栏目,向右移动一个位置,如下图的“售后服务”

wordpress新建菜单

自定义菜单高级设置

WordPress菜单隐藏了一些功能,如果你想控制菜单更多的属性,不妨点击屏幕右上角的“显示选项”,让隐藏的功能都显示出来:

wordpress菜单高级选项

我们随意点击一个栏目右侧的“小三角”,比如我点击“联系我们”,会出现以下设置

wp自定义菜单属性

  • 导航标签 - 就是链接的文字
  • 标题属性 - 就是a标签的title属性值,比如上图填写”联系方式”
  • CSS类 - 给某个菜单项添加class,通过css是这个菜单项与众不同,如上图我添加了“contact”
  • 链接关系网 - 通过链接关系网(XFN)给菜单添加rel属性,例如不想搜索引擎跟随这个菜单,可以为其添加rel="nofllow"属性
  • 链接目标 - 控制菜单打开方式,在新窗口打开(target="_blank")或在当前窗口打开(默认)。

按上述设置,前台模板会自动输出如下格式代码:

 

调用自定义菜单

我们在前台调用自定义菜单需要用到“wp_nav_menu”函数。

在你需要的位置添加如下代码

上述代码根据你网站的css自行调用,我的导航栏格式如下:

完整的wp_nav_menu格式如下:

<?php wp_nav_menu(
array(
'theme_location' => 'header-menu',
'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' => ''

) ); ?>

详细参数:

$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

Tags:
飞鱼

发表评论

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