サポート » テーマ » 固定ページの動的ページ化

  • heysister721

    (@heysister721)


    [ O S ] Windows 10
    [Server] XAMPP 7.3.22
    [ PHP ] 7.4.10
    [ D B ] MariaDB 10.3.15
    [ W P ] 5.5.1-ja

    もしかしたら「テーマ」に関するフォーラムに該当しないかもしれませんがご了承ください。

    現在設定しているテーマにある「固定ページ」のテーマをベースに、独自でカスタマイズを試みています。

    独自のテンプレートには、カスタムフィールド(KEY:kzn_reg_date)で入力した日付に対し、「開始年月日」から「終了年月日」を入力し、フォームを送信すると、カスタムフィールド値が開始年月日から終了年月日までのデータをループ(リスト化)して表示するものを作りたいと思っています。

    初期値としては、「開始年月日」を『1か月前』から「終了年月日」を『今日』までに設定し、フォームから範囲指定が送信されたら、その範囲内のデータをリスト表示するにはどのようにしたらよいでしょうか。

    カスタムフィールドは「Adovanced Custom Fields」を使用しています。

    結果を抽出する方法としては、専用の固定ページのテーマに抽出コードを埋め込んで利用したいと考えていますが、Function.php等にショートコードとして登録して使う方法が必要なら考えようと思います。

    いろいろググったりしたのですが、「投稿日」を用いたフィルタリング記事は見つかるのですが、固定ページに組み込んだフォームの値を受け取ってフィルタリングする方法は見つかりませんでした。

    直接コードを教えていただくことが困難かと存じます。
    せめて、参考文献・参考記事などございましたら、教えていただければ幸いです。
    よろしくお願いいたします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • 「Filter By Date Range」で、どのくらい調べて試しましたか

    heysister721

    (@heysister721)

    現状、次の通り固定ページに抽出範囲を指定するフォームを固定ページのテンプレートに埋め込んでいます。

    <?php $today = date("y-m-d"); ?>
    <?php $ystmon = date('y-m-d', strtotime('-1 month')); ?>
    
    <form method="post" action="https://e-nss.local/kaizen/?page_id=163" accept-charset="UTF-8" enctype="multipart/form-data">
    <div style="">
    <div style="display:flex; width:30%; float: left;">
    <h4 style="width:20%; text-align: center; font-size: 0.8rem;">集計開始</h4>
    <input type="text" id="date_start" name="date_start" value="<?php echo $ystmon; ?>" style="font-size:1.6rem;">
    </div>
    <div style="display:flex; width: 30%; float: left;">
    <h4 style="width:20%; text-align: center; font-size: 0.8rem;">集計終了</h4>
    <input type="text" id="date_end" name="date_end" value="<?php echo $today; ?>" style="font-size:1.6rem;">
    </div>
    <div style="display:flex; width: 16%; float: left ; vertical-align: bottom;">
    
    <input type="submit" value="範囲を指定" style="margin-left: 1rem; font-size: 1.1rem;">
    </div>
    </div>
    </form>

    そして、データを抽出するためのクエリ?として、次の通りに記述しています。

    <?php
    	$args = array(
    		'posts_per_page' => -1,
    		'order' => 'ASC',
    		'post_type' => array('post'),
    		'post_status' => 'publish',
    		'suppress_filters' => true,
    		'no_found_rows' => true
    		);
    	$the_query = new WP_Query( $args );
    ?>

    上記コードに、カスタムフィールドで設定した「提出日(kzn_reg_data)」が「date_startより大きくdate_endより小さい」をフィルタリングできればいけそうなのですが・・・。

    heysister721

    (@heysister721)

    @fugaku 様

    ご指導いただきました「Filter By Date Range」では調べていませんでした。

    「Wordpress カスタムフィールド 期間指定」など、いわゆる『初心者なみ』の検索ワードで検索していました。

    こんにちは

    ショートコードで実現できるのは、固定ページで日付を選択するフィールドと送信ボタンを表示するところまでです。
    検索するためには、ショートコード以外にプログラムを書くしかありません。

    前提が分からないので、ピンポイントのアドバイスが難しそうですが・・・
    ・表示されるべきその期間のデータは、別の投稿タイプか何かで保存されている
    ・そのデータを、データが保持している kzn_reg_date を用いて検索する
    ・表示するデータは、この画面からは更新しない
    という前提であると仮定します。

    このような場合、私であれば「開始年月日」と「終了年月日」を設定して送信されたら、REST API を使って JavaScript で表示すべきデータを取得して表示します。
    ※REST API Handbook の日本語がいつも見つけられないので英語ページですいません。

    サーバー側では get_posts で対象データを取得し、返します。
    kzn_reg_date で検索する書き方は、WP_Query のリファレンスにある、meta_query に関する記述を参考にされたら良いと思います。
    パラメータは例えば、以下のような雰囲気です

    $args = array(
    	'post_type'  => 'product',
    	'meta_query' => array(
    		array(
    			'key'     => 'kzn_reg_date',
    			'value'   => array( ここに「開始年月日」が入ります, ここに「終了年月日」が入ります ),
    			'type'    => 'DATETIME',
    			'compare' => 'BETWEEN',
    		),
    	),
    );

    そして、帰ってきた投稿データを JavaScript 側で画面に表示します。

    heysister721

    (@heysister721)

    @munyagu 様 ご指導いただきありがとうございました。

    meta_queryを使って、カスタムフィールド値を抽出すればよいということが、ご説明を読んだときに感じました。

    ただ、私の理解力が乏しく、実働するコードを作り上げることができませんでした。

    自分が理解できている範囲でできたことは、抽出するための「入力フォーム」を、未入力の時に「1か月前から今日まで」を自動的に割り当てるよう、次のように変更しました。

    <?php
    	
    	// 抽出開始日の指定
    	if($_SERVER["REQUEST_METHOD"] == "POST"){
    		$date_start = $_POST["date_start"];
    	}
    	else {
    		$date_start = date('y-m-d', strtotime('-1 month'));
    	}
    	
    	// 抽出終了日の指定
    	if($_SERVER["REQUEST_METHOD"] == "POST"){
    		$date_end = $_POST["date_end"];
    	}
    	else {
    		$date_end = date("y-m-d");
    	}
    ?>
    
    <form method="post" action="#" accept-charset="UTF-8" enctype="multipart/form-data">
    <div style="">
    	<div style="display:flex; width:30%; float: left;">
    	<h4 style="width:20%; text-align: center; font-size: 0.8rem;">開始日</h4>
    	<input type="text" id="date_start" name="date_start" value="<?php echo $date_start; ?>" style="font-size:1.6rem;">
    	</div>
    	<div style="display:flex; width: 30%; float: left;">
    	<h4 style="width:20%; text-align: center; font-size: 0.8rem;">終了日</h4>
    	<input type="text" id="date_end" name="date_end" value="<?php echo $date_end; ?>" style="font-size:1.6rem;">
    	</div>
    	<div style="display:flex; width: 16%; float: left ; vertical-align: bottom;">
    	
    	<input type="submit" value="範囲を指定" style="margin-left: 1rem; font-size: 1.1rem;">
    	</div>
    </div>
    </form>

    ここまでが自分の限界・・・かもしれません。

    とりあえずは、全投稿のループに「提出日(kzn_reg_date)」をもとにして、下記の条件でとりあえず抽出できるようになりました。

    <?php $cid = 1 ; ?>
    <?php
    	$args = array(
    		'posts_per_page' => -1,
    		'order' => 'DESC',
    		'post_type' => 'post',
    		'post_status' => 'publish',
    		'suppress_filters' => true,
    		'no_found_rows' => true
    	);
    	$the_query = new WP_Query( $args );
    ?>
    <?php while ( $the_query->have_posts() ) { ?>
    	<?php $the_query->the_post(); ?>
    		
    		<?php
    			if ( have_rows( 'kzn_info' , $pid ) ) :
    				while ( have_rows( 'kzn_info' , $pid ) ) : the_row();
    					$kzn_reg_date = get_sub_field( 'kzn_reg_date' , $pid );
    				endwhile;
    			endif;
    		?>
    	<table>
    	
    	if( ( $kzn_reg_date >= $date_start ) && ( $kzn_reg_date <= $date_end ) ){
    	?>
    	<tr>
    	
    	=== // 中 略 // ===
    	
    	</tr>
    	<?php }; ?>
    <?php wp_reset_postdata(); ?>
    </table>

    本当なら、$the_query = new WP_Query( $args ); の抽出条件に期間判を設けたかったのですが、現状理解できていないので、これでいこうと思います。

    もし可能であれば、$the_query = new WP_Query( $args );の中に$kzn_reg_dateの開始と終了の入力値の範囲内にする方法がありましたら、ご教授いただければ幸いです。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。