web関連 WordPress

【WordPress】Advanced custom fieldsのデイトピッカーで表示を分岐する

更新日:

バンドやミュージシャンなど音楽活動をする人のためのホームページ用WordPressテーマ「zousanrecords」
前回の投稿からちょくちょくバージョンアップしてます。販売ページは→こちら

PHP初心者の自分がこのWordPressテーマを構築していく上でつまずいたとこ、苦戦したところを備忘録として残しておこうと思います。

今回はAdvanced custom fieldsというプラグインのデイトピッカーを使って表示を分岐する方法

やりたいこと

カスタム投稿タイプで作ったライブ情報一覧ページで

  • 「今日」以降のライブ予定を日程の近い順に並べて表示
  • ライブの日が過ぎた情報については「過去のライブ情報」に移動、表示させる
  • ライブの予定がないときは「現在、ライブの予定はありません。」の文言を表示させる

です。

はじめにやってみたこと

はじめに書いてみたコードが以下↓

<div id="test_box" class="box">
    <div class="part event_part">
        <ul>
<?php $args = array(
 'numberposts' => -1, // 情報を全件表示
 'post_type' => 'live' // カスタムタイプ名
);
$posts = get_posts( $args );
if( $posts ) : foreach( $posts as $post ) : setup_postdata( $post ); 
$today = date("Y.m.d"); // 今日の日付を取得
$event_date = get_field('event_date'); // イベントの日を取得
if($today <= $event_date):?> // もし今日以降なら表示
            <li>
                <p><?php the_field('event_date'); ?></p>
                <p><?php the_title(); ?></p>
            </li>
<?php endif; ?>
<?php endforeach; ?>
<?php elseif($today > $event_date):?> // 今日以降の情報がない場合
            <li>
                <p>現在、ライブの予定はありません。</p>
            </li>
<?php endif;wp_reset_postdata();?>
        </ul>
    </div>
</div>

投稿を全件取得して、ライブの日程を判定して今日以降の情報を表示させる、と考えたのですが全然ダメでした。
投稿が無いと「現在、ライブの予定はありません。」の文言は表示されたけど、情報を投稿すると何も表示されない。

ここで1ヶ月ほど停滞しました。。

某質問サイトで質問してみた

どうにもならなくて、思い切ってIT系の某質問サイトで質問してみました。すると一日もかからず解決!神がいました。

修正したコードが以下↓

<div id="live_box" class="box">
	<div class="part live_part">
		<ul>
<?php
$args = array (
    'numberposts' => -1, // 情報を全件取得
	'post_type'    => 'live', // カスタム投稿タイプ名
	'orderby'      => 'live_date',  // 並び順を制御するカスタムフィールド(今回の場合はライブ日程)
	'order'        => 'ASC', // 並び順を日程の近い順に
	'meta_key'     => 'live_date', // 分岐の判定に使うカスタムフィールド(今回の場合はライブ日程)
	'meta_value'   => date( "Ymd" ), // 「今日」の日付を取得
	'meta_compare' => '>=', // 今日以降に条件分岐
);
$posts = get_posts( $args );
if( $posts ) : foreach( $posts as $post ) : setup_postdata( $post ); ?>
            <li>
                <p><?php the_field('event_date'); ?></p>
                <p><?php the_title(); ?></p>
            </li>
<?php endforeach; ?>
<?php else://ライブ予定がない場合?>
			<li>現在、ライブの予定はありません。</li>
<?php endif;wp_reset_postdata(); //クエリのリセット ?>
		</ul>
	</div>
</div>

クエリ($argsの箇所)の部分で分岐してしまう方法です。

後で調べたらWordPress Codex 日本語版にも載ってました。
参考:関数リファレンス/WP Query - WordPress Codex 日本語版

ポイントはAdvanced custom fieldsのデイトピッカーの設定で「返り値のフォーマット」を「Ymd」にすること。

'meta_value' => date( "Ymd" ),

の部分とフォーマットを合わせます。

過去のライブ情報

過去のライブ情報一覧は条件分岐を逆にして、並び順も逆(最新のものから順)するだけ。

<div id="live_box" class="box">
	<div class="part live_part">
		<ul>
<?php
$args = array (
    'numberposts' => -1, // 情報を全件取得
	'post_type'    => 'live', // カスタム投稿タイプ名
	'orderby'      => 'live_date',  // 並び順を制御するカスタムフィールド(今回の場合はライブ日程)
	'order'        => 'DESC', // 並び順を最新のものから順に
	'meta_key'     => 'live_date', // 分岐の判定に使うカスタムフィールド(今回の場合はライブ日程)
	'meta_value'   => date( "Ymd" ), // 「今日」の日付を取得
	'meta_compare' => '<', // 昨日以前に条件分岐
);
$posts = get_posts( $args );
if( $posts ) : foreach( $posts as $post ) : setup_postdata( $post ); ?>
            <li>
                <p><?php the_field('event_date'); ?></p>
                <p><?php the_title(); ?></p>
            </li>
<?php endforeach; ?>
<?php endif;wp_reset_postdata(); //クエリのリセット ?>
		</ul>
	</div>
</div>

'order' => 'DESC',
'meta_compare' => '<',

になっています。

サンプルページは→こちら

以上、一番苦戦したところでした。

音楽活動をしている人のための無料ホームページテンプレート

WordPressテーマ(ホームページのテンプレート)を作りました!簡単にバンド、音楽活動用のホームページが作れます。

バンドやミュージシャンなど音楽活動をする人のための無料WordPressテーマ「zousanrecords」。
バンドマンでwebデザイナーの私、太田が自ら欲しかった機能を搭載した主にアマチュア、インディーズミュージシャンのホームページに最適化したWordPressテーマです。是非、お試しを。

zousanrecords

 

-web関連, WordPress
-, , ,

Copyright© ヒダリのヒ , 2021 All Rights Reserved Powered by STINGER.