WordPressブログで スマホで見たときとPCで見たときの表示件数を変える

記事表示のレイアウトの関係で PC の場合は3列表示だから

3の倍数で記事を表示したいけど

スマホでは1列に並んでしまうため、1ページあたりの表示件数はそれほど多くなくていい

…という場合に使えるカスタマイズです。

カスタマイズコード

こちらを ご利用のテーマの functions.php やそれに相応するファイルに記述するだけ…

子テーマが作れるテーマなら子テーマ推奨です。

function set_posts_per_page($query) {
    if ( is_admin() || ! $query->is_main_query() )
        return;
 
  if ( wp_is_mobile() ) {
        $query->set( 'posts_per_page', '10' ); // スマホの際の表示件数

  } else {
    // get_option('posts_per_page')
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page' );

このコードではスマートフォンであるかどうかの判定に

wp_is_mobile() 関数を使っています。

そのため、ブラウザの画角を調整してスマホのような表示領域にした場合にはPCの件数を表示します。

動作確認はあくまでもスマートフォンで行ってください。

Pixel3a および iPhone7Plus で確認しました。

設定方法

PCでの表示件数は WordPressの方で行います。

WordPress管理画面→設定 → 表示設定 にアクセスし

「1ページに表示する最大投稿数」に入力したものになります。

スマートフォンでの表示が今回のソースに入っている数値になります。

$query->set( 'posts_per_page', '10' ); // スマホの際の表示件数

　ここの　’10’ の数字を変更してください。

どっちも同じくらいの数字にすると地味なので派手にやっちゃってください！

以上でーす！