WordPress 菜单中使用 Widget

在上一篇文章中我们详细介绍了如何对 WordPress 菜单系统进行客户化定制，通过分析 WordPress 菜单系统的运行机制，可以看到对菜单做客户化定制还是非常灵活的。本篇文章更进一步，把菜单与小工具结合一下，使得 WordPress 菜单可以按照需求显示任意的小工具（Widget）。

WordPress 提供了很多集成的小工具，这些小工具使用方便、灵活，可以快速地完成网页元素中的功能布局，而且 WordPress 的小工具系统也提供了扩展接口，能够根据需求做客户化定制。

WordPress 的小工具可以在后台管理工具中通过拖放的形式安放到侧边栏中，侧边栏是网页上的一块显示区域，当调出侧边栏时，相应配置好的小工具就会显示出来。其实，侧边栏在 WordPress 中也叫做小工具区块（Widget Area），使用小工具一般情况是通过侧边栏来完成的，还有一种方法就是使用 the_widget 函数。

/* 注册侧边栏，小工具区块 */
<?php
function mega_menu_widgets_init() {
	register_sidebar( array(
		'name'          => 'Mega Menu Sidebar',
		'id'            => 'mega-menu-1',
		'description'   => 'Display widget in menu',
	) );
}
add_action( 'widgets_init', 'mega_menu_widgets_init' );
?>
/* 显示侧边栏和关联的小工具 */
<?php dynamic_sidebar( 'mega-menu-1' ); ?>
/* 显示系统集成的日历小工具 */
<?php the_widget( 'WP_Widget_Calendar' ); ?>

WordPress 的菜单系统是通过遍历类 Walker_Nav_Menu 进行扩展和定制的，所以在菜单中显示小工具也是对相应的遍历类函数做重载和修改来完成的。下面的例子修改菜单遍历类的 start_el 函数，在子菜单中显示日历小工具。

首先需要先到后台菜单管理工具中创建一个子菜单，然后在子菜单的标题框中输入日历小工具的名称（WP_Widget_Calendar），接着在 CSS 类的文本框中输入 menu-widget-item，用来识别是小工具菜单项。另外，在下面的代码中如果把 the_widget 换成 dynamic_sidebar，就可以将侧边栏 “mega-menu-1” 中的小工具显示到子菜单里。

class walker_menu_widget extends Walker_Nav_Menu
{
......
	public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
	{
		......
		if (array_search('menu-widget-item', $classes) !== false) {
			ob_start();
			$widget_name = $item->title;
			the_widget( $widget_name );
			//dynamic_sidebar( 'mega-menu-1' );
			$output .= ob_get_clean();
		}
		......
	}
......
}

最后可以使用 CSS 对菜单中的小工具做样式调整。另外，这里为了说明实现原理的直观和方便，举例使用的方法不一定适合各种情况，比如通过菜单项的标题传递小工具的名称，所以还需要按照本篇文章介绍的方法为基础来做客户化定制。