KumaTechLab
2020-09-25/2023-05-23

WordPressでソートを行う３つの方法

WordPressでソートを行う３つの方法

WordPressで一覧をソートする方法(UI上でソート)を紹介していきます。

WordPressの記事一覧やカスタム投稿を用いた一覧画面などでソートを実装したいときがあると思います。

利用箇所によって実装方法は様々であると思いますので、今回は３つ紹介します。

「ページ更新を伴わないソートが行いたい」

「同じページなのに並び順変えられるの」

といった疑問を解決していきたいと思います。

ソートの方法によっては並び順を変えるプラグイン等と相性が良くない場合がありますので、

どちらかのみでの対応に変更してください。

WordPressでソートを行う３つの方法

WordPressでソートを行う方法を３つ紹介します。

それぞれで特性が異なってきますので、ご自身に都合の良いものを選択してください。

以上の３つのを紹介します。

「List.js」を使用したソート

「List.js」を使用したソート方法では

「ページ更新無し」

「早い」

「お手軽」

といった特徴が挙げられます。

その代わり「後から組み込むのは難しい」のではないかと思います。

新しく作るページにソート機能つけたい場合には有効です。

「REST API」を用いたソート

「REST API」を使用したソート方法では

「ページ更新なし」

「後から組み込み可能」

「早い」

といった特徴が挙げられます。

その変わり、取得や書き換えなどでphp側javascript側のどちらのコード量も多くなります。

紹介しますが、おすすめはしません。

「WP_Query」によるソート

「WP_Query」によるソート方法では

「ページ更新あり」

「後からも対応可能」

「わかりやすい」

といった特徴が挙げられます。

WordPressの機能を使いますので、一番無難です。

ページ更新にこだわりがない場合はこちらを推奨します。

それでは実際にどのように使用していくのか紹介していきます。

「List.js」を使用したソート

それでは、「List.js」を使用したソート方法について見ていきたいと思います。

以下のような形を完成形とします。

これであれば、カスタム投稿タイプを利用する場合、投稿一覧を並び変える場合といろいろな状況でも想定しやすいのではないかと思います。

上の並び替えの部分で４種類それぞれを昇順、降順の並び替えが可能です。

また、ページネーションもつけることが可能です。

「List.js」をダウンロードしましょう。

公式からダウンロード可能です。また、CDNでの利用も可能です。

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

まずはＨＴＭＬ側のマーキングの方を見ていきます。

基本的な形は以下のようです。

<div id="hacker-list">
　<span class="sort" data-sort="name">Sort by name</span>
  <span class="sort" data-sort="city">Sort by city</span>
  <ul class="list">
    <li>
       <h3 class="name">Jonny</h3>
       <p class="city">Stockholm</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="city">Berlin</p>
    </li>
  </ul>
</div>

全体に任意の名前の「id」を付けます。

並び替える要素をすべて含んだ要素に「list」クラスを付与します。この例では「li」を含んでいる「ul」になります。

(「table」で行いたい場合は「td」に並び替え要素が当たると思いますので、「tbody」に「list」クラスを付与します。)

並び替える対象の要素にはそれぞれ任意のクラスを付与します。

また、並び替えを行うためのボタンを設置しています。並び替える要素を「data-sort」で指定します。クラス名には「sort」を付与します。

HTML側で必要な仕込みはたったこれだけです。簡単ですね。

次にJavascript側の設定を行います。

上の基本的な形で行う場合以下のように記述します。

var options = {
    valueNames: [ 'name', 'city' ]
};


var hackerList = new List('hacker-list', options);

オプションの「valueNames」には並び替えたい要素のクラス名を列挙します。

インスタンスの方では全体につけた「id」とオプション配列を指定します。

以上のHTMLのマーキングとJavascriptの記述を行えば並び替えを行うことができるようになります。

実際にボタンを押すと動くことが確認できると思います。

ページネーションも簡単に作成することができます。

HTML側は以下を追加します。

<ul class="pagination"></ul>

「pagination」クラスを付与した「ul」を挿入します。

この中にページネーションが生成されます。

javascript側は以下を追加します。

　var options = {
  valueNames: [ 'name','price','produced','crop'],
  page: 3,
  pagination: true
};

オプションに追加しています。

「page」には１ページあたりに表示させる件数

「pagination」はtrue

にすることでページネーションを表示することが可能です。

以上を使用することで最初のコーヒーの一覧のような形を生成することができます。

閲覧者が好きな並び順にすることができ、ページ更新なく素早く切り替わるのでストレスがありません。

ページネーションを利用する場合はWordPress側ではページネーションせずに全表示するなどの対策が必要になります。

画像を使用する場合はそのサイズに注意し、カスタムフィールドを利用する際は都度アクセスは重くなりますので控えましょう。

→カスタムフィールドの使い方記事(記事最後の方速度検証に書いてあります。)

「REST API」を使用したソート

「REST_API」を使用した方法は以下の「WP_Query」とほとんど同じ考え方です。

「WP_Query」を使用したソートではメインクエリで行っていますが、それをサブクエリで行います。

独自に各並べ方に対応した「endpoint」を設定しておきます。

→REST_APIのendpoint追加方法

そしてクリックなどトリガーが発火した際に並び替えを行います。

jsonファイルに書き換える内容のみを入れることで、各要素を指定の並び順に置換していく方法や、

jsonファイルにタグごと入れておき、丸ごと置き換える方法、

jsonファイルの並び順に、現在の要素を並び替える方法など

対応方法はいろいろあるかと思います。

下の「WP_Query」の方法に加えてjavascript側の記述も多くなると思いますので、実装がやや大変です。

「WP_Query」を使用したソート

「WP_Query」はwordpressの機能を利用した一番ノーマルな方法だと思います。

ソートボタンなど押した際にクエリ文字列を発行し、そのクエリ文字列に従って目的の並び順を取得します。

下記例はカスタム投稿タイプのアーカイブページで日付に対し昇順、降順に並び替えるものを取り扱います。

カスタムフィールドを使用して並び替えたい場合も基本的に一緒なります。query部分で条件を追加するだけです。

まず、昇順、降順で並び替えるボタンを作成します。

<a href="<?php echo esc_url(add_query_arg('sort','asc')); ?>">昇順</a>
<a href="<?php echo esc_url(add_query_arg('sort','desc')); ?>">降順</a>

「add_query_arg」でクエリ文字列を追加しています。

第３引数に付与するURLをあたることも可能です。また、キーと値を配列で指定することで複数のクエリ文字列を追加することも可能です。

次に上で追加した変数「sort」をWP_Queryで扱えるように登録を行います。

function add_query_vars_filter( $vars ){
  $vars[] = "sort";
  return $vars;
}
add_filter( 'query_vars', 'add_query_vars_filter' );

「query_vars」にフィルターフックすることで登録ができます。

登録された変数は「get_query_var」により取得することが可能です。

function change_sort( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return;
    }


    if( $query->is_post_type_archive( 'custom_type' )){
      $order = get_query_var('sort');
      if( !empty($order) ) {
        if( $order == 'asc') {
          $order = 'ASC';
        } else {
          $order = 'DESC';
        }
      } else {
         $order = 'DESC';
      }
      $query->set('orderby' , 'date');
      $query->set('order', $order);
    }
}
add_action( 'pre_get_posts', 'change_sort' );

取得した値で処理を分岐させることや、カスタムフィールドなどを使用し幅広い並び替えを行うことが可能です。

TCDさんの「GENSEN」のデモページで確認してみるとどのような検索が可能なのかわかりやすいかもしれません。

上の例では「get_query_var」を使用して取得をしましたが、$_GETなどで同じような処理を作ることも可能だと思います。

まとめ

自分が並び替えの機能を付けてほしいと依頼がありましたら、「WP_Query」のソートを利用して作ると思います。

画像を含む場合の全権表示はかなり時間がかかると思いますので、出来れば控えたいです。

「WP_Query」の方であれば、リスト形式での表示やカード形式での表示などの変更方法にも対応できます。

また、リストは画像使わないから表示件数を増やしたいという場合にも「posts_per_page」を調節することで表示件数の調整も可能です。

「List.js」を使用した方法も簡単に実装が可能ですので、自分い適した方法で実装してみてください。

2020 KumaTechLab.