記事や実績一覧などのリスト表示については、PCの場合は多くてもいいけど、スマホの場合はあまり多くしたくないと思うレイアウトもあるかと思います。そういった場合にスマホとPCで一覧のリスト数を分けたい場合の処理についてお知らせします。

メインループの場合

メインループとは、基本的に

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
<?php endwhile; endif; ?>

で括られたループで、1ページあたりの表示数はWordpress管理画面の「設定」→「表示設定」→「1ページに表示する最大投稿数」で設定します。主に、index.phpやarchive.phpといったページで使用します。

メインループの場合、functions.phpに以下を追記します。

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' );

if is_mobileでモバイルの場合の条件分岐を行い、その際に3行目の10のところの数字を変えればスマホの場合の投稿数が変わります。

 

サブループの場合

サブループとは自分で作るループで、サブクエリで取得したデータを出力するための繰り返し処理です。WP_Queryを使って記事を取得している場合の表示記事数の変更方法です。メインループと違って1ページに表示する最大投稿数とは全く関係がなくなるので、そこは変更する必要ありません。

<?php
  //スマホの場合とPCの場合の分岐
  if( is_mobile() ){
  //スマホまたはタブレットの時
    $num = 5;
  } else {
  //PCの時
    $num = 10;
  }
  $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; ?>//リセットを忘れない

こういった処理を加えてあげることで、よりユーザビリティ向上に繋がりますね！

2022.10.28制作コラム

関連情報