【WP】現在と比較して過去と未来のイベント記事をタブで出し分けたい。

Question

前提

カスタム投稿 "live" のカスタムフィールド "event-date" へ開催日を入力しています。
なお、"event-date"のフィールドタイプは"デイトピッカー"です。

初めは日付と比較して記事毎にラベルを貼って対応しておりましたが、タブで切り替える方法ができないかと色々調べた結果自分の知識不足で実装できませんでしたのでご質問させていただいております。

お力を貸していただきたいです。
どうぞよろしくお願いします。

やりたいこと

カスタムフィールド"event-date"に入力された日付を元に現在の日付と比較してアーカイブページで

Up coming　➡　開催日前のイベント一覧
Past　➡　終了したイベント一覧

のように"タブ"で切り替えて表示したいです。

現状

<ul class="archive">

<?php $args = array(
'numberposts' => -1,
'post_type' => 'live'
);
$posts = get_posts( $args );
if( $posts ) : foreach( $posts as $post ) : setup_postdata( $post );
?>

<li>

<?php
date_default_timezone_set('Asia/Tokyo');
$today = date("Ymd");
$to = intval($today);
$date_start = get_field('event-date', false, false);
$y1 = substr($date_start,0,4);
$m1 = substr($date_start,4,2);
$d1 = substr($date_start,6,2);
$start_app = $y1.$m1.$d1;
$sa = intval($start_app);
?>

<?php if ($sa > $to):?>
<div class="upcoming">Up coming!</div>

<?php elseif($to > $start_app) : ?>
<div class="past">Past</div>

<?php endif; ?>

<div class="live_info">
<div class="inner">
<?php
if ($terms = get_the_terms($post->ID, 'live-tag')) {
foreach ( $terms as $term ) {
echo '<span class="tag">',esc_html($term->name),'</span>';
}
}
?>

<h3 class="media_title"><a href="<?php the_permalink();?>"><?php the_title_attribute(); ?></a></h3>
<span class="term_tag inner"><?php the_field('live_venue'); ?></span>
<div class="date">
<?php
$date = get_field('event-date', false, false);
$date = new DateTime($date);{
echo $date->format('Y.n.j D');
}
?>
</div>
</div>
</div>

</li>

<?php endforeach; ?>
<?php else : ?>
<li><p>ライブ情報が見つかりませんでした。</p></li>
<?php endif;
wp_reset_postdata(); ?>

</ul>

試したこと

<input id="all" type="radio" name="tab_item" checked>
<label class="tab_item" for="all">Up coming!</label>
<input id="programming" type="radio" name="tab_item">
<label class="tab_item" for="programming">Past</label>


<?php
date_default_timezone_set('Asia/Tokyo');
$today = date("Ymd");
$to = intval($today);
$date_start = get_field('event-date', false, false);
$y1 = substr($date_start,0,4);
$m1 = substr($date_start,4,2);
$d1 = substr($date_start,6,2);
$start_app = $y1.$m1.$d1;
$sa = intval($start_app);
?>

<?php if ($sa > $to):?>
<div class="tab_content" id="programming_content">
ループ内容(上記で記述した内容と重複する為省略させていただきます。)
</div>

<?php elseif($to > $start_app) : ?>
<div class="tab_content" id="programming_content">
ループ内容(上記で記述した内容と重複する為省略させていただきます。)
</div>

<?php endif; ?>

CSSのみでタブを切り替える方法をためしました。
こちらで実装できないかと思ったのですが、やはりできず記事の情報が表示されませんでした。

.tab_item {
  width: calc(100%/2);
  height: 40px;
  background-color: #f5f5f5;
  line-height: 40px;
  font-size: 1.2em;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

input[name="tab_item"] {
  display: none;
}

.tab_content {
  display: none;
  padding: 2em 0 0;
  clear: both;
  overflow: hidden;
}

#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

.tabs input:checked + .tab_item {
  background-color: #25c6da;
  color: #fff;
}

Answer 1

最初に取得したpostsを2つに分けて、それぞれでループすればできると思います。
2種類に分けるif文とタブ表示のスタイルは質問内容そのままなので、必要であれば調整してください。
全件取得しているので、データ量が多くなると重くなりますのでご注意ください。

<?php
$tabs= [];

$args = array(
    'numberposts' => -1,
    'post_type' => 'live'
);
$posts = get_posts($args);

foreach($posts as $post) {
    ...
    if ($sa > $to) {
        $tabs[0][] = $post;
    } else {
        if($to > $start_app) {
            $tabs[1][] = $post;
        }
    }
}
?>

<?php foreach ($tabs as $tab): ?>
    <div class="tab_content" id="programming_content">
        <ul>
            <?php foreach ($tab as $post): ?>
                <li>
                    ...
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endforeach; ?>

Comments

[koinu]

ベストアンサーにした後で申し訳ございません。
こちらの書き方が悪いのかもしれないですが、カスタムフィールドの日付を変更して未来の値にしてもPastのほうに表示されてしまいます…

<?php

…

foreach($posts as $post) {

date_default_timezone_set('Asia/Tokyo');
$today = date("Ymd");
$to = intval($today);
$date_start = get_field('event-date', false, false);
$y1 = substr($date_start,0,4);
$m1 = substr($date_start,4,2);
$d1 = substr($date_start,6,2);
$start_app = $y1.$m1.$d1;
$sa = intval($start_app);

if ($sa > $to) {
$tabs[0][] = $post;
} else {
if($to > $start_app) {
$tabs[1][] = $post;
}
}
}
?>

後半部分はこの書き方で問題ないでしょうか？

[tabuu]

こちらではどのようなデータが登録されているか確認のしようがありませんので、
if文でチェックしている各変数($sa、$to、$start_appなど)の値が想定通りがご確認いただけないでしょうか。
念のためキャッシュされているページが表示されていないかもご確認ください。

[koinu]

echoで出力してみたところ、$toで今日の日付、$sa、$start_ａｐｐでカスタムフィールドに入力した値がハイフンなしで出力できました。

echo $sa > $to , $to > $sa;
ではどちらも１と出力されました。

キャッシュについても何度か消してみたのですが表示は変わりませんでした。

[tabuu]

> echo $sa > $to , $to > $sa;
> ではどちらも１と出力されました。
不等号の向きを逆にして結果が同一ということはあり得ないと思います。
データの型も含めてご確認いただけないでしょうか。