カスタム投稿タイプを表示する(アーカイブページ編)

カスタム投稿タイプの、アーカイブページの作成方法です。
以下の前提で、話を進めます。

  • カスタム投稿名:gourmet
  • アーカイブテンプレート名:archive-gourmet.php
    ※archive-カスタム投稿タイプ名.php
    ※カスタム投稿タイプ「gourmet」用のテンプレートを作成することで、独自のレイアウトデザインが作成できます。

archive-○○○.php

アーカイブテンプレート「archive-gourmet.php」には、メインループを記述します。

「メインループA」も「メインループB」も、同じ意味です。
※「メインループB」は「メインループA」を短くしているだけです。

メインループA

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

    <!-- ▽ ループ開始 ▽ -->

    <h2><?php the_title(); ?></h2>
    <div class="entry-body">
      <?php the_content(); ?>
    </div>
    
    <!-- △ ループ終了 △ -->

  <?php endwhile; ?>
<?php endif; ?>

メインループB

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

  <!-- ▽ ループ開始 ▽ -->

  <h2><?php the_title(); ?></h2>
  
  <div class="entry-body">
    <?php the_content(); ?>
  </div>
  
  <!-- △ ループ終了 △ -->

<?php endwhile; endif; ?>

pre_get_posts

functions.phpに「pre_get_posts」というアクションフックを書いて、表示を制御します。
1ページの表示件数だけでなく、ソート順を変更したり、カスタムフィールドの内容で並べ替えたり、いろいろできます。

1ページの表示件数を指定

1ページに何件の投稿を表示させるかは、WordPressの「設定」→「表示設定」→「1ページに表示する最大投稿数」の数字が反映されますが、「pre_get_posts」で、以下のように記述することで、特定のカスタム投稿のアーカイブページの1ページの表示件数を指定することができます。

例)表示件数を10件

function change_posts_per_page($query) {

  /* 管理画面,メインクエリに干渉しないために必須 */
  if( is_admin() || ! $query->is_main_query() ){
   return;
  }
  
  /* カスタム投稿「gourmet」アーカイブページの表示件数を10件にする */
  if ( $query- > is_post_type_archive( 'gourmet' ) ) {
    $query- > set( 'posts_per_page', '10' ); // 10件
    return;
  }

}

add_action( 'pre_get_posts', 'change_posts_per_page' );

1ページの表示件数を指定 & 投稿日の昇順でソート

デフォルトが降順(新しい記事から表示)なので、めったに使わないかも知れませんが…。

例)表示件数を10件 & 投稿日の昇順でソート

function change_posts_per_page($query) {

  /* 管理画面,メインクエリに干渉しないために必須 */
  if( is_admin() || ! $query->is_main_query() ){
   return;
  }
  
  /* カスタム投稿「gourmet」アーカイブページの表示件数を10件、投稿日の昇順でソート */
  if ( $query->is_post_type_archive( 'gourmet' ) ) {
    $query -> set( 'posts_per_page', '10' ); // 10件
    $query -> set('order','ASC'); // 昇順
    $query -> set('orderby', 'date'); // 投稿日
    return;
  }

}

add_action( 'pre_get_posts', 'change_posts_per_page' );

特定の日以降の全ての記事を表示

これもちょっとめずらしいかな…。

例)2017年1月1日以降の記事をすべて表示

function change_posts_per_page($query) {

  /* 管理画面,メインクエリに干渉しないために必須 */
  if( is_admin() || ! $query->is_main_query() ){
   return;
  }
  
  /* カスタム投稿「gourmet」アーカイブページを2017年1月1日以降の記事をすべて表示 */
  if ( $query->is_post_type_archive( 'gourmet' ) ) {
    $query -> set( 'posts_per_page', '-1' ); // 全記事
    $query->set( 'date_query',
      array(
          array(
          'after' => 'January 1st, 2017' // 2017年1月1日以降
         )
       )
    );
    return;
  }

}

add_action( 'pre_get_posts', 'change_posts_per_page' );

特定のカスタムフィールドに入力がある記事を除外 & 20件表示

これもめずらしいかもですが、最近必要があって調べました。以下の記事を参考にさせていただきました。ありがとうございます。

WordPressで指定したカスタムフィールドが存在しない場合の投稿一覧を取得する方法

例)カスタムフィールド「wpcf-link-url」に入力があるものを除外して20件表示

function change_posts_per_page($query) {

  /* 管理画面,メインクエリに干渉しないために必須 */
  if( is_admin() || ! $query->is_main_query() ){
   return;
  }
  
  /* カスタム投稿「gourmet」アーカイブページをカスタムフィールド「wpcf-link-url」に入力がある記事を除外して20件表示 */
  if ( $query->is_post_type_archive( 'gourmet' ) ) {
    $query -> set( 'posts_per_page', '20' ); // 20件
    $query->set( 'meta_key', 'wpcf-link-url' ); // カスタムフィールド「wpcf-link-url」
    $query->set( 'meta_compare', 'NOT EXISTS' ); // 入力があるものを除外
    return;
  }

}

add_action( 'pre_get_posts', 'change_posts_per_page' );

複数のカスタムフィールドのデータでソートし、20件表示

これも必要があって、調べたものです。結構よく使います。
2つのカスタムフィールド入力された数字をもとに、ソートしています。

例)カスタムフィールド「wpcf-total-star」でまずソート、その後カスタムフィールド「wpcf-total-ranking」でソートして、20件表示

function change_posts_per_page($query) {

  /* 管理画面,メインクエリに干渉しないために必須 */
  if( is_admin() || ! $query->is_main_query() ){
   return;
  }
  
  /* カスタム投稿「gourmet」アーカイブページをカスタムフィールド「wpcf-total-star」でまずソート、その後「wpcf-total-ranking」でソートして20件表示 */
  if ( $query->is_post_type_archive( 'gourmet' ) ) {
		$query->set( 'posts_per_page', '20' );

    $query->set( 'orderby',
      array(
        'meta_custom_star' => 'DESC', // 降順
        'meta_custom_ranking' => 'DESC' // 降順
      )
    );
    
    $query->set('meta_query',
      array(
        'meta_custom_star' => array(
          'key' => 'wpcf-total-star', // カスタムフィールド wpcf-total-star でソート
          'orderby' => 'meta_value_num'
        ),
        'meta_custom_ranking' => array(
          'key' => 'wpcf-total-ranking', // カスタムフィールド wpcf-total-ranking でソート
          'orderby' => 'meta_value_num'
        )
      )
    );

    return;
  }

}

add_action( 'pre_get_posts', 'change_posts_per_page' );

こちらの参考サイト様がわかりやすくて、本当にお世話になりました。ありがとうございます。

参考サイト

[Wordpress]pre_get_postsを使いこなす!pre_get_posts使い方まとめ | EMiAC-Works

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

keyboard_arrow_upTOP