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_Queryset 方法來加入新的查詢條件,該方法帶有兩個參數,分別是查詢名稱以及查詢參數。

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

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

目錄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2024 想點創意科技有限公司

想點創意科技有限公司 | 統一編號 90516823
Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!