记录生活 学习SEO优化 | 他日若遂凌云志 敢笑黄巢不丈夫
>>Home > 学习笔记 > WordPress主题使用自定义菜单

WordPress主题使用自定义菜单

Tags: | | 作者:海天无影

新版本的wordpress如果主题支持的话那么在后台-外观-菜单中,可以将我们想要的链接、分类、页面添加到自定义的菜单中,然后在前台直接使用定制的菜单,很是方便。但是由于这是新版的功能,具体是几点几版本,海天也没注意,所以就造成很多老的主题不支持自定义菜单功能,那么老版本wordpress主题怎么使用自定义菜单呢?添加这个功能。也很简单,只需要在两个地方,添加两小段代码就好了。

声明register_nav_menus

首先,需要在主题的 functions.php 文件中,声明一下现在使用的wordpress存在自定义菜单这个功能。只需要在functions.php 文件最后(注意不要破坏花括弧)添加下面一段代码即可:

if(function_exists('register_nav_menus')){
register_nav_menus( array(
'header-menu' => __( 'nav' )
) );
}

这段代码首先判断当前主题是否支持这个功能,然后注册一个名称为nav的自定义菜单。也就是在后台菜单中可以添加自定义菜单的位置。

实现 WordPress 自定义菜单功能这个功能其实有两个函数 register_nav_menu 和 register_nav_menus 顾名思义,第一个函数用于创建一个自定义菜单,第二个函数用于创建多个自定义菜单。两个函数使用大同小异,下面也是根据第二个函数进行讲解。

register_nav_menus 使用方法也很简单,只需要传递一个数组参数即可。

<?php register_nav_menus( $locations ); ?>

这个数组是必选参数,定义自定义菜单的位置标记(键名)和位置描述(键值)。例如:

register_nav_menus( array(
'header-menu' => __( 'topnav' ),
'footer_menu' => 'My Custom Footer Menu'
) );

上面的这段代码,定义了两个自定义菜单,它们的标记(可以随便起)分别为:header-menu、footer_menu。它们后面对应的描述,将会显示在后台的 主题位置 面板上,供你选择。在 ‘header-menu’ => __( ‘nav’ ) 这句代码中,我加了__() 这个函数,它是用于跨语言翻译用的。

添加wp_nav_menu

在主题中添加自定义菜单。在主题中合适的位置,添加下面的函数:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' )); ?>

就是在这里调用名为 header-menu 的自定义菜单位置。而这个自定义菜单位置的名称为 nav,在 WordPress 后台中,新建了一个名为 “顶部导航” 的菜单,然后与这个 nav 进行了关联。那么这句代码就调用了设置的 “顶部导航” 菜单的内容。

这句代码使用了 wp_nav_menu 函数。这个函数也是传递一个数组作为参数,但是这个数字里面的键名比较多。下面根据官方文档的说明选择几个重要的做了一个简单的翻译:

'theme_location' => '',
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'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">%3$s</ul>',
'depth' => 0,
'walker' => ''

'theme_location' => 可选,值为之前在functions.php中 register_nav_menus 传递的数组参数中的键名,进行绑定。默认:无
'container' => 可选,决定是否要对生成的 自定义菜单(ul) 进行包裹,以及使用什么包裹。如果不需要,传递参数 false。默认:div
'container_class' => 可选,为上面包裹的容器添加 class 属性。下面的 container_id 功能类似。
'before' => 可选,在输出的列表中的 a 标签之前添加文本信息。after 功能类似。
'link_before' => 可选,在输出的列表中的链接文字前面加上文字(注意与上面的区别)。link_after 功能类似。
'items_wrap' => 可选,设置包裹自定义菜单的标签形式。默认:<ul id="%1$s">%3$s</ul>,通常不要修改 。

使用方法就是将参数添加进调用的代码里,例如:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu','container' => 'flase', )); ?>

这样我们不仅仅可以用自顶菜单来做导航,还可以在多个位置添加多个菜单。例如可以在底部加一个自定义菜单,这样在后台就可以设置底部的链接等等,功能非常强大。

日志信息 »

该日志于2012-12-27 22:37由 海天无影 发表在学习笔记分类下, 你可以发表评论。除了可以将这个日志以保留源地址及作者的情况下转载到你的网站或博客,还可以通过RSS 2.0订阅这个日志的所有评论。

6条评论▼点击进行评论

  1. 现在坚持写博客的还真少啊 呵呵 你的百度AD怎样啊 给你点点啊 也去给我的意思下啊

    • 呵呵 现在写的很少了的
      百度不行 现在主要靠谷歌
      百度的就挂上去玩玩

  2. 好久没来了,呵呵
    元旦快乐,新年快乐!

  3. 玩博客必须学会的东西

  4. 差点忘了 海天这个好朋友了、 求原谅 元旦快乐哈。 2013加油 :mrgreen:

    • 哈哈 我前几天忙死了 都没时间上网
      今天抽点空
      你也新年快乐啊~2013加油~

      • 嗯、 一起加油哈。

  5. 看起来技术性很强的,来支持一下

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif 

« PureFTPd配置文件的中文翻译 wordpress头部文件的清理 »