在后台给WordPress文章和媒体加上日期筛选

WordPress后台的文章和媒体只能查询到某年某月的内容,不能筛选一个范围段的。下面讲讲如何在后台给WordPress文章和媒体加上日期筛选。

在你的主题 functions.php 中增加:

class mishaDateRange{
 
	function __construct(){
 
		// if you do not want to remove default "by month filter", remove/comment this line
		add_filter( 'months_dropdown_results', '__return_empty_array' );
 
		// include CSS/JS, in our case jQuery UI datepicker
		add_action( 'admin_enqueue_scripts', array( $this, 'jqueryui' ) );
 
		// HTML of the filter
		add_action( 'restrict_manage_posts', array( $this, 'form' ) );
 
		// the function that filters posts
		add_action( 'pre_get_posts', array( $this, 'filterquery' ) );
 
	}
 
	/*
	 * Add jQuery UI CSS and the datepicker script
	 * Everything else should be already included in /wp-admin/ like jquery, jquery-ui-core etc
	 * If you use WooCommerce, you can skip this function completely
	 */
	function jqueryui(){
		wp_enqueue_style( 'jquery-ui', 'https://cdnjs.loli.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css' );
		wp_enqueue_script( 'jquery-ui-datepicker' );
	}
 
	/*
	 * Two input fields with CSS/JS
	 * If you would like to move CSS and JavaScript to the external file - welcome.
	 */
	function form(){
 
		$from = ( isset( $_GET['mishaDateFrom'] ) && $_GET['mishaDateFrom'] ) ? $_GET['mishaDateFrom'] : '';
		$to = ( isset( $_GET['mishaDateTo'] ) && $_GET['mishaDateTo'] ) ? $_GET['mishaDateTo'] : '';
 
		echo '<style>
		input[name="mishaDateFrom"], input[name="mishaDateTo"]{
			line-height: 28px;
			height: 28px;
			margin: 0;
			width:125px;
		}
		</style>
 
		<input type="text" name="mishaDateFrom" placeholder="Date From" value="' . $from . '" />
		<input type="text" name="mishaDateTo" placeholder="Date To" value="' . $to . '" />
 
		<script>
		jQuery( function($) {
			var from = $(\'input[name="mishaDateFrom"]\'),
			    to = $(\'input[name="mishaDateTo"]\');
 
			$( \'input[name="mishaDateFrom"], input[name="mishaDateTo"]\' ).datepicker();
			// by default, the dates look like this "April 3, 2017" but you can use any strtotime()-acceptable date format
    			// to make it 2017-04-03, add this - datepicker({dateFormat : "yy-mm-dd"});
 
 
    			// the rest part of the script prevents from choosing incorrect date interval
    			from.on( \'change\', function() {
				to.datepicker( \'option\', \'minDate\', from.val() );
			});
 
			to.on( \'change\', function() {
				from.datepicker( \'option\', \'maxDate\', to.val() );
			});
 
		});
		</script>';
 
	}
 
	/*
	 * The main function that actually filters the posts
	 */
	function filterquery( $admin_query ){
		global $pagenow;
 
		if (
			is_admin()
			&& $admin_query->is_main_query()
			// by default filter will be added to all post types, you can operate with $_GET['post_type'] to restrict it for some types
			&& in_array( $pagenow, array( 'edit.php', 'upload.php' ) )
			&& ( ! empty( $_GET['mishaDateFrom'] ) || ! empty( $_GET['mishaDateTo'] ) )
		) {
 
			$admin_query->set(
				'date_query', // I love date_query appeared in WordPress 3.7!
				array(
					'after' => $_GET['mishaDateFrom'], // any strtotime()-acceptable format!
					'before' => $_GET['mishaDateTo'],
					'inclusive' => true, // include the selected days as well
					'column'    => 'post_date' // 'post_modified', 'post_date_gmt', 'post_modified_gmt'
				)
			);
 
		}
 
		return $admin_query;
 
	}
 
}
new mishaDateRange();

增加后效果如下,在列表头部的 “筛选” 位置,多出了日期选择的input

WordPress媒体日期筛选
WordPress媒体日期筛选
WordPress文章日期筛选
WordPress文章日期筛选

需要注意的是,代码中有个外链的cdn css地址:https://cdnjs.loli.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css,这段你可以换成自己喜欢的cdn地址,或者直接放在主题中,去引用主题文件。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注