WordPressでカスタムフィールドを使い、イベントの終了日付順でソートして、かつ、イベントが終了したら【終了】と自動で表示する方法

7Fニュース Web制作・Webサービス
2015.08.07

こんにちは。コワーキングスペース7Fの星野邦敏です。

WordPressを使うと、カテゴリー一覧アーカイブやタグ一覧アーカイブなどで、投稿日付順にソートされて並ぶと思います。
しかしながら、Webサイトやページによっては、別の何らかの規則によって記事の並び順を考えたい場合も多いと思います。

そこで、ここでは、新着情報も書くけれど、その中にイベント記事もあって、そのイベント一覧を、WordPressでカスタムフィールドを使い、イベントの終了日付順でソートして、かつ、イベントが終了したら【終了】と自動で表示する方法をご紹介したいと思います。

まずは、管理画面にデータベースにカスタムフィールドの入力枠を作ります。テーマのfunctions.phpに直接書く方法もありますが、意外に面倒なので、ここでは「Custom Field Template」プラグインを使います。

その上で、WordPressのテーマテンプレート（下記は固定ページでテンプレートを作って書く場合です）に

<?php $list_cnt = 9; //記事数
$sticky = get_option('sticky_posts'); if ( !empty($sticky) ) $list_cnt -= count($sticky); ?>
<?php query_posts('posts_per_page=' . $list_cnt . '&paged='.$paged . '&meta_key=終了日&orderby=meta_value&order=DESC'); ?>
<?php while ( have_posts() ) : the_post(); ?>
ここにWordPressのテンプレートタグなど
<?php endwhile; ?>

と書きます。

「&meta_key=終了日&orderby=meta_value&order=DESC」
部分が肝でして、これで、投稿日付順ではなくて、カスタムフィールドに入力した終了日の日付順で、未来の日付の記事が一番上に来るようになります。

その上で、例えば、

<h2><a href="<?php the_permalink(); ?>">
<?php $end = get_post_meta($post->ID,'終了日',true); ?>
<?php if (strtotime(date('Y-m-d')) > strtotime($end))
{
echo '【終了】';
}
?>
<?php the_title(); ?></a></h2>

と書けば、記事タイトルの横に、イベントが終われば自動で【終了】と表示されます。

そのような実装で出来たページが、私達が制作をしたWebサイトとしては、例えば、
コンフォルト | インテリアの心地よさをつくる
の中の
開催中のイベント | コンフォルト
というページです。
このWebサイトも、このコワーキングスペース7Fと同じ独自のWordPressテーマをベースとして制作しています。

上記のような実装は特殊なので、より汎用化したWordPressテーマの公開準備をしていますので、公開した際にはぜひ使ってみてください！