WordPressでカスタム投稿タイプの一覧をトップページに表示

最近Wordpressのカスタマイズも行っているが、表題の件に対してハマりまくった。
その対応の備忘。

やりたいこと

  • カスタム投稿タイプ(news)の記事一覧をサイトのトップページに表示する。
  • 記事一覧はWP-PageNaviプラグインを使用してページ送りさせる。

当初はページ送りすら表示されず、またページ送りが表示されたと思ったら2ページ目がNot Foundになったり、一覧に「5」ページ表示しようと思ったら正常な件数が表示されなかったりと、色々な要因でハマりかなり時間を要した。。。

設定方法に関して下記にまとめる。
尚、Wordpressのバージョンは4.9.3。

設定方法

まず「news」の記事を「5件」表示させるためには、funcitons.phpにて設定を行う。

function my_news_get_posts( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) return;

    if ( is_front_page() ) {
        $query -> set( 'post_type', 'news' );
        $query -> set( 'posts_per_page', '5' );
    }
}
add_action( 'pre_get_posts', 'my_pre_get_posts' );

「post_type」で該当のカスタム投稿タイプの記事を指定。「posts_per_page」で一覧表示する記事の件数を指定する。
「pre_get_posts」はWordpressがクエリを発行する前に呼び出されるため、独自に定義したクエリをメインクエリ(=メインループ内の値)として使用することができる。

次にfront-page.phpにてループを回す。と言ってもメインループを回すのでお決まりの記述。ループが終了したらWP-PageNaviプラグインを表示するための関数を記述する。

<?php
if ( have_posts() ) : 
    while ( have_posts() ) : the_post();
        (省略)
    endwhile;
endif;
?>

// pagination
<div><?php wp_pagenavi(); ?></div>

以上で設定は完了。

当初はメインループではなく、ページテンプレート上でWP_Queryオブジェクトを生成してサブループを回していた。
ただそれだとページネーション生成後、2ページ目のURL(/news/page=2)が固定ページとして認識されていたようで404 NotFoundのエラーが表示されたため、メインループでページを生成するようにした。
また色んなページをググった結果、管理画面上の「設定 > 表示設定 > 1ページに表示する最大投稿数」を調整する記事も見られたが、最終的にはそこの値を調整しなくても(デフォルトの10件でも)動作している。

参考

WordPressのフロントページをカスタム投稿の一覧にする

【wordpress】pre_get_postsを使ってみませんか?

コメントを残す

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

twelve + 18 =

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください