投稿とカスタム投稿の表示件数を変更する

表示件数を変更、投稿とカスタム投稿

WordPressでサイトを制作していると、よくある案件として以下のようにページ毎に投稿の表示件数を変えるといった要件があります。

  • トップページに新着ニュースを3件表示させる。
  • ニュース一覧ページでは10件表示させる。
  • トップページにニュースとは別で商品(カスタム投稿)を5件表示させる。
  • 商品(カスタム投稿)一覧ページでは8件表示させる。

このコードを毎回書くのが面倒だったので、記事として書いてしまい、自分用のテンプレートとしました。
どうぞコピペして使ってください。

投稿を10件表示にする

まず最初にやることとしては、一覧ページに表示させる投稿件数の設定します。

管理画面の左メニューより、[設定] → [表示設定]

  • 「最新の投稿」にチェックを入れる
  • 1ページに表示する最大投稿数は「10投稿」に設定

とりあえず以上の設定だけで一覧ページでの表示件数は10件にできました。
一覧ページを作っていないのでまだ表示はできませんが、ここについては後ほど実装します。

トップページに新着記事を3件表示

先程1ページに表示する最大投稿数は10投稿に設定しました。これをトップページでは新着投稿を3件表示させるようにします。

functions.php と front-page.php に以下を記述します。

function news_posts_per_page($query)
{
    if (is_admin() || !$query->is_main_query()) {
        return;
    }
    if ($query->is_front_page()) {
        $query->set('posts_per_page', '3');
    }
}
add_action('pre_get_posts', 'news_posts_per_page');
<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>      
        <!-- 投稿内容 -->
    <?php endwhile; ?>
<?php endif; ?>

これでトップページは新着投稿を3件表示にできました。

投稿のアーカイブページを作る

投稿にアーカイブ(投稿一覧)をもたせるようにします。

function post_has_archive($args, $post_type)
{
    if ('post' == $post_type) {
        $args['rewrite'] = true;
        $args['has_srchive'] = 'news'; // アーカイブページ名
        $args['label'] = 'ニュース';
    }
    return $args;
}
add_filter('register_post_type_args', 'post_has_archive', 10, 2);

投稿一覧ページへのリンクを作ります。

<a href="<?php echo esc_url(home_url('news')); ?>">ニュース一覧</a>

記載後にパーマリンク設定で「変更を保存」してください。これを行わないと設定が反映されません。

以上まででニュースをトップページではを3件表示させ、一覧ページは10件させることができました。

商品投稿ページ(カスタム投稿)を作る

現在1つしか投稿タイプはありませんが、追加でもう1つの投稿タイプを作ります。

function create_post_type()
{
    register_post_type('products', [ // 投稿タイプ名
        'labels' => [
            'name'          => '商品', // 管理画面上で表示する投稿タイプ名
            'singular_name' => 'products',    // カスタム投稿の識別名
        ],
        'public'        => true,  // 投稿タイプをpublicにする
        'has_archive'   => true, // アーカイブ機能ON/OFF
        'menu_position' => 5,     // 管理画面上での配置場所
        'show_in_rest'  => true,  //「Gutenberg」を有効にする
    ]);
}
add_action('init', 'create_post_type');

ここも記載後にパーマリンク設定で「変更を保存」してください。

これで管理画面にニュースと商品の投稿タイプができ、2つ別々の投稿が作れるようになりました。

トップページに商品(カスタム投稿)を5件表示

トップページでは商品(カスタム投稿)を5件表示させるようにします。

<?php
$args = [
    'post_type' => 'products',
    'posts_per_page' => 5,
    'paged' => $paged
];
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()) : ?>
    <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
    <!-- 投稿内容 -->
    <?php endwhile; ?>
    <?php wp_reset_postdata(); ?>
<?php endif; ?>

商品一覧ページヘのリンクをつくる。

<a href="<?php echo esc_url(home_url('products')); ?>">商品一覧</a>

注意点として、上記にアクセスして表示されるテンプレートはarchive.phpになります。

このままではニュース一覧ページもarchive.phpが出力され、商品一覧ページもarchive.phpが出力されてしまいます。
ページによってレイアウトを変えたい場合は、ニュース一覧ページのファイル名をarchive-news.phpにしたり、商品一覧ページはarchive-products.phpにするなど、スラッグをファイル名にすればそれぞれ違ったファイルで出力することができます。

以上、ページによって投稿の表示件数を変更する方法でした。

まとめ

あまり難しいコードではありませんが、初心者の方はコードの内容がよくわからないと思います。ですが問題ないです。
なぜなら今完全に理解しようとしなくても、そのうち自然と理解できるからです。

私も最初の頃、コードの内容を理解せずに、Webサイトで拾ってきたコードを貼り付けては、
「…なんかよくわからないけど、動作したからOK(^_^;)」
なんて思ってました。

ですがサイトを作っていく内にだんだんと概念を理解できるようになってきます。

たしかに理解してからコードを書いたほうがいいかもしれませんが、それよりコピペでもいいから実装できる能力を身につけるほうが大事だと思っています。
なのでコピペでもいいからガンガン手を動かしましょう!

それではお疲れ様でした!

この記事を書いた人

けーた

高校卒業してから15年間勤めた会社を退職→脱サラしてWeb制作。
現在はWordPressサイト構築とShopifyストア構築をメインに、副業で物販をやっています。