人気順や新着順で記事を並べ替えるボタンを設置

今回やりたいこと

記事を一覧表示させている中で、人気順や新着順ボタンを設置して、ボタンを押したら記事を並べ替えるということを実現したいです。結構ややこしいですが、今回の事例としては、カテゴリーページ(カテゴリー別の記事)の中でさらにソートするというシチュエーションです。

並べ替えボタンはinputタグで設置する

まずコードです。inputタグ(type=submit)で設置します。まずコードです。


<form method="get" action="<?php echo $url_str ?>">
  <input type="hidden" name="sort" value="new">
  <?php if ($sortset !== 'new') : ?>
    <input type="submit" value="新着順">
  <?php else : ?>
    <input type="submit" value="新着順" class="is-current">
  <?php endif; ?>
</form>
<form method="get" action="<?php echo $url_str ?>">
  <input type="hidden" name="sort" value="rank">
  <?php if ($sortset !== 'rank') : ?>
    <input type="submit" value="人気順">
  <?php else : ?>
    <input type="submit" value="人気順" class="is-current">
  <?php endif; ?>
</form>

これによってボタンが2つ配置されます。

例えば前者の新着順のボタンを押すと以下のようにURLが遷移します。

https://example.com/category/xxx/
⇒ https://example.com/category/xxx/?sort=new

「type=”hidden”」としているinputタグの「name」=「value」という形でURLの末尾に?の後にくっついていることが分かります。

ちなみに「type=”hidden”」のinputタグが必須というわけではありません。inputタグのvalue値(つまり送信ボタンの名前)が今回のように日本語の場合、type=”hidden”のinputタグを設置しないとURLが以下のようになってしまいます。

https://example.com/category/xxx/?sort=新着順

URLに日本語がURLに入ることに抵抗がない場合は、type=”hidden”のinputタグは設置しなくて問題ないです。

if文で条件分岐しているのは、表示しているソートボタンに「is-current」クラスを付与して、CSSを当てるためです。これはほとんどの場合が必要になってくると思うので、そのまま使えると思います。

URLの末尾を取得して変数に代入する

ソートボタンをクリック(送信)した後にURLの末尾にくっついてくる文字列を取得します。


$sortset = (string) filter_input(INPUT_GET, 'sort');

filter_input関数はPOSTやGETなどの外部からの変数をフィルターして無害な値にしたり、弾いたりしてくれます。issetを使っている方はそれと同様の挙動という認識で大丈夫だと思います。

遷移先(action属性)を指定する

ソートボタンが押された時は、必ずそのソートの1ページ目に遷移するようにしたいので、まずはそのURLを変数に格納します。


$url_str = get_pagenum_link(1);

これによって先頭のページを取得することができます。

実際のコード一式


<?php
$url_str = get_pagenum_link(1);
$sortset = (string) filter_input(INPUT_GET, 'sort');
if ($sortset === "") {
  $sortset = "new";
} else {
  $sortset = (string) filter_input(INPUT_GET, 'sort');
}
?>
<form method="get" action="<?php echo $url_str ?>">
  <input type="hidden" name="sort" value="new">
  <?php if ($sortset !== 'new') : ?>
    <input type="submit" value="新着順">
  <?php else : ?>
    <input type="submit" value="新着順" class="is-current">
  <?php endif; ?>
</form>
<form method="get" action="<?php echo $url_str ?>">
  <input type="hidden" name="sort" value="rank">
  <?php if ($sortset !== 'rank') : ?>
    <input type="submit" value="人気順">
  <?php else : ?>
    <input type="submit" value="人気順" class="is-current">
  <?php endif; ?>
</form>

条件分岐して記事を出力する

あとはそれぞれの条件で記事を取得して記事をループで出力すればOKです。ちょっと記事が長くなってしまったので、人気記事の出力方法に関しては別の記事でまとめようと思います。


<?php if ($sortset === "rank") : ?>
// 人気順の記事を取得して表示
<?php else : ?>
// 新着順の記事を取得して表示

参考にさせていただいた記事

今回はこちらの記事を参考にさせていただきました。ありがとうございました。

related article

2019/11/04 WordPress

WordPressのコンタクトフォームから送信できない

2019/10/16 WordPress

まだ記事のないカテゴリを出力する

2021/02/26 WordPress

デフォルトの「投稿」のURLをカスタマイズする

2019/10/28 WordPress

404エラーの時にトップにリダイレクトさせる