【WordPress】PCとスマホで記事一覧の表示数を変える方法

PCとスマホで記事一覧の表示数を変える理由
記事一覧の表示数を制御する方法とは？
【応用編】タブレットも考慮した表示数の調整
まとめ

PCとスマホで記事一覧の表示数を変える理由

なぜデバイスごとに表示数を変えるべきか？

WordPressのテーマ開発では、記事一覧ページの表示数をPCとスマホで変えることが重要です。

なぜなら、PCとスマホでは画面の大きさやユーザーの操作方法が異なり、同じ設定では使い勝手が悪くなることがあるからです。

たとえば、PCでは広い画面を活かして1ページあたり10〜20件の記事を表示しても違和感はありません。

しかし、スマホでは縦に長くスクロールすることが多く、同じ数の投稿を表示するとユーザーが目的の記事にたどり着くまでに時間がかかってしまいます。

そのため、スマホでは表示件数を減らして、コンパクトにまとめるのが適切です。

スマホでは一覧の見やすさが重要

スマホユーザーは指でスクロールしながら記事を探します。そのため、

1つ1つの記事が大きすぎるとスクロールが大変になる
情報量が多すぎると、どこに何があるか分かりにくくなる
ロード時間が長くなり、離脱率が上がる

といった問題が発生します。

スマホ向けには、シンプルなリスト形式で少ない記事数を表示し、ユーザーがスムーズに目的の情報へアクセスできるようにすることが重要です。

ユーザー体験（UX）向上のメリット

PCとスマホで適切な記事数を設定することで、以下のようなメリットがあります。

読みやすさの向上
スマホではコンパクトに、PCでは情報量を増やすことで、どちらの環境でも最適な閲覧体験を提供できます。
ページの読み込み速度が改善
スマホでは表示する記事数を減らすことで、データの読み込み量が減り、ページの表示速度が向上します。特にモバイル回線では重要なポイントです。
ユーザーの離脱率を下げる
長すぎる一覧ページはユーザーの離脱につながるため、適切な記事数に調整することで最後まで閲覧してもらいやすくなります。
SEO対策にも効果的
モバイルフレンドリーなサイトはGoogleの評価も高くなり、検索結果での上位表示が期待できます。

このように、PCとスマホで記事一覧の表示数を調整することは、ユーザーの利便性を高めるだけでなく、SEOやサイト全体のパフォーマンス向上にもつながる重要なカスタマイズです。

次のセクションでは、WordPressでPCとスマホの表示数を切り替える具体的な方法について解説していきます。

記事一覧の表示数を制御する方法とは？

WordPressで記事一覧を取得する方法

WordPressでは、記事一覧を取得する方法として WP_Query や get_posts があります。

テーマやプラグインの開発時に適切な方法を選ぶことで、柔軟なカスタマイズが可能になります。

記事を取得してループで表示するコード

ここではスマホ表示の際には記事を５つ表示し、それ以外の時は10個の記事を表示するように$numにそれぞれの数値を入れ、foreachでループ表示しています。

<?php
 if( wp_is_mobile() ){
    $num = 5;  //スマホの表示数
} else {
    $num = 10;  //PCの表示数
}
 $args = array(
    'numberposts' => $num,      //表示（取得）する記事の数
);
$posts = get_posts($args);
if ($posts) : foreach ($posts as $post) : setup_postdata($post); 
        <div class="card">
            <h3><?php the_title(); ?></h3>
            <div class="img"><?php the_post_thumbnail(); ?></div>
            <p><?php the_excerpt(); ?></p>
            <a href="<?php the_permalink(); ?>" class="btn_syosai">詳細を見る</a>
        </div>
    <?php endforeach; ?>
<?php else : //記事が無い場合
?>
    <p>記事はまだありません。</p>
<?php endif;
wp_reset_postdata(); //クエリのリセット 
?>

コードの解説

wp_is_mobile() を使って条件分岐

 if( wp_is_mobile() ){
    $num = 5;  //スマホの表示数
} else {
    $num = 10;  //PCの表示数
}

WordPressには wp_is_mobile() という関数があり、これを使うとデバイスに応じた条件分岐が可能です。

今回の記事の肝の部分ですね。

ただし、これはタブレットも「モバイル」として判定するため、必要に応じてさらに条件を追加することも考えられます。

スマホで表示する時は記事を５つ表示し、PCの時には１０個の記事を表示します。

get_postとforeachで記事を表示する

 $args = array(
    'numberposts' => $num,      //表示（取得）する記事の数
);
$posts = get_posts($args);
if ($posts) : foreach ($posts as $post) : setup_postdata($post); 
        <div class="card">
            <h3><?php the_title(); ?></h3>
            <div class="img"><?php the_post_thumbnail(); ?></div>
            <p><?php the_excerpt(); ?></p>
            <a href="<?php the_permalink(); ?>" class="btn_syosai">詳細を見る</a>
        </div>
    <?php endforeach; ?>

$num経由で取得した数をnumberpostsに格納し、get_postからforeachを使って記事を取得してきます。

ここでは取得した各記事のタイトル<?php the_title(); ?>、サムネイル<?php the_post_thumbnail(); ?>、本文<?php the_excerpt(); ?>、リンク<?php the_permalink(); ?>を表示するように書いています。

記事が存在しない時の表記も書いておく

記事が存在しない場合には「記事はまだありません」と表示するようにしてあります。

<?php else : //記事が無い場合
?>
    <p>記事はまだありません。</p>
<?php endif;
wp_reset_postdata(); //クエリのリセット 
?>

この方法を使えば、テーマに依存せず簡単に記事一覧の表示数を制御できます。

次のセクションでは、タブレットも考慮した表示数の変更方法を紹介します。

カテゴリーを指定する

特定のカテゴリーの記事だけを表示したい場合は$args = arrayにcategoryでカテゴリーIDを記述すればOKです。

こんな感じ。

$args = array(
'numberposts' => $num, //表示（取得）する記事の数
'category' => '31', //カテゴリーの指定
);

カテゴリーIDが31に属している記事に特定しています。

カテゴリーIDの調べかたは以前の記事で紹介しているので、参考にしてみてください。

【WordPress】カテゴリーIDのかんたんな調べ方

カテゴリーごとにアーカイブページのデザインを変えたり、出向する広告の種類を変えたりするときにカテゴリーIDを使って行うパターンって結構ありますよね。 WordPressを使ったサイト作成をしている方や、WordPressを使って記事を書いている方でも、一度は探したことがあるじゃないですか？そんな方に簡単なカテゴリーIDの調べ方をご紹介します！

【応用編】タブレットも考慮した表示数の調整

wp_is_mobile() の落とし穴（PCとタブレットの区別ができない）

wp_is_mobile() はスマホとタブレットを同じ「モバイル」として判定するため、タブレットだけを特別に処理したい場合には向いていません。

そのため、別の方法でタブレットを区別する必要があります。

CSSの display: none; を活用する方法

CSSを利用して、特定の画面サイズごとに表示を制御する方法もあります。

@media (max-width: 767px) {
  .pc-only { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .tablet-only { display: block; }
  .pc-only, .mobile-only { display: none; }
}

これにより、特定のデバイスごとに表示をコントロールできます。

JavaScript（window.innerWidth）で動的に変更

JavaScriptを使えば、ブラウザの画面サイズを検出して表示数を動的に変更できます。

document.addEventListener("DOMContentLoaded", function() {
    let postsPerPage;
    if (window.innerWidth <= 767) {
        postsPerPage = 5; // スマホ
    } else if (window.innerWidth <= 1024) {
        postsPerPage = 8; // タブレット
    } else {
        postsPerPage = 10; // PC
    }
    console.log("表示する記事数: " + postsPerPage);
});

この方法を使うと、ページ読み込み時に画面サイズを検出して適切な記事数を決定できます。