普段あまりWordPress触らないのですが、急遽サポートで対応した内容になります。
調べても案外情報がなかったので、あまりそういう要件がないのかな。
※急ぎでの対応でしたのでもっと最善策があるかもしれません。
環境
WordPress 5.2
PHP 7.0.32
Apache バージョン不明
MW WP Formとは
WordPressのフォームプラグイン。
簡単にフォームを構築できて、入力内容を保存、閲覧も可能な便利なプラグイン。
問題点
MW WP Formの管理画面では、フォームの入力内容を一覧で見ることができるが、その際にフィルタリングが「月指定」でしかできない。
そのため、これに「日付指定」を追加したい。
また、画面上のフィルタリングがCSVダウンロードに反映されない。
まとめると2点。
- 「月指定」のフィルタリングしかできない
- フィルタリングがCSVダウンロードに適用されない
上記2点を改善します。
改修内容
- 「日付指定」でフィルタリング機能の追加
- 「日付指定」のフィルタリングをCSVダウンロードにも適用
※今回の場合、急ぎ案件であったこともあり、日付は手入力。ただし、datepicker使用。
※本来は入力内容から入力があった日付をすべて抽出してドロップダウン化した方がよいのかもしれないが、日付が増えた時のことを考慮して無しとした。
修正内容
完成形
最終的にできたのが以下。
登録日時にフォーカスを当てると以下のようにdatepickerが起動する。
この状態で「絞り込み検索」を実行すると日付指定での検索が可能。
かつCSVダウンロードも同様に日付指定でのダウンロードが可能になる。
修正内容全体
functions.php
function add_date_input($vars) {
$vars[] = 'date';
return $vars;
}
add_filter('query_vars', 'add_date_input');
function add_date_filter() {
// 登録日の絞り込み検索
// MW WP Form以外では実行しないようにする
if (strpos($GLOBALS['post_type'], 'mwf_') !== false) {
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
global $wp_scripts;
$ui = $wp_scripts->query('jquery-ui-core');
wp_enqueue_style('jquery-ui-css', "//ajax.googleapis.com/ajax/libs/jqueryui/{$ui->ver}/themes/smoothness/jquery-ui.css");
echo '<input type="text" name="date" class="datepicker" value="' . get_query_var('date') . '" size="10" maxlength="10" placeholder="登録日時">';
echo '<script type="text/javascript">';
echo 'jQuery(function($) { $("input[name=\'date\']").datepicker({ dateFormat: \'yymmdd\', changeYear: true, monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"] }); });';
echo '</script>';
}
};
add_action('restrict_manage_posts', 'add_date_filter');
// 問い合わせ一覧画面の絞り込み時に条件を追加する
// CSVダウンロードでも使用される
function my_mwform_get_inquiry_data_args($args) {
$strDate = get_query_var('date'); // date（日付指定）
$strM = get_query_var('m'); // m（月指定）
if (empty($strDate)) {
if (isset($_GET['date'])) {
$strDate = $_GET['date'];
}
}
if (empty($strM)) {
if (isset($_GET['m'])) {
$strM = $_GET['m'];
}
}
$strSearchDate = '';
$bIsDayExist = false;
if (!empty($strDate)) {
// dateパラメータがある場合はdateを優先
$strSearchDate = $strDate;
$bIsDayExist = true;
} elseif (!empty($strM)) {
// dateがなくてmがある場合はmを使用
$strSearchDate = $strM . '01';
}
if (!empty($strSearchDate)) {
// date or mのどちらかが指定されている場合のみ条件を追加
$objDate = new DateTime($strSearchDate);
$arrSearchCondition = array(
'year' => $objDate->format('Y'),
'month' => $objDate->format('m'),
);
if ($bIsDayExist) {
$arrSearchCondition['day'] = $objDate->format('d');
}
$args = array_merge($args, array(
'date_query' => array(
$arrSearchCondition
),
));
}
return $args;
}
add_filter('mwform_get_inquiry_data_args-mwf_xxx', 'my_mwform_get_inquiry_data_args');
// デフォルトの月指定の絞り込み条件を非表示にする
function custom_load_edit() {
add_filter( 'disable_months_dropdown' , 'custom_disable_months_dropdown' , 10 , 2 );
function custom_disable_months_dropdown( $false , $post_type ) {
$disable_months_dropdown = $false;
if (strpos($post_type, 'mwf_') !== false) {
$disable_months_dropdown = true;
}
return $disable_months_dropdown;
}
}
add_action( 'load-edit.php' , 'custom_load_edit' );
細かく
大きく分けて3つ。
URLクエリ変数の追加
functions.php
function add_date_input($vars) {
$vars[] = 'date';
return $vars;
}
add_filter('query_vars', 'add_date_input');
テキストボックスの追加
jquery-uiのdatepickerを使用しています。
前半はjquery-uiのロード。
datepickerを使用しなければinput文のみでOK。
inputのplaceholderは「登録日時」となっていますが、適切な文言に変更してください。
functions.php
function add_date_filter() {
// 登録日の絞り込み検索
// MW WP Form以外では実行しないようにする
if (strpos($GLOBALS['post_type'], 'mwf_') !== false) {
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-datepicker');
global $wp_scripts;
$ui = $wp_scripts->query('jquery-ui-core');
wp_enqueue_style('jquery-ui-css', "//ajax.googleapis.com/ajax/libs/jqueryui/{$ui->ver}/themes/smoothness/jquery-ui.css");
echo '<input type="text" name="date" class="datepicker" value="' . get_query_var('date') . '" size="10" maxlength="10" placeholder="登録日時">';
echo '<script type="text/javascript">';
echo 'jQuery(function($) { $("input[name=\'date\']").datepicker({ dateFormat: \'yymmdd\', changeYear: true, monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"] }); });';
echo '</script>';
}
};
add_action('restrict_manage_posts', 'add_date_filter');
検索条件の追加
検索条件に日付指定を追加している。
そもそもMW WP Form自体、CSVダウンロードには月検索結果のフィルタが効かないようだったので、その辺も考慮している。
dateパラメータがあればdate、なければmパラメータ（月検索）でフィルタリングする。
functions.php
function my_mwform_get_inquiry_data_args($args) {
$strDate = get_query_var('date');
$strM = get_query_var('m');
if (empty($strDate)) {
if (isset($_GET['date'])) {
$strDate = $_GET['date'];
}
}
if (empty($strM)) {
if (isset($_GET['m'])) {
$strM = $_GET['m'];
}
}
$strSearchDate = '';
$bIsDayExist = false;
if (!empty($strDate)) {
$strSearchDate = $strDate;
$bIsDayExist = true;
} elseif (!empty($strM)) {
$strSearchDate = $strM . '01';
}
if (!empty($strSearchDate)) {
$objDate = new DateTime($strSearchDate);
$arrSearchCondition = array(
'year' => $objDate->format('Y'),
'month' => $objDate->format('m'),
);
if ($bIsDayExist) {
$arrSearchCondition['day'] = $objDate->format('d');
}
$args = array_merge($args, array(
'date_query' => array(
$arrSearchCondition
),
));
}
return $args;
}
add_filter('mwform_get_inquiry_data_args-mwf_xxxx', 'my_mwform_get_inquiry_data_args');
デフォルトの月指定のドロップダウンを非表示にする
今回はここまでやらなかったが、完全に日付検索だけにしたい場合は以下のコードで可能。
functions.php
add_action( 'load-edit.php' , 'custom_load_edit' );
function custom_load_edit() {
add_filter( 'disable_months_dropdown' , 'custom_disable_months_dropdown' , 10 , 2 );
function custom_disable_months_dropdown( $false , $post_type ) {
$disable_months_dropdown = $false;
if (strpos($post_type, 'mwf_') !== false) {
$disable_months_dropdown = true;
}
return $disable_months_dropdown;
}
}
参考記事
以下の記事を参考にさせていただきました。
【WordPress】MW WP Formで都道府県フォームを作り、対応状況と都道府県で絞り込み検索しつつ、都道府県フォームの内容によって送信先を変更
WordPressのget_postsとWP_Queryの違いと使用方法について
WordPress管理画面でDatepickerを使う
WordPress管理画面の絞り込み検索をカスタマイズする