AtsuLabo Journal

【SWELL】投稿ページでアーカイブページのように来月分の予定を表示させる

Programming NO IMAGE

さあ、今日も別案件で、SWELLを利用したWordpressカスタマイズの対応の話。

前回では出演予定一覧というアーカイブを作ったが、
今回は、お知らせ用に今まで書いた出演予定日一覧から来月用のを取得してアーカイブのように表示させる、という仕様だ。

前回、ACFを利用して、出演予定日や、時間、場所を入力できるカスタムフィールドを作っている。
で、SWELLのアーカイブの仕様をそのまま使って、雰囲気を壊さないように表示させたい。

さて、そうするためには、どうすればいいか。
整理してみよう。

①まずクエリを作る。つまり、前回作ったクエリを元に、さらに来月分だけに絞る。

// 'Y-m-d' 形式で公開日を取得し、来月分の日付を取得
$publish_date = get_the_date('Y-m-d'); 
$start_date = date('Ymd', strtotime("first day of next month", strtotime($publish_date)));
$end_date = date('Ymd', strtotime("last day of next month", strtotime($publish_date)));

//カスタムクエリを作成
 // カスタムクエリを作成
$args = array(
'post_type' => 'post', // 投稿タイプを設定
'category_name' => 'event', // カテゴリーを指定
'meta_key' => 'event-date', // ACFの出演日フィールドキー
'meta_type' => 'DATE',
'meta_query' => array(
array(
'key' => 'event-date',
'value' => array($start_date, $end_date),
'compare' => 'BETWEEN',
'type' => 'DATE'
),
),
'orderby' => 'meta_value', // ACFの出演日順
'order' => 'ASC', // 昇順
'posts_per_page' => -1, // すべての投稿を取得
);

前回はこちら。

関連記事
【SWELL】アーカイブページをACFで設定した日の昇順に並べる

日が開いてしまったが、ここ最近、別案件で、SWELLを利用した Wordpressカスタマイズの対応をしていた。 そこでは、出演予定一覧というアーカイブを作る必要があり、 投稿日時とは別に、出演予定日を軸に、未来日の記事のみ、昇順[…]

IMG

②クエリを実行し、SWELLのアーカイブページのHTMLの構成をみて、CSSをそのまま使えるようにHTMLを構成する必要があるので、
PHPでHTMLを作成する。
SWELLの場合、2024年11月時点では、アーカイブページはdiv２つぶんで囲んで、記事たちはulリストで表示させている。
それぞれclassがはいっているのでそれらを入れておく。
記事クエリは while ($query->have_posts()) : $query->the_post();のなかで１記事ずつまわるので、
最初に１記事ごとのタイトル・ACFでつくった項目（日・場所）・画像・リンクを持ってくる。
下のような感じ。

// クエリを実行
$query = new WP_Query($args);
while ($query->have_posts()) : $query->the_post();
   $title = get_the_title();
   $date = get_field('event-date');
   $place = get_field('event-place');
   $img = get_the_post_thumbnail_url();


endwhile;

で、HTMLを作成するのだが、ここらへんは好みなのだが、
多分見やすいのは下のように、
HTMLを格納する変数に１行ずつ入れていく方式。

while ($query->have_posts()) : $query->the_post();
$title = get_the_title();$date = get_field('event-date');
$place = get_field('event-place');
$img = get_the_post_thumbnail_url();

//ここから
$output .= '<li class="p-postList__item">';
$output .= '<a href='. get_the_permalink() . ' class="p-postList__link">';
$output .= '<div class="p-postList__thumb c-postThumb">';
$output .= '<figure class="c-postThumb__figure">';
$output .= '<img width="293" height="440" src="' . $img . '" alt="" class="c-postThumb__img u-obf-cover">';
$output .= '</figure>';
$output .= '</div>';
$output .= '<div class="p-postList__body">';
$output .= '<h2 class="p-postList__title">'. $title .'</h2>';
$output .= '<div class="p-postList__meta">';
$output .= '<div class="p-postList__times c-postTimes u-thin">';
$output .= '出演日: ' . date('Y年m月d日', strtotime($event-date));
$output .= $place;
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
$output .= '</a>';
$output .= '</li>';
endwhile;
$output .= '</ul>';
とこんな感じなのだが、リセットを忘れるとクエリがセットされたままになるので解除が必要だ。
 // クエリをリセット
wp_reset_postdata();
//最後に閉じてHTMLを出力させる
$output .= '</div>';
$output .= '</div>';
return $output;

ポイントは一通り説明したので全コードを載せておく
これで普通の投稿に、来月の予定だけを出力させることができた。
アーカイブも同じ方法が使えそうだ。

function show_next_month_events() {
$publish_date = get_the_date('Y-m-d'); // 'Y-m-d' 形式で公開日を取得
$start_date = date('Ymd', strtotime("first day of next month", strtotime($publish_date)));
$end_date = date('Ymd', strtotime("last day of next month", strtotime($publish_date)));


 // カスタムクエリを作成
$args = array(
'post_type' => 'post', // 投稿タイプを設定
'category_name' => 'event', // カテゴリーを指定
'meta_key' => 'event-date', // ACFの出演日フィールドキー
'meta_type' => 'DATE',
'meta_query' => array(
array(
'key' => 'event-date',
'value' => array($start_date, $end_date),
'compare' => 'BETWEEN',
'type' => 'DATE'
),
),
'orderby' => 'meta_value', // ACFの出演日順
'order' => 'ASC', // 昇順
'posts_per_page' => -1, // すべての投稿を取得
);

// クエリを実行
$query = new WP_Query($args);
while ($query->have_posts()) : $query->the_post();
$title = get_the_title();$date = get_field('event-date');
$place = get_field('event-place');
$img = get_the_post_thumbnail_url();

//ここから
$output .= '<li class="p-postList__item">';
$output .= '<a href='. get_the_permalink() . ' class="p-postList__link">';
$output .= '<div class="p-postList__thumb c-postThumb">';
$output .= '<figure class="c-postThumb__figure">';
$output .= '<img width="293" height="440" src="' . $img . '" alt="" class="c-postThumb__img u-obf-cover">';
$output .= '</figure>';
$output .= '</div>';
$output .= '<div class="p-postList__body">';
$output .= '<h2 class="p-postList__title">'. $title .'</h2>';
$output .= '<div class="p-postList__meta">';
$output .= '<div class="p-postList__times c-postTimes u-thin">';
$output .= '出演日: ' . date('Y年m月d日', strtotime($event-date));
$output .= $place;
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';
$output .= '</a>';
$output .= '</li>';
endwhile;
$output .= '</ul>';

 // クエリをリセット
wp_reset_postdata();
//最後に閉じてHTMLを出力させる
$output .= '</div>';
$output .= '</div>';
return $output;

}
add_shortcode('next_month_events', 'show_next_month_events');