wp_page_menu 函数使用详解
在这篇文章中,我们将一起探讨 wp_page_menu 函数高级用法,如:
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 自定义字段(custom field)来完成它了。
① 添加自定义字段

如图所示,我们只需为 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'); |
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个评论
Leave a Reply.


1 aunsen
April 8th, 2009 at 09:58
沙发!
2 welee
April 8th, 2009 at 15:40
动态菜单是否有方法在 wp_list_pages 或 wp_page_menu 中定义当前页面和其他页面的样式,而不用一条条 li 来定义?
3 辐射鱼
April 8th, 2009 at 18:43
呃,不太明白你的意思。WordPress 函数是用来获取数据,而 li 等标签是用以控制样式,当然,你可以将 li 替换成其他标签,然后自行定义其 CSS 样式即可。