给“热门文章”小工具添加标签菜单功能

当网站的内容不断地增加后，就需要对内容进行分类管理。WordPress 后台管理工具可以针对导航菜单进行定制来动态显示分类的内容（如目录、标签等分类方式），但是 WordPress 的小工具如 “近期文章” 就不能按分类来显示文章条目，本篇教程就详细介绍如何通过在 WordPress 小工具里添加标签菜单来实现这样的功能。

我们在之前的文章 “为 WordPress 添加“热门文章”小工具” 里介绍了这个小工具的实现方法，本篇教程就以这个小工具为例来为其添加标签菜单功能从而可以分类显示文章条目。WordPress 小工具负责内容显示的函数是 widget($args，$instance) ，因此就是通过修改这个函数来添加标签菜单功能的，代码如下：

public function widget( $args, $instance ) {
	if ( ! isset( $args['widget_id'] ) ) {
		$args['widget_id'] = $this->id;
	}

	$title = ( ! empty( $instance['title'] ) ) ? $instance['title'] : __( 'Hot Posts' );
	$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
	$number = ( ! empty( $instance['number'] ) ) ? absint( $instance['number'] ) : 5;
	if ( ! $number ) {
		$number = 5;
	}
	$show_date = isset( $instance['show_date'] ) ? $instance['show_date'] : false;

	$r = new WP_Query( apply_filters( 'widget_posts_args', array(
		'cat' => '33',
		'posts_per_page'      => $number,
		'no_found_rows'       => true,
		'post_status'         => 'publish',
		'ignore_sticky_posts' => true,
		'meta_key' => 'wpb_post_views_count',
		'date_query' => array(
			array(
				'year' => date( 'Y' ),
				),
			),
		'orderby' => 'meta_value_num',
		'order' => 'DESC',
	), $instance ) );

	$o = new WP_Query( apply_filters( 'widget_posts_args', array(
		'cat' => '31',
		'posts_per_page'      => $number,
		'no_found_rows'       => true,
		'post_status'         => 'publish',
		'ignore_sticky_posts' => true,
		'meta_key' => 'wpb_post_views_count',
		'date_query' => array(
			array(
				'year' => date( 'Y' ),
				),
			),
		'orderby' => 'meta_value_num',
		'order' => 'DESC',
	), $instance ) );

	if ( ! $r->have_posts() && ! $o->have_posts() ) {
		return;
	}
	?>
	<?php echo $args['before_widget']; ?>
	<?php
	if ( $title ) {
		echo $args['before_title'] . $title . $args['after_title'];
	}
	?>
	<div class="tab-wrapper">
		<ul class="tab-menu">
			<li class="active">游记</li>
			<li>技术</li>
		</ul>
		<div class="tab-content">
		<div>
	<ul>
		<?php foreach ( $r->posts as $hot_post ) : ?>
			<?php
			$post_title = get_the_title( $hot_post->ID );
			$title      = ( ! empty( $post_title ) ) ? $post_title : __( '(no title)' );
			?>
			<li>
				<a href="<?php the_permalink( $hot_post->ID ); ?>"><?php echo $title ; ?></a>
				<?php if ( $show_date ) : ?>
					<span class="post-date"><?php echo get_the_date( '', $hot_post->ID ); ?></span>
				<?php endif; ?>
			</li>
		<?php endforeach; ?>
	</ul>
		</div>
		<div style="display: none;">
	<ul>
		<?php foreach ( $o->posts as $hot_post ) : ?>
			<?php
			$post_title = get_the_title( $hot_post->ID );
			$title      = ( ! empty( $post_title ) ) ? $post_title : __( '(no title)' );
			?>
			<li>
				<a href="<?php the_permalink( $hot_post->ID ); ?>"><?php echo $title ; ?></a>
				<?php if ( $show_date ) : ?>
					<span class="post-date"><?php echo get_the_date( '', $hot_post->ID ); ?></span>
				<?php endif; ?>
			</li>
		<?php endforeach; ?>
	</ul>
		</div>
		</div>
	</div>
	<?php
	echo $args['after_widget'];
}

在上面的代码中我们看到，在原有代码的基础上添加了第二个分类 “技术” 及其内容查询和显示代码（$o = new WP_Query），如果还要增加其它的分类，就按照上面的方式添加相应的代码即可。把上述代码放到 functions.php 中。下面给出标签菜单的显示样式代码，可以针对该样式代码进行修改来改变菜单的外观。其它的小工具如近期文章等添加标签菜单功能的实现方法也是一样的。

.tab-menu {
	margin-left: 0px;
	margin-bottom: 5px !important;
}
.tab-menu li {
	position:relative;
	font-family: Merriweather, Georgia, serif !important;
	color:#bcbcbc !important;
	background-color: white !important;
	display: inline-block;
	opacity: 0.8;
	cursor:pointer;
	z-index:0;
}
.tab-menu li:hover {
	color:#464646 !important;
	border-bottom: 1px solid #5cb85c;
}
.tab-menu li.active {
	font-weight: bold;
	color:#464646 !important;
	opacity: 1;
	border-bottom: 1px solid white;
}
.tab-menu li.active:hover {
	color:#464646 !important;
	border-bottom: 1px solid #5cb85c;
}