検索結果一覧のソート順変更機能

検索結果を表示した時の並び順はWP_Queryなどによって指定されたものとなっているはずです。
この検索結果一覧を検索対象の保持している情報を選択することによって並び替える機能を実装することで、閲覧者が目的としている情報を見つける手助けの一つとなります。
今回はWordpressにおける検索結果一覧の並び替え機能の実装方法の一例を紹介します。

実装例の環境

• PHPを編集し検索機能をカスタマイズしている
• 検索項目にフリーワード検索以外にチェックボックス等を追加している
• 検索対象にカスタムフィールドを含めている
• カスタムフィールドの任意の項目の値で並び替え機能を実装
• 検索パラメータはURLに保持
• 検索結果ページはページャーによって一定件数毎の表示

プルダウンでソートのキーとなる項目を選択

<select name="sort" id="js-sort">
  <option value="">並び替え</option>
  <option value="key01">ソート01</option>
  <option value="key01">ソート02</option>
  <option value="key01">ソート03</option>
</select>

検索結果ページにソートのキーとなる項目を選択できるようにプルダウンを追加します。
ここで選択された項目の value の中身を使用し並び替え処理を行います。
3～5行目の項目を任意に記述することで並び替えに使用するキーを指定します。

JavaScriptで選択されたキーを検索パラメータに追加

<script>
	const selectElement = document.querySelector('#js-sort');
	var url = new URL(window.location.href);

	selectElement.addEventListener('change', (event) => {
		var value = event.target.value;
		if( url.searchParams.get('sort') ) {
			var params = url.searchParams;
			params.delete('sort');
			history.replaceState('', url.pathname);
		}
		url.searchParams.append('sort', value);
		var paramstr = url.searchParams;
		location.href = location.origin+"/?"+paramstr;
	});
</script>

2、3行目
プルダウン部分のHTML要素と現在のページのURLを取得

5～15行目
プルダウンに変更が発生した場合の処理

6行目
プルダウンで選択された項目の値を取得

7～11行目
既に並び替えが行われている（ sort パラメータがURLに追記されている）場合にsort パラメータを削除

12行目
プルダウンで選択された sort パラメータをURLに追加

13行目
sort パラメータを含めた検索パラメータを取得

14行目
検索結果先頭ページに13行目で取得した検索パラメータを追加して移動する

http://example.com/page/3/?params=hoge

http://example.com/?params=hoge&s&sort=key01

上記のように sort パラメータが追加され、ページャーによるページ移動はリセットされます。

後は検索処理部分で sort パラメータを取得して WP_Query に渡してあげれば並び順の変更された検索結果一覧が表示されます。