WordPress中制作导航菜单的PHP核心方法讲解

WordPress 3.0 引入导航菜单功能, 让页面的导航和链接的管理变得简单易用. WP 向用户提供了菜单管理页面和多种调用方法, 我们先来看一下一般WordPress 的导航菜单都具有哪些功能.

管理菜单页面

页面路径: Appearance > Menus
由从界面来看, 能够创建多个菜单, 并且可以向菜单中添加自定义链接, 页面链接和分类链接.

但有一点需要注意, 如果将页面链接和分类链接加入, 被带入菜单的仅是链接, 而不是页面和分类本身, 也就是说, 子页面和子分类不会成为菜单的一部分.

另外, 我们也不能在菜单中加入别的菜单, 所以这种自定义的菜单注定只存在一级. 在右边排列菜单区块中, 只要将某个菜单往右移一格, 就可以作为下级菜单. 所以是可以创建多级的.
创建菜单后, 我们就可以通过在 Widgets 页面将这些菜单添加到侧边栏上了.

登记自定义菜单

在菜单管理页面中注意到 Theme Locations 区块提示如下:

The current theme does not natively support menus, but you can use the "Custom Menu" widget to add any menus you create here to the theme's sidebar.

意思是说, 现在你的主题不支持自定义菜单, 但可以通过 Widget 的方式将自定义加到主题的侧边栏. 那如何让主题也能支持自定义菜单呢? 请将以下代码加到 function.php 中.

register_nav_menus(array(
 'primary' => 'Primary Navigation'
));

这段代码用于记录一个自定义菜单, 你可以为它选择具体的应用菜单, 其中 primary 应是唯一识别符, Primary Navigation 是菜单的名称. 可以通过这个函数为主题添加多个自定义菜单. 如果在 function.php 添加登记方法如下:

register_nav_menus(array('primary' => 'Primary Navigation'));
register_nav_menus(array('secondary' => 'Secondary Navigation'));
register_nav_menus(array('bottom' => 'Bottom Navigation'));

在菜单管理页面将会看到如下图的内容.

主题调用菜单

在主题中如何调用菜单呢? 在主题的适合位置使用方法 wp_nav_menu();, 向页面输出菜单.
方法中提供参数 theme_location, 用于指定对应的自定义菜单. 如要调用第一个菜单, 则代码如下:

wp_nav_menu(array(
 'theme_location' =>'primary'
));

在默认情况下如果没有定义任何菜单, 使用 wp_nav_menu 方法与 wp_list_pages (调用页面列表) 方法无异, 但效率不及后者. 所以, 如果你准备用页面列表或者分类列表作为导航菜单, 建议不要使用 wp_nav_menu.

用法

在主题调用导航菜单, 方法很简单. 只需加入以下语句在页面上输出菜单.

<?php wp_nav_menu(); ?>

但其实这个方法提供了很多可配置的参数, 下面我们逐一描述.

参数

参数列表来自 WordPress Codex, 下面逐一翻译, 并对不易理解的参数进行详细说明.

$menu
(字符串)(可选) 期望显示的菜单; 接受 (按顺序匹配的) id, slug, name
默认值: None

我们看一下 WordPress 取菜单的方法. 就像 Codex 上的描述一样, 它是按 id, slug, name 的顺序去取的.

function wp_get_nav_menu_object( $menu ) {
 // 没有提供参数, 返回空
 if ( ! $menu )
 return false;

 // 根据 id 找
 $menu_obj = get_term( $menu, 'nav_menu' );

 // 如果找不到, 根据 slug 来找
 if ( ! $menu_obj )
 $menu_obj = get_term_by( 'slug', $menu, 'nav_menu' );

 // 如果还找不到, 再根据 name 来找
 if ( ! $menu_obj )
 $menu_obj = get_term_by( 'name', $menu, 'nav_menu' );

 // 最终没找到, 返回空
 if ( ! $menu_obj )
 $menu_obj = false;

 return $menu_obj;
}

$container
(字符串)(可选) ul 父节点的标签类型
默认值: div

千万不要以为什么标签都可以使用, 事实上只有 div 和 nav 会被采用, 如果输入别的值, ul 父节点的标签将不会显示, 可见 Codex 的描述不够详尽. (从另一个角度看, WordPress 使用 nav 标签说明它正在提升对 HTML5 的支持力度.)

// 被允许使用的标签只有 div 和 nav
$allowed_tags = apply_filters( 'wp_nav_menu_container_allowedtags', array( 'div', 'nav' ) );

$container_class
(字符串)(可选) ul 父节点的 class 属性值
默认值: menu-{menu slug}-container

$container_id
(字符串)(可选) ul 父节点的 id 属性值
默认值: None

$menu_class
(字符串)(可选) ul 节点的 class 属性值
默认值: menu

$menu_id
(字符串)(可选) ul 节点的 id 属性值
默认值: menu slug, 自增长的

$echo
(布尔型)(可选) 决定直接显示菜单还是返回 HTML 片段
默认值: true (直接显示)

$fallback_cb
(字符串)(可选) 如果菜单不存在, 调用的回调函数
默认值: wp_page_menu (显示页面列表作为菜单)

这是一个很重要的方法, 可以通过它去兼容老版本主题. 下面我们看看代码. 关键是 $args 也被传入 call_user_func 中. 例如, 我们将参数 'sort_column'=>'menu_order' 写入 wp_nav_menu 的参数, 那它同样会被传到 call_user_func 方法中. 如果 call_user_func 是 wp_page_menu 方法, 那么显示的页面列表将以认为赋予的序号来排序输出.

// 如果找不到指定菜单, 或者菜单不存在任何条目并没有指定自定义菜单, 使用 call_user_func 方法来进行处理
if ( ( !$menu || is_wp_error($menu) || ( isset($menu_items) && empty($menu_items) && !$args->theme_location ) )
 && ( function_exists($args->fallback_cb) || is_callable( $args->fallback_cb ) ) )
 return call_user_func( $args->fallback_cb, (array) $args );

$before
(字符串)(可选) 显示在每个菜单链接前的文本
默认值: None

$after
(字符串)(可选) 显示在每个菜单链接后的文本
默认值: None

$link_before
(字符串)(可选) 显示在每个菜单链接文本前的文本
默认值: None

$link_after
(字符串)(可选) 显示在每个菜单链接文本后的文本
默认值: None

我怀疑 Codex 对 $before 与 $link_before, $after 与 $link_after 的描述是不是倒过来了?

$depth
(整型)(可选) 显示菜单的深度, 当数值为 0 时显示所有
默认值: 0

$walker
(字符串)(可选) 自定义的遍历对象
默认值: None

$theme_locaton
(字符串)(可选) the location in the theme to be used--must be registered with register_nav_menu() in order to be selectable by the user
默认值: None

如果主题在 function.php 中登记了 3 个自定义菜单, 如下:

register_nav_menus(array('primary' => 'Primary Navigation'));
register_nav_menus(array('secondary' => 'Secondary Navigation'));
register_nav_menus(array('bottom' => 'Bottom Navigation'));

要调用 Secondary Navigation 这个导航菜单, 则可以在 header.php 文件里使用以下语句:

wp_nav_menu(array(
 'theme_location' =>'secondary'
));

也就是说, 这是用来指定调用某个自定义菜单的.

(0)

相关推荐

  • WordPress导航菜单的滚动和淡入淡出效果的实现要点

    滚动导航菜单 滚动菜单, 顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事件的时候改变菜单的透明度, 而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理, 并难在什么地方. 初期化处理 为了处理更加灵活, 我们需要为它定义一个作为参数的滑动速度, 也就是每一个单位时间间隔, 菜单高度的改变幅度. 另外, 我们需要将菜单的初始高度定为 0. // 速度

  • 在WordPress中获取数据库字段内容和添加主题设置菜单

    get_option() 函数使用技巧 get_option()这个函数,实际上我们在整合后台功能的时候经常会用到的一个函数,主要用来从 WordPress 博客数据库 option 表中取得我们想要的字段内容的一个函数,在目前大部分的主题中,只要是主题集成了后台控制页面,也大都用到了这个函数,虽然 WP 给了我们很多方法去临时存储我们对主题的设置,但是用比较稳定的数据库去存储主题设置还是大部分主题作者的首选. get_option() 函数的解释.用法网上还是有很多中文文献的,包括官方文档该函

  • WordPress中给文章添加自定义字段及后台编辑功能区域

    add_post_meta add_post_meta 函数是 WordPress 中用来给文章或页面添加自定义字段值的一个函数, 其用法与在编写文章时在文章编写界面中利用自定义栏目面板为文章添加自定义字段值的效果是一样的. add_post_meta函数描述 为文章添加自定义字段. 常见的使用有:文章浏览次数.喜欢按钮.seo插件等常用插件就是使用的自定义字段功能. 参数详解 add_post_meta($post_id, $meta_key, $meta_value,$unique); $p

  • 在WordPress的后台中添加顶级菜单和子菜单的函数详解

    添加设置页面-add_menu_page函数 add_menu_page(),这个函数是往后台添加顶级菜单先,也就是和"外观"."插件"等一样的顶级菜单. 函数介绍如下: <?php add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); //page_title页面title标签信息 //$menu_title 菜

  • WordPress开发中自定义菜单的相关PHP函数使用简介

    函数意义 wp_nav_menu () 自定义菜单显示函数 register_nav_menu () 自定义菜单注册函数 – 单数 register_nav_menus () 自定义菜单注册函数 – 复数 (很蛋疼的一个复数形式) 以下举例均用 register_nav_menus () 这个复数形式,以免混淆. 使用位置 register_nav_menus () function.php 文件中,用于注册自定义菜单在后台的代码调用名称和后台显示名称. wp_nav_menu () 主题任意你

  • WordPress中注册菜单与调用菜单的方法详解

    register_nav_menus()(注册菜单) register_nav_menus() 函数用来注册一个菜单,菜单指的是 WordPress 3.0+ 的菜单管理器,注册之后用户就可以在菜单管理器里拖动生成导航菜单了. 用法 register_nav_menus( $locations ); 参数 $locations (数组)(必须)要注册的菜单,键值为菜单 ID,键名为菜单名称,可以一次创建多个. 默认值:None 返回值 该函数无返回值. 例子 /** *建立菜单 *http://

  • 整理的一些实用WordPress后台MySQL操作命令

    不过假设你的WordPress网站上有成百上千篇文章,而你需要进行全站范围的改动, 这时从后台逐条编辑就有点费时费力了,并且犯错的几率也会提高. 最好的方法是进入WordPress的MySQL数据库执行必要的查询(改动). 通过MySQL可以迅速地完成以上任务,为你节省更多时间. 下面要介绍的就是一些省时省力的WordPress SQL查询方法. 事先备份 WordPress数据库里存储了你精心发表的每一篇文章,来自你的读者的所有评论,以及你对自己网站进行的所有个性化设置. 因此,无论你对自己有

  • WordPress中自定义后台管理界面配色方案的小技巧

    WordPress 3.8 开始的全新设计的后台支持多颜色选择,默认有八种非常精美的配色,可以让用户自己选择. 关于配色 WordPress 提供了一个函数 wp_admin_css_color() 可以让开发者自定义配色,只需要调用一下这个函数即可完成所有的注册操作. 参数 wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = array() ); $key(string):颜色的 ID $name(string)

  • 给WordPress的编辑后台添加提示框的代码实例分享

    WordPress 3.5 新添加了一个提示框功能,可以创建一个提示框,然后指向任何元素,比如下边的例子: 本文就来教你怎么创建一个这样的提示框. 首先需要添加提示框的脚本,这样才能使用提示框的 JS 方法. //挂载提示框脚本 function Bing_admin_pointer_enqueue_scripts(){ wp_enqueue_style( 'wp-pointer' ); wp_enqueue_script( 'wp-pointer' ); } add_action( 'admi

  • wordpress主题支持自定义菜单及修改css样式实现方法

    自己在制作wordpress主题的时候遇到这个问题,并且遇到了css样式错误,其实很简单,操作如下: 在主题中functions.php中加入: register_nav_menus( array( 'menu' => __( 'menu', '' ), ) ); 在主题导航栏贴上导航代码: <?php wp_nav_menu( 'id=navbar' ); ?> 但是出现了css样式错误: 原来这个函数输出的是下面的格式: 复制代码 代码如下: <div id="men

  • 以JavaScript来实现WordPress中的二级导航菜单的方法

    导航菜单 导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加. WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单. 可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单. 这是效果演示 既

  • 关于bluehost空间上wordpress后台变为英文的解决方案

    "在64位空间上安装wordpress会出不汉化的情况",这是Wordpress的自身bug,问题的出在是Wordpress在64位的CPU下(linux)运行时,由于PHP-gettext解析.mo语言文件文件出现错误,以导致Wordpress在使用中文版本时失败,并不是传说中的bluehost禁用了.mo格式文件.官方尚未出新的升级版本,我们可以通过修改\wordpress\wp-includes\gettext.php这个文件代码来实现. 根据wordpress版本不同,有两套方

随机推荐