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

公開日:2018/12/27 更新日:2021/01/23

やりたいこと

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

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

今回はこのような動きを、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です。