カスタムフィールドを活用してイベントの日付順に記事の一覧を並べ替える【ワードプレス】

ワードプレスで構築したウェブサイトでイベント情報をわかりやすくお知らせしたい！ということでいろいろ調べたことをメモします。

今回やりたかったこと：イベントのお知らせをするページを作成する。
・記事の公開した日付ではなく、イベントの日付をメタ情報として設定して一覧を表示する。
・今日の日付を基準に、イベントの一覧を取得する。できれば過去と未来で分ける
・イベントの日付が近い順番に表示する。
・日付の表示を日本語にしたい○○○○年○○月○○日

という感じです。

ワードプレスで記事を書くと、カテゴリーやタグワードを設定できたり、記事が公開された日付やタイトルなど、本文以外でも幾つかの情報が一つの記事を構成します。
デフォルトではイベントの日付というメタデータを設定できるものはないので、独自のメタデータをイベントの日付情報として追加します。
これはワードプレスのカスタムフィールドという機能を使って、テンプレートファイルを少しいじってあげると実装することができます。

１．カスタムフィールドを追加

ワードプレスの管理画面で、新着記事を作成する画面に移動すると右上に「表示オプション」というボタンがあるのでクリックします。するとたくさんのメニューが出てくるので、「カスタムフィールド」にチェックをつけます。

画面を下の方にスクロールしていくと、カスタムフィールドという項目が追加されますね。

この機能を使って独自のメタデータを追加していきます。

イベントの日付データのための名前を設定します。ネーミングは自由ですがとりあえずは「イベントの日付」で。
それから値の部分にイベントの日付を入力します。
後ほど記載はしますが、日付の情報はYYYY/MM/DD形式で入力した方が記事の順番を変える時に楽です。

入力が完了したら「カスタムフィールドを追加」をクリックしてイベントの日付という名前のメタデータに「2016/10/02」という値が保存されます。

一度カスタムフィールドを追加すると次回以降は過去に作成したカスタムフィールドは選択できるようになりますので新しい記事では少しだけ楽になりますね！

サンプルのためにもう幾つかの記事をダミーで作成した方が、テストする時に日付の前後の並びが正しいかなどのチェックができますので、テスト用にいくつか適当な別日付で作成してみましょう。
後ほど今日を基準日として一覧を取得すテストも兼ねるので、今日より後の日付と前の日付のものを作成しておくとテストしやすいです。

２．カスタム値を取得して一覧表示

イベント日付の設定が完了したら、記事の一覧を取得しつつイベントの日付を一緒に表示させてみましょう。

カスタムフィールドの値を取得するにはget_post_meta関数を利用します。

参考：関数リファレンス／get_post_meta

get_post_meta( get_the_ID() , 'イベントの日付' ,true);

を使用すると、投稿IDに設定した「イベントの日付」の値を取得できます。

参考のコードはこちら

<?php if ( have_posts() ) : ?>

     <?php while ( have_posts() ) : the_post(); ?>

<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<span class="the-date">イベント日：<?php echo get_post_meta( get_the_ID() , 'イベントの日付' ,true); ?></span>
イベント名：<a class="archive-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>

     <?php endwhile; ?>

     <?php else : ?>

<?php endif; ?>

以下の画像のように記事のタイトルとセットで、先ほど設定したイベントの日付を表示できればオッケーですね。レイアウトの見た目はアレですが、データを取得することが目的なので気にしないで次に行きます。

３．記事の一覧を今日以降のイベントの日付順に並べ替えて表示

イベントの日付を取得することができたら、次は並べ替えですね。
基本的には記事の取得する順番というのは記事を作成した日付の順番になっているので、イベントの日付を作成したタイミングと実際のイベントの順番が違ってくるとごっちゃになってしまいます。

なので、取得した記事をメタタグの値によってならべかえるためのスクリプトを追加していきます。

そして、さらっと見出しに入っていますが、今日以降のイベントだけを取得するので、すでに過ぎた日付のイベントは非表示にします。

参考：関数リファレンスWP Query

参考にしたコードのスクショ↓

ワードプレスには記事を取得するための便利なループ処理があるのですが、これをアレンジするためのコードが上のスクショです。

記事を参考に、今回使ったコードがこちらです↓

<?php
            $metakey = 'イベントの日付'; //カスタムフィールドで設定した名前
            $metatoday = date( "Y/m/d" ); //設定した日付の書式

           $args = array(
                    'meta_key' => $metakey,
                    'meta_value' => $metatoday,
                    'meta_compare' => '>',
                    'orderby' => 'meta_value',
                    'order' => 'ASC',
                    'type' => 'DATE',
                    );
            $the_query = new WP_Query( $args );
        ?>

//ループ部分
<?php if ( $the_query->have_posts() ) : ?>

     <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

          //リスト一覧
          <li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<span class="the-date">イベント日：<?php echo get_post_meta( get_the_ID() , 'イベントの日付' ,true); ?></span>
イベント名：<a class="archive-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>

     <?php endwhile; ?>

     <?php else : ?>

<?php endif; ?>

イベントの日付が近い順に並び変わりましたね。今日以前のイベントも非表示になっています。

ここで取得するイベントの日付ですが、YYYY/MM/DDの形式で設定する理由としては、月や日付が一桁の時に頭に0をつけないで一覧を取得すると、並べ替えがうまくいかないためです。

４．日付を日本語表示にする

さて、イベントの一覧がちゃんと今日以降のもので、日付順にならべかえることができたので、次はイベントの日付表示を日本語式に変更しようと思います。加えて、月や日にちの数字が一桁の時に頭についている0も取り除きたいと思います。

先ほどの説明で、日付順にうまく記事を並べ替えるには、イベントの日付をYYYY/MM/DDの形式に設定するしかないとのことですが、日付を表示する部分でこれを返還する関数を作ってあげます。

まずはfunctions.phpファイルに次のコードを追加

//日付フォーマットを日本語表示に変換
function hidukelizeDate ( $inStr ) {
        preg_match( "#([0-9]*)/([0-9]*)/([0-9]*)#", $inStr, $data );

        $outStr = $data[1].'年'.(int)$data[2].'月'.(int)$data[3].'日';

        return $outStr;
}

参考：http://nanoappli.com/blog/archives/3041

//リスト一覧部分のコードを変更
$eventday = get_post_meta( get_the_ID() , 'イベントの日付' ,true);
$eventday = hidukelizeDate($eventday);
?>

<li id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<span class="the-date">イベント日：<?php echo $eventday; ?></span>
イベント名：<a class="archive-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>

画面結果

日付が日本語の表示になっていれば無事に完了ですね！

５．おまけ：終わったイベントの一覧も取得して表示したい場合

先ほどのループを参考に今日の日付よりも前のイベントの一覧を取得するためのコードもついでに試してみました。

$args = array(
            'meta_key' => $metakey,
            'meta_value' => $metatoday,
            'meta_compare' => '<',
            'orderby' => 'meta_value',
            'order' => 'DESC',
            'type' => 'DATE',
        );
        $old_query = new WP_Query( $args );

先ほど利用したループ処理の$the_query->を$old_query->に置き換えてあげれば同じように記事のリストを過去イベント一覧として取得できます。