この記事ではWordPressで
記事一覧ページの表示件数を
プルダウンで選択可能にする方法（ソースコード）
をご紹介します。
WordPressで記事一覧を表示する場合、home.phpやアーカイブページでメインクエリを回したり、任意のテンプレートファイルでサブクエリを生成することになります。
そのとき、一度に表示する記事件数は、メインクエリならWordPress管理画面、サブクエリなら同じくWordPress管理画面かposts_per_pageオプションで設定します。
ケケンタ今回ご紹介する方法を併用することで、サイトを訪れたユーザ自身が、任意の件数で記事を一覧表示できるようになります！
記事件数が多いサイトなどで特に有効かと思います。
ぜひご活用いただければ幸いです！
運動不足、気になっていませんか？
もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！
ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！
ケケンタ無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！
タイマースタート
3:00
【ソースコード】記事一覧ページの表示件数をプルダウンで選択可能にする
大前提として、WordPress標準機能のページネーションが設置されている必要があります。
（表示件数を変更する機能なので、ページネーションが設置されていないと表示しきれない記事が出てきてしまいます）
なお、大変申し訳ございませんが、プラグインで設置したページネーションでの検証は行っておりません。
以下がページ内の記事表示件数をプルダウンメニューで選択できるようにするためのソースコードです。
functions.php
/*******************************
* プルダウンから表示件数を変更
* ***************************** */
// クエリパラメータを追加
function add_query_vars_filter($vars) {
$vars[] = "posts_per_page";
return $vars;
}
add_filter('query_vars', 'add_query_vars_filter');
// 投稿クエリを修正
function modify_posts_per_page($query) {
// 「メインクエリ」または「home.php」または「アーカイブページ」を対象とする
// ※「is_post_type_archive」などの条件分岐タグで条件を追加すればカスタム投稿タイプのアーカイブページも設定可能
if (!is_admin() && $query->is_main_query() && (is_home() || is_archive()) {
$posts_per_page = get_query_var('posts_per_page', 10); // デフォルトは10ページ表示
$query->set('posts_per_page', $posts_per_page);
}
}
add_action('pre_get_posts', 'modify_posts_per_page');
// ページネーションリンクに表示件数情報を追加する
function add_posts_per_page_to_pagination($links) {
if (is_archive() || is_home()) {
global $wp_query;
$posts_per_page = get_query_var('posts_per_page');
foreach ($links as $key => $link) {
$links[$key] = add_query_arg('posts_per_page', $posts_per_page, $link);
}
}
return $links;
}
add_filter('paginate_links', 'add_posts_per_page_to_pagination');表示件数を変更できるようにしたいテンプレートファイルに設置
<!-- 表示記事数選択フォーム（プルダウン） -->
<form method="get" id="posts-per-page-form">
<label for="posts_per_page">表示件数：</label>
<select name="posts_per_page" id="posts_per_page" onchange="this.form.submit();">
<option value="5" <?php selected(get_query_var('posts_per_page'), 5); ?>>5</option>
<option value="10" <?php selected(get_query_var('posts_per_page'), 10); ?>>10</option>
<option value="15" <?php selected(get_query_var('posts_per_page'), 15); ?>>15</option>
<option value="20" <?php selected(get_query_var('posts_per_page'), 20); ?>>20</option>
</select>
<!-- プルダウンが変更されたら１ページ目に戻る -->
<input type="hidden" name="paged" value="1">
</form>CSS（例）
/* 例: プルダウンメニューのスタイル */
#posts-per-page-form {
margin-bottom: 20px;
}
#posts_per_page {
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}以下より、各ソースコードの役割について解説していきます！
解説① クエリパラメータを追加
// クエリパラメータを追加
function add_query_vars_filter($vars) {
$vars[] = "posts_per_page";
return $vars;
}
add_filter('query_vars', 'add_query_vars_filter');このソースコードでクエリパラメータを追加しています。
クエリパラメータとは、URLの末尾に追加可能なデータのことです。
例えば以下のようなURLで、「?」の後ろについているのがクエリパラメータです。
（例）https://kekenta-it-bloh.com?user_name=kekenta
※「user_name」という変数に「kekenta」というデータが格納されていることを意味します。
ケケンタ以下はPHPの記事ですが、クエリパラメータについても詳しく解説しています。ご興味のある方はぜひご覧ください。
解説② 投稿クエリを修正
// 投稿クエリを修正
function modify_posts_per_page($query) {
// 「メインクエリ」または「home.php」または「アーカイブページ」を対象とする
// ※「is_post_type_archive」などの条件分岐タグで条件を追加すればカスタム投稿タイプのアーカイブページも設定可能
if (!is_admin() && $query->is_main_query() && (is_home() || is_archive()) {
$posts_per_page = get_query_var('posts_per_page', 10); // デフォルトは10ページ表示
$query->set('posts_per_page', $posts_per_page);
}
}
add_action('pre_get_posts', 'modify_posts_per_page');このソースコードでは、ループ処理における「記事の表示件数」を上書きしてます。
具体的には、ハイライト行のget_query_var()で、URLに含まれるクエリパラメータからposts_per_page＝表示件数を取得しています。
例えば、「https://kekenta-it-blog.com/archive?posts_per_page=5」というURLでそのページへアクセスがあった場合、posts_per_pageには「5」が格納され、１ページに５件の記事が表示されます。
ケケンタget_query_varの第２引数は、posts_per_pageというクエリパラメータがURLに含まれていなかった場合に設定されるデフォルト値です。
また、コメントでも記述していますが、条件分岐タグを追加することで、記事一覧の表示件数を制御する投稿タイプなどを増やすことも可能です。
（例１）カスタム投稿タイプ「sample-post-type」を追加
// 投稿クエリを修正
function modify_posts_per_page($query) {
if (!is_admin() && $query->is_main_query() && (is_home() || is_archive() || is_post_type_archive('sample-post-type')) {
$posts_per_page = get_query_var('posts_per_page', 10);
$query->set('posts_per_page', $posts_per_page);
}
}
add_action('pre_get_posts', 'modify_posts_per_page');（例２）home.phpを除外し、カスタム投稿タイプ「sample-post-type01」、「sample-post-type02」を追加
// 投稿クエリを修正
function modify_posts_per_page($query) {
if (!is_admin() && $query->is_main_query() && (is_archive() || is_post_type_archive(array('sample-post-type01', 'sample-post-type02'))) {
$posts_per_page = get_query_var('posts_per_page', 10);
$query->set('posts_per_page', $posts_per_page);
}
}
add_action('pre_get_posts', 'modify_posts_per_page');このように条件分岐タグで自由に条件部分を変更できるので、ご自身の環境に合うようにご調整いただければと思います。
解説③ ページネーションリンクに表示件数情報を追加する
// ページネーションリンクに表示件数情報を追加する
function add_posts_per_page_to_pagination($links) {
if (is_archive() || is_home()) {
global $wp_query;
$posts_per_page = get_query_var('posts_per_page');
foreach ($links as $key => $link) {
$links[$key] = add_query_arg('posts_per_page', $posts_per_page, $link);
}
}
return $links;
}
add_filter('paginate_links', 'add_posts_per_page_to_pagination');１ページ内の表示件数を指定するということは、必然的にページネーションの設置が必須ということになります。
そのため、上記のソースコードでは、設置済みのページネーションリンクにプルダウンで選択された記事の表示件数情報が追加設定されるようにしています。
解説④ 表示記事数選択フォーム（プルダウン）
<!-- 表示記事数選択フォーム（プルダウン） -->
<form method="get" id="posts-per-page-form">
<label for="posts_per_page">表示件数：</label>
<select name="posts_per_page" id="posts_per_page" onchange="this.form.submit();">
<option value="5" <?php selected(get_query_var('posts_per_page'), 5); ?>>5</option>
<option value="10" <?php selected(get_query_var('posts_per_page'), 10); ?>>10</option>
<option value="15" <?php selected(get_query_var('posts_per_page'), 15); ?>>15</option>
<option value="20" <?php selected(get_query_var('posts_per_page'), 20); ?>>20</option>
</select>
<!-- プルダウンが変更されたら１ページ目に戻る -->
<input type="hidden" name="paged" value="1">
</form>最後に、こちらのソースコードがプルダウンメニューです。
表示記事件数を変更したいページのテンプレートファイル内に設置します。
表示件数を変更したい場合はoptionタグ内にある２か所の数字を任意のものに変更してください。
ケケンタCSSはもちろん自由に調節してしまってOKです！
【注意点】検索結果ページにおける挙動について
今回ご紹介したページ内の記事表示件数をプルダウンメニューで選択できるようにするソースコードですが、
具体的には、検索結果を維持した状態で表示記事件数を変更することができません。
ケケンタ検索結果ページ（基本的にはsearch.phpファイルになるかと思います）にプルダウンメニューを設置してしまうと、予期せぬ不具合につながる可能性があるためご注意ください。
未検証のため、この記事ではご紹介できませんが、もし検索結果ページでも同様の機能を実装したい場合は、URLに含まれる検索キーワードのクエリパラメータを保持するための処理を追加で記述する必要があります。
まとめ
以上が、記事一覧ページの表示件数をプルダウンで選択可能にするソースコードのご紹介でした。
ユーザ自身が記事一覧ページで記事の表示件数を変更できるとユーザビリティの向上につながります。
今回の記事がその一助となれば幸いです！
ケケンタ最後までご覧いただきありがとうございました！
当ブログではWordPressやWeb制作、PHPなどに関する情報を発信しています。
ご興味のある方はほかの記事もご覧いただけるとうれしいです。
コメント