WordPressで投稿一覧をカスタムフィールドの日付で並び替える方法

カスタムフィールドで設定した日付順で、投稿記事の一覧を表示する手順の備忘録です。

サンプルでは、ACFを使用して作成したカスタムフィールド「開催日」の日付が新しい順で投稿を一覧表示します。

カスタムフィールドの設定

並び替えに使用する日付のカスタムフィールドの設定は以下の通りです。

ACFの「日付選択ツール」のフィールドタイプで、「開催日」を作成しています。

ACFでカスタムフィールドを作成する方法は、こちらの記事で詳しくまとめています。

投稿一覧を表示

続いて、投稿記事の一覧を作成するコードをテンプレートファイルに記述します。

<?php
  $args = array(
    'post_type' => 'post',
    'posts_per_page'=> 3,
  );
  $query = new WP_Query($args);
?>
<?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>

--- ここに一覧表示する内容を記載 ---

<?php endwhile; endif; wp_reset_postdata(); ?>

WP_Query()で取得した投稿ページをwhileでループして一覧表示しています。

配列のpost_typeで取得する投稿の種類を、posts_per_pageで取得する件数を設定しています。

日付フィールドで並びかえ

次に、投稿記事をカスタムフィールドの日付が新しい順に並べ替えます。

以下のコードを、取得する情報を絞り込む配列$argsの中に追記します。

  'orderby' => 'meta_value',
  'order' => 'DESC',
  'meta_query' => array(
    array(
      'key' => 'event_day',
      'type' => 'DATE'
    )
  )

配列$argsの中にmeta_queryで絞り込み条件の配列を設定しています。keyに設定している「event_day」は並び替えの対象となる「開催日」フィールドのスラッグです。日付なのでtypeに「DATE」を設定します。

以下が、絞り込み条件を追加した全体のコードです。

<?php
  $args = array(
    'post_type' => 'post',
    'posts_per_page'=> 3,
    'orderby' => 'meta_value',
    'order' => 'DESC',
    'meta_query' => array(
      array(
        'key' => 'event_day',
        'type' => 'DATE'
      )
    )
  );
  $query = new WP_Query($args);
?>
<?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>

--- ここに一覧表示する内容を記載 ---

<?php endwhile; endif; wp_reset_postdata(); ?>

日付が古い順に表示したい場合は、orderに「ASC」を設定します。

正常に並べ替えされない場合

WP_Queryで日付順に並べる場合、meta_keyを使用する方法もありますが、意図通りに投稿が並ばないことがあります。

$args = array(
  'post_type' => 'post',
  'orderby' => 'meta_value',
  'meta_key' => 'event_day',
  'order' => 'DESC'
);

上記のようにフィールド名をmeta_keyに設定し、orderbyを「meta_value」または「meta_value_num」で並び変えを実施しましたが、一部の日付が前後間違った並びで表示されてしまいました。

こちらの不具合も、meta_queryの配列で設定することで解消できました。

Share on Twitter
関連記事
WordPressでショートコードをテンプレートに直接記入する方法
WordPressでショートコードをテンプレートに直接記入する方法
カスタムフィールドのテキストを文字数を制限して表示する方法
カスタムフィールドのテキストを文字数を制限して表示する方法
ショートコードの表示がページ上部にしか出てこないときの解決策
ショートコードの表示がページ上部にしか出てこないときの解決策