您的位置:首页»WordPress 教程, 进阶使用»  wp_page_menu 函数使用详解

wp_page_menu 函数使用详解

在这篇文章中,我们将一起探讨 wp_page_menu 函数高级用法,如:

  1. WordPress 页面多级菜单
  2. WordPress 页面副标题
  3. WordPress 页面链接分类
  4. WordPress 动态菜单

WordPress 页面多级菜单
使用 wp_page_menu 函数实现 WordPress 多级页面菜单非常容易,只需添加以下代码即可:

1
2
<?php wp_page_menu('exclude=1,2,3&menu_class=menu menu-primary'); ?>
<?php wp_page_menu('include=1,2,3&menu_class=menu menu-secondary'); ?>

虽然,我也可以使用 wp_list_pages 函数实现多级下拉菜单,但那样的话,CSS 样式会相当复杂,不如 wp_page_menu 函数来得简洁明了。
WordPress 页面副标题
WordPress 多级页面菜单
正如上图所示,有时我们需要为 WordPress 页面链接增加一些文字说明。以往,我们通常得手动修改,现在,我们可以使用 WordPress 自定义字段(custom field)来完成它了。
① 添加自定义字段
subtitlefield
如图所示,我们只需为 WordPress 页面添加一个值为 subtitle 的自定义字段即可。
② php 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Adds descriptive text to link titles
// With help from http://blog.clearskys.net/2008/12/17/how-to-adding-menu-sub-titles-to-a-theme/
function sub_page_list() {
	global $wpdb;
	$sql = "SELECT p.ID, p.post_title, p.guid, pm.meta_value FROM " . $wpdb->posts . " AS p LEFT JOIN ";
	$sql .= "(SELECT post_id, meta_value FROM " . $wpdb->postmeta . " AS ipm WHERE meta_key = 'subtitle') ";
	$sql .= "AS pm ON p.ID = pm.post_id ";
	$sql .= "WHERE p.post_type = 'page' AND p.post_parent = 0 AND p.post_status = 'publish' ";
	$sql .= "ORDER BY p.menu_order ASC ";
	$sql .= "LIMIT 0, 10";
	$rows = $wpdb->get_results($sql,OBJECT);
	if($rows) {
		foreach($rows as $row) {
			echo "<li>";
			$link_url = get_permalink($row->ID);
			echo "<a href=\"$link_url\"" . "\">$row->post_title</a>";
			echo "<span style=\"display:block;\">$row->meta_value</span>";
			echo "</li>";
		}
	}
}
 
// Filter the menu to add the list
function childtheme_page_menu() { ?>
    <div class="menu">
        <ul>
            <?php if (is_front_page()) { ?>
            <li><a href="<?php bloginfo('home') ?>/" title="<?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?>" rel="home">
                Home <span style="display:block;">This is the home page</span>
            </a></li>                      
            <?php } else { ?>
            <li><a href="<?php bloginfo('home') ?>/" title="<?php echo wp_specialchars( get_bloginfo('name'), 1 ) ?>" rel="home">
                Home <span style="display:block;">Return to the home page</span>
            </a></li>                                 
            <?php } ?>
 
            <?php sub_page_list(); ?>
 
        </ul>
    </div>    
<?php }
add_filter('wp_page_menu','childtheme_page_menu');

WordPress 页面链接分类
我们使用 wp_page_menu 函数时遇到的一个限制是 WordPress 已经限定了其 HTML 代码,换句话说,我们只允许使用 menu-primary 和 menu-secondary 两个 class,也就是说,我们无法新增一个特殊的 class。幸运的是,我们可以使用 preg_replace 替换第一个 ul 标签,曲线解决这个问题,以下是 PHP 代码:

1
2
3
4
5
// Add ID and CLASS attributes to the first <ul> occurence in wp_page_menu
function add_menuclass($ulclass) {
return preg_replace('/<ul>/', '<ul id="nav" class="something-classy">', $ulclass, 1);
}
add_filter('wp_page_menu','add_menuclass');

WordPress 动态菜单

1
2
3
4
5
6
7
8
9
10
11
12
function my_wp_menu() { ?>
<div id="menu">
<ul>
	<li class="<?php if ( is_page('about') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/about/" title="About This Blog">About</a></li>
	<li class="<?php if ( is_page('advertising') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/advertising/" title="Advertise on My Blog">Advertise</a></li>
	<li class="<?php if ( is_page('contact') ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_option('home') ?>/contact/" title="Contact Me">Contact</a></li>
</ul>
</div>
 
<?php }
 
add_filter( 'wp_page_menu', 'my_wp_menu' );

代码解析:我们使用了 current_page_item 和 page_item 两个类区分当前页面和其他页面。如有其它页面,以此类推。
使用方法:

<?php my_wp_menu(); ?>

怎么样,简单吧?!如果你有其他 idea,欢迎和大家一起分享!!!
本文由辐射鱼翻译自:WordPress Menu Tricks(有删节)
站趣译文:wp_page_menu 函数使用详解

3个评论

  • Reply 1 aunsen

    April 8th, 2009 at 09:58

    沙发!

  • Reply 2 welee

    April 8th, 2009 at 15:40

    动态菜单是否有方法在 wp_list_pages 或 wp_page_menu 中定义当前页面和其他页面的样式,而不用一条条 li 来定义?

    • Reply 3 辐射鱼

      April 8th, 2009 at 18:43

      呃,不太明白你的意思。WordPress 函数是用来获取数据,而 li 等标签是用以控制样式,当然,你可以将 li 替换成其他标签,然后自行定义其 CSS 样式即可。