【WordPress】PCとスマホで投稿一覧に表示する記事の件数を変更する方法

ワードプレスで投稿した記事を一覧として表示することはよくあります。

PCではカラム数を増やすことで、表示する記事数が多くても収まり良く見えますが、デザイン的に１カラムとなる場合が多いスマホ表示では表示する記事数が多すぎると冗長化してしまいます。

ブログなどのメディアサイトならそれでも問題ないかもしれませんが、コーポレートサイトなどメディアがメインではない場合は、サイトの目的達成の弊害になってしまう恐れがあるので、スマホの時は記事の表示件数を減らし、デザインとのバランスをとった方がよいでしょう。

ということで今回は「PCとスマホで投稿一覧に表示する記事数を変える方法」をご紹介します。

目次非表示

メインループの場合
- functions.phpにコードを記述
サブループの場合
- ‘posts_per_page’の値を分岐する
補足

目次へ

メインループの場合

メインループでPCとスマホで表示件数を変更する場合は、ワードプレスのダッシューボードの設定から表示設定の1ページに表示する最大投稿数を設定しておきましょう。

この数字がPCで表示された時の記事の件数になります。

functions.phpにコードを記述

下記のコードをfunctions.phpに記述することでPCは表示設定から設定した件数が表示され、スマホではコードに記述した件数が表示されるようになります。

function mobile_posts_per_page( $query ) {
  if ( ! is_admin() && is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', 10 ); //10件表示
  }
}
add_action( 'pre_get_posts', 'mobile_posts_per_page' );

サブループの場合

WP_Queryを使って記事を取得している場合の表示記事数の変更方法です。メインループと違ってワードプレスの表示設定の記事の件数に依存しないため、1ページに表示する最大投稿数の数は変更する必要がありません。

‘posts_per_page’の値を分岐する

PCとスマホで分岐をしますが、表示件数だけを変えられればいいのでposts_per_pageの値を変数に代入して呼び出します。

今回はnumという変数に数値を指定して、is_mobileで分岐をしていきます。

<?php
  //スマホ・PCで表示件数を変更する条件分岐
  if( is_mobile() ){
  //スマホ・タブレットの時
    $num = 8;
  } else {
  //PCの時
    $num = 15;
  }
  $args = array(
  'post_type' => 'post',
  'posts_per_page' => $num, //ここを変数にして中身を分岐する
  ); 
  $my_query = new WP_Query($args);
  if ($my_query->have_posts()) :
  while ($my_query->have_posts()) : $my_query->the_post();
?>

//～ループ内で表示させたい内容を記述～

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