首先这就是我们要实现的效果，在后台文章列表，使用wordpress自带的datepicker插件实现筛选功能，对于个人博客来说，这个教程的意义不大，因为文章不多。对于文章量比较大的站点，这个功能可是相当的nice，下面贴代码

首先我们注释掉wordpress自带的日期筛选

add_filter( 'months_dropdown_results', '__return_empty_array' );

添加筛选功能，在functions.php中加入一下代码

//the function that filters posts
function filterquery( $admin_query ){
	global $pagenow;
	if (
		is_admin()
		&& $admin_query->is_main_query()
		// 默认情况下，过滤器将添加到所有文章类型，您可以使用 $_GET['post_type'] 对某些类型进行限制
		&& in_array( $pagenow, array( 'edit.php', 'upload.php' ) )
		&& ( ! empty( $_GET['mishaDateFrom'] ) || ! empty( $_GET['mishaDateTo'] ) )
	) {
		$admin_query->set(
			'date_query', 
			array(
				'ater' => $_GET['mishaDateFrom'], // 任何SttoTimes()可接受的格式！
				'before' => $_GET['mishaDateTo'],
				'inclusive' => true, // 也包括选择的日子
				'column'    => 'post_date' // 'post_modified', 'post_date_gmt', 'post_modified_gmt'
			)
		);
 
	}
	return $admin_query;
}
add_action( 'pre_get_posts', 'filterquery' );

接着在文章页面显示筛选框，继续添加

//HTML of the filter
function form(){
	$from = ( isset( $_GET['zbDateFrom'] ) && $_GET['zbDateFrom'] ) ? $_GET['zbDateFrom'] : '';
	$to = ( isset( $_GET['zbDateTo'] ) && $_GET['zbDateTo'] ) ? $_GET['zbDateTo'] : '';
	echo '<style>input[name="zbDateFrom"], input[name="zbDateTo"]{
			line-height: 28px;
			height: 28px;
			margin: 0;
			width:125px;}</style>
 
		<input type="text" name="zbDateFrom" placeholder="开始日期" value="' . $from . '" />
		<input type="text" name="zbDateTo" placeholder="结束日期" value="' . $to . '" />
		<script>
		jQuery( function($) {
			var from = $(\'input[name="zbDateFrom"]\'),
			    to = $(\'input[name="zbDateTo"]\');
 
			$( \'input[name="zbDateFrom"], input[name="zbDateTo"]\' ).datepicker();
    			from.on( \'change\', function() {
				to.datepicker( \'option\', \'minDate\', from.val() );
			});
 
			to.on( \'change\', function() {
				from.datepicker( \'option\', \'maxDate\', to.val() );
			});
 
		});
		</script>';
}
add_action( 'restrict_manage_posts', 'form');

最后就是载入jquery-ui与jquery-ui-datepicker，我这里为了方便直接引用jquery-ui的CND，如果觉得影响载入速度，可自行替换

//include CSS/JS, in our case jQuery UI datepicker
function jqueryui(){
	wp_enqueue_style( 'jquery-ui', '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css' );
	wp_enqueue_script( 'jquery-ui-datepicker' );
}
add_action( 'admin_enqueue_scripts', 'jqueryui' );

做完这些，刷新你的文章列表，效果就已经出来了。

教程结束，有疑问可以给我留言。