7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 12

エックスサーバーXServer Advent Calendar 2025

@Atsulabo(アツ)

SWELL × ACF で「来月のイベント一覧」を投稿ページに表示するショートコード

7
Last updated at Posted at 2025-12-14

「投稿ページの本文中に、来月のイベント一覧だけを SWELL のアーカイブと同じデザインで表示したい」という要件があったので、ショートコードで実装したメモ。

  • テーマ: SWELL
  • イベント投稿は通常の「投稿」 (post_type = post)
  • イベント用カテゴリ: event
  • ACF で以下のカスタムフィールドを作成
    • event-date : 出演日（フォーマット例: 2024-12-25）
    • event-place: 会場名

この記事では、**「現在表示中の投稿の公開日を基準に、来月のイベントだけを一覧表示するショートコード」**を作る手順をまとめる。

ちなみになんでXサーバーの話なのになんでSWELL?というと
XサーバーではWordpressが使え、またテーマとしてSWELLを売っているから。
https://www.xserver.ne.jp/news_detail.php?view_id=10486

せっかく招待してもらったのでこちらについてお話させていただく。

（2025/12/14 追記：限定共有記事でアップしたけど、なぜかアップされなかったので通常アップしてリンクしました。大変申し訳ありません。）

1. 来月分だけを取得するクエリを作る

まずは「来月の1日〜末日」の範囲を求めて、その範囲に含まれる event-date の投稿だけ取得

$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',
    'meta_query'     => array(
        array(
            'key'     => 'event-date',
            'value'   => array( $start_date, $end_date ),
            'compare' => 'BETWEEN',
            'type'    => 'DATE',
        ),
    ),
    'orderby'        => 'meta_value',
    'order'          => 'ASC',
    'posts_per_page' => -1,
);

ポイント:

  • 日付の比較用に ACF 側の event-date も Ymd 形式で保存しておくと扱いやすい。
  • meta_query の type => 'DATE' にしておくと、日付として比較される。

2. SWELL のアーカイブと同じ HTML 構造でループを回す

SWELL のアーカイブでは、記事一覧はだいたい以下のような構造。

<div class="p-archive">
   <div class="p-archive__inner">
        <ul class="p-postList">
               <li class="p-postList__item">…</li>
                      …
                      
	     </ul>
	</div>
 </div>

これに合わせて、PHP 側で同じクラス名を使って HTML を組み立て。
この方がきれい。


$query  = new WP_Query( $args );

if ( ! $query->have_posts() ) {
    return '<p>来月の出演予定はありません。</p>';
}

$output  = '<div class="p-archive">';
$output .= '<div class="p-archive__inner">';
$output .= '<ul class="p-postList">';

while ( $query->have_posts() ) :
    $query->the_post();

    $title      = get_the_title();
    $event_date = get_field( 'event-date' );
    $place      = get_field( 'event-place' );
    $img        = get_the_post_thumbnail_url( null, 'medium' );

    $output .= '<li class="p-postList__item">';
    $output .= '<a href="' . esc_url( get_the_permalink() ) . '" class="p-postList__link">';

    // サムネイル
    if ( $img ) {
        $output .= '<div class="p-postList__thumb c-postThumb">';
        $output .= '<figure class="c-postThumb__figure">';
        $output .= '<img src="' . esc_url( $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">' . esc_html( $title ) . '</h2>';
    $output .= '<div class="p-postList__meta">';
    $output .= '<div class="p-postList__times c-postTimes u-thin">';

    if ( $event_date ) {
        $output .= '出演日: ' . esc_html( date_i18n( 'Y年n月j日', strtotime( $event_date ) ) );
    }
    if ( $place ) {
        $output .= '<br>' . esc_html( $place );
    }

    $output .= '</div>'; // .p-postList__times
    $output .= '</div>'; // .p-postList__meta
    $output .= '</div>'; // .p-postList__body
    $output .= '</a>';
    $output .= '</li>';

endwhile;

wp_reset_postdata();

$output .= '</ul>';
$output .= '</div>';
$output .= '</div>';

3. ショートコードとして登録する

最後に、上記を関数にまとめてショートコードとして登録。
例えば [next_month_events] と書けば来月分のイベント一覧が出る。

function show_next_month_events() {

    // 表示中の投稿の公開日を基準にする
    $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',
        'meta_query'     => array(
            array(
                'key'     => 'event-date',
                'value'   => array( $start_date, $end_date ),
                'compare' => 'BETWEEN',
                'type'    => 'DATE',
            ),
        ),
        'orderby'        => 'meta_value',
        'order'          => 'ASC',
        'posts_per_page' => -1,
    );

    $query = new WP_Query( $args );

    if ( ! $query->have_posts() ) {
        return '<p>来月の出演予定はありません。</p>';
    }

    $output  = '<div class="p-archive">';
    $output .= '<div class="p-archive__inner">';
    $output .= '<ul class="p-postList">';

    while ( $query->have_posts() ) :
        $query->the_post();

        $title      = get_the_title();
        $event_date = get_field( 'event-date' );
        $place      = get_field( 'event-place' );
        $img        = get_the_post_thumbnail_url( null, 'medium' );

        $output .= '<li class="p-postList__item">';
        $output .= '<a href="' . esc_url( get_the_permalink() ) . '" class="p-postList__link">';

        if ( $img ) {
            $output .= '<div class="p-postList__thumb c-postThumb">';
            $output .= '<figure class="c-postThumb__figure">';
            $output .= '<img src="' . esc_url( $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">' . esc_html( $title ) . '</h2>';
        $output .= '<div class="p-postList__meta">';
        $output .= '<div class="p-postList__times c-postTimes u-thin">';

        if ( $event_date ) {
            $output .= '出演日: ' . esc_html( date_i18n( 'Y年n月j日', strtotime( $event_date ) ) );
        }
        if ( $place ) {
            $output .= '<br>' . esc_html( $place );
        }

        $output .= '</div>'; // .p-postList__times
        $output .= '</div>'; // .p-postList__meta
        $output .= '</div>'; // .p-postList__body
        $output .= '</a>';
        $output .= '</li>';

    endwhile;

    wp_reset_postdata();

    $output .= '</ul>';
    $output .= '</div>';
    $output .= '</div>';

    return $output;
}
add_shortcode( 'next_month_events', 'show_next_month_events' );

これで、任意の投稿の本文中に

[next_month_events]

と書くと、その投稿の公開日を基準にした「来月の出演予定一覧」が、SWELL のアーカイブと同じ見た目で表示される。

まとめ

  • ACF の日付フィールドで「出演日」を持たせる
  • meta_query の BETWEEN で「来月の1日〜末日」に絞り込み
  • SWELL のアーカイブと同じ HTML 構造とクラス名で出力
  • ショートコードにしておくと、投稿・固定ページどこからでも呼び出せる

とこういうこと。けっこう大変だが、最初にやっておくとあとは管理画面からの更新・編集だけになるので楽。

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?