WordPressで投稿記事一覧ページ（アーカイブやタクソノミーページ）の表示件数を、訪問者（ユーザー）にセレクトボックスで変更できるようにする例を紹介します。

管理画面の投稿一覧から表示オプションなどで表示件数を変更することができますが、デフォルトのテーマには備わっていません。

何かないかなと思い検索してもあまりいいのがなかったので、作ってみました。

関数作成

まずはfunctions.phpに関数を記述します。

functions.php

カスタムクエリ変数（URLパラメーター）を使いたいので、’query_vars’をフックに$vars配列にクエリ変数を追加する関数を作成。

// カスタムクエリ変数を使いたいので追加
add_filter( 'query_vars', function ($qvars) {

  // クエリ変数を$vars配列に追加
  $qvars[] = 'posts_per_page';
  
  return $qvars;
} );

functions.php

URLにカスタムクエリ変数（?posts_per_page=$num）がある場合、メインクエリの表示件数をオーバーライドする関数を作成。フックはおなじみの’pre_get_posts’。

// URLにカスタムクエリ変数（?posts_per_page=$num）がある場合、メインクエリの表示件数をオーバーライド
add_action( 'pre_get_posts', 'change_post_per_page' );
function change_post_per_page( $query ) {
  global $wp_query;
  if ( !empty( $wp_query->query['posts_per_page'] ) && is_numeric( $wp_query->query['posts_per_page'] ) ) {
    $query->set( 'posts_per_page', $wp_query->query['posts_per_page'] );
  }
}

functions.php

アーカイブページ（カテゴリー・ターム）で表示件数を訪問者が変更できるセレクトボックスを出力する関数を作成。表示件数をセレクトボックスの値を選択するたびに変わる仕様にしています（後述しますが、onChangeを使っています）。

もちろんページ送りにも対応しています。

// アーカイブページ（カテゴリー・ターム）で表示件数を訪問者が変更できるセレクトボックスを出力する関数
function change_post_views() {
  global $wp_query;

  // 表示されているアーカイブのURLを取得し、変数へ代入
  if( is_category() || is_tax() ) {

    // 現在クエリされているオブジェクトを取得
    $queried_object = get_queried_object();

    // カテゴリーID（タームID）からURLを取得
    $output_archive_url = get_term_link( $queried_object->term_id );
  }

  // カスタム投稿の場合
  else {

    // データ取得：カスタム投稿の場合
    $post_type = get_query_var('post_type'); // カスタムポストタイプを取得 ex->product

    // カスタム投稿のアーカイブページのURLを取得
    $output_archive_url = get_post_type_archive_link( $post_type );
  }

  // 現在の表示件数を取得
  $posts_per_page = $wp_query->query_vars['posts_per_page'];

  // 変更する表示件数の値（配列）です。表示したい件数をセットしてください。
  $display_num_array = array( '6', '12', '36' );

  // 以下セレクトボックスHTML部分
  ?>
    <form name="changedisplaynum">
      表示件数：<select name="linkselect" onChange="changeDisplay()">
        <?php // 選択肢（オプション）をループ
        foreach( $display_num_array as $display_num ):

          // 選択肢が現在の表示件数だった場合、selected属性を付与
          if($posts_per_page == $display_num) {
            $selected = ' selected'; 
          } else {
            $selected = '';
          }
          ?>
          <option value="<?php echo $output_archive_url; ?>?posts_per_page=<?php echo $display_num; ?>"<?php echo $selected; ?>><?php echo $display_num; ?>件</option>
        <?php endforeach; ?>
      </select>
    </form>
  <?php
}

JavaScript

JavaScriptではセレクトボックスで選択するたびに、パラメーター付きのアーカイブページに遷移し直すようにしています。

// フォームからの値でページ遷移する
function changeDisplay() {

  // フォームエレメントを取得
  obj = document.changedisplaynum.linkselect;

  // 選択したエレメントの値を取得（今回はURL）
  index = obj.selectedIndex;
  href = obj.options[index].value;

  // パラメーター付きのURLに遷移
  location.href = href;
}

アーカイブページ（カテゴリー・ターム）のテーマファイル

表示件数を変更するセレクトボックスを、出力したいテーマファイルへ記述します。

<?php change_post_views(); // 表示件数を変更するセレクトボックスを出力 ?>