WordPress 後台文章列表增加日期區間篩選

WordPress 後台文章列表預設的篩選模式有依文章狀態、月份以及分類這三種，客戶想要增加使用日期區間的方式來進行篩選，也就是有兩個日期選項：起始日與結束日，篩選後會顯示在這個日期區間中發表的文章列表：

要實現該功能有兩個步驟，首先是使用勾點 restrict_manage_posts 來增加日期選擇 UI，我使用的是 jQuery UI 的日期選擇元件，並增加 after_date 以及 before_date 兩個文字輸入欄位：

<?php

/**
 * 引入 jQuery UI
 */
add_action(
	'admin_enqueue_scripts',
	function() {
		wp_enqueue_style( 'jquery-ui-style', '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css' );
		wp_enqueue_script( 'jquery-ui-datepicker' );
	}
);

/**
 * 增加日期選擇欄位
 */
add_action(
	'restrict_manage_posts',
	function() {
		$after  = ( isset( $_GET['after_date'] ) && $_GET['after_date'] ) ? $_GET['after_date'] : '';
		$before = ( isset( $_GET['before_date'] ) && $_GET['before_date'] ) ? $_GET['before_date'] : '';

		echo '
		<input type="text" name="after_date" placeholder="起始日" value="' . esc_attr( $after ) . '" />
		<input type="text" name="before_date" placeholder="結束日" value="' . esc_attr( $before ) . '" />
		<script>
		  jQuery( function($) {
		  let after = $(\'input[name="after_date"]\');
		  let before = $(\'input[name="before_date"]\');
		  after.datepicker( {dateFormat : "yy-mm-dd"} );
		  before.datepicker( {dateFormat : "yy-mm-dd"} );
		 });
		</script>';
	}
);

如果你想要針對日期選擇器做調整可以參考 jQuery UI 的官方手冊，或是也可以採用其他的函式庫。處理好介面的部分後接下來要進行文章的篩選，會用到的勾點是 pre_get_posts，該勾點帶有一個參數 $query 參數，而參數就是我們常用的 WP_Query 物件：

<?php

/**
 * 修改文章列表查詢
 */
add_filter(
	'pre_get_posts',
	function( $query ) {
		global $pagenow;
		if ( $pagenow === 'edit.php' && isset( $_GET['after_date'] ) && ! empty( $_GET['after_date'] ) && isset( $_GET['before_date'] ) && ! empty( $_GET['before_date'] ) ) {
			$admin_query->set(
				'date_query',
				array(
					'after'     => sanitize_text_field( $_GET['after_date'] ),
					'before'    => sanitize_text_field( $_GET['before_date'] ),
					'inclusive' => true,
					'column'    => 'post_date',
				)
			);
		}

		return $admin_query;
	}
);

在勾點中我們先判斷目前後台的所在位置，並當網址參數帶有起始日與結束日這兩個值的時候，才進行查詢條件的修改，這邊我們會用到 WP_Query 的 set 方法來加入新的查詢條件，該方法帶有兩個參數，分別是查詢名稱以及查詢參數。

由於我們要用文章的發表日期來進行篩選，因此加入 date_query 的 after 與 before 屬性，參數 inclusive 代表是否要包含篩選日期當天的文章，而 column 則代表要依照文章的哪種日期來篩選，可選值有文章發表時間與修改時間。

最後返回 $query 即可完成文章列表的篩選，有了這樣的基礎架構後，你就可以在文章列表頁加入各種自訂的篩選邏輯。