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