ミギムキ

[WordPress] セレクトボックスで記事の表示件数を切り替えたい

やりたいこと

商品一覧などのアーカイブページで、表示件数の切り替えをしたいというケースがあります。

よくあるのがセレクトボックスにいくつか件数が並んでいて、選ばれた件数分だけ表示するというもの。

今回はこのような動きを、WordPressの関数を活用して実現してみました。

サンプルコード

<form action="<?php echo get_pagenum_link(1); ?>" name="postform" method="post"> <select name="posts_num" onchange="document.postform.submit();"> <option value="10">表示件数</option> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> </select> </form> <?php $post_num = 0; if($_POST['posts_num']) { $post_num = $_POST['posts_num']; setcookie( 'posts_num', $post_num, 0, '/' ); } else if($_COOKIE['posts_num']) { $post_num = $_COOKIE['posts_num']; } else { $post_num = 10; } $args = $wp_query->query; $args = $args + array( 'posts_per_page' => $post_num, ); $the_query = new WP_Query($args); if( $the_query->have_posts() ) { while( $the_query->have_posts() ) { $the_query->the_post(); ?> <!-- 表示処理 --> <?php } } wp_reset_postdata(); ?>

仕組み、解説、補足など

「onchange="document.postform.submit();"」でセレクトボックスから項目を選んだ時点でフォーム送信を行います

フォームの送信先を「get_pagenum_link(1)」で取得したアドレスにしています。これは、例えば「全30件の記事を10件ずつ表示しているときの2ページ目」といったときに表示件数を30件に切り替えると、記事の存在しない2ページ目が表示されてしまいます

このようなケースを回避するために、「get_pagenum_link(1)」でアーカイブの1ページ目のアドレスに対してフォーム送信を行うようにしています

ページ切り替えしたときにも表示件数を保持するために、クッキーを使用しています。POST送信されていればその内容をクッキーに保持し、POST送信されていないとき(ページの切り替えなど)にはクッキーの値を参照しています

サンプルコードではメインクエリの内容をコピーして、表示件数だけ書き換えたものでクエリを再実行しています。表示速度を考慮するなら、functions.phpで「pre_get_posts」のアクションを設定して、その中でクエリを書き換えた方がいいでしょう

ご質問への回答:記事数を切り替えたときにページネーションのページ数がずれてしまう

本サンプルコードを実装してページ数を切り替えた際、ページネーションがずれて空のページが生成されてしまう、というご質問をいただきました。

原因として、ページ数をセットしたループの外でページネーションの生成処理が書かれていることが考えられます。

記事ループ内の「wp_reset_postdata();」が実行される前にページネーションの生成処理を書いてみてください。

ご質問ありがとうございました。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。