絞り込み検索導入～事前準備編

以前勤めていた留学会社にて、絞り込み検索ができないかという要望があり数ヶ月かけてコツコツと構築しました。例えば州や都市、学校の規模、学習スタイル（厳しい、楽しいなど）、提供コース、公立・私立、などの条件から絞り込むという機能です。色々な留学会社のウェブサイトを見てみたところ、絞り込みには主に以下3つの要素があることに気づきました。

セレクトボックスやラジオボタンなど基本的にひとつしか選択できない要素と、チェックボックスのように複数選択できる要素がある。例）州や都市はプルダウン式のセレクトボックス、公立・私立は二択なのでラジオボタン、提供コースは複数選択可能なのでチェックボックス、等。
検索する際に要素同士を掛け合わせていくのがいわゆる絞り込み機能の根幹。例）オンタリオ州トロント x 私立 x 楽しい校風 x ビジネス英語とTOEICコースを提供している…等。
セレクトボックスには単純に選択肢の中から選ぶだけのものと、一つを選択したら別のセレクトボックスの条件が切り替わりさらに細かく選べるようになるものがある。例）一つのセレクトボックスで州を選んだら別のセレクトボックスで都市を選べるようになる、等。

手探りだったので数ヶ月かかりましたが、最終的に辞める直前に機能だけは完成に至りました。ただ、残念ながらウェブサイトへの実装までには至らず宝の持ち腐れ状態になっていました。絞り込み検索は不動産系のサイトやECサイトなどにかなり使える機能なので忘れないように自分のブログに実装して備忘録のため作り方を公開しようと思いながら半年経ってしまい、ようやく重い腰を上げて実装しました。完成にこぎつけるのに数ヶ月、そこから数ヶ月経ってからの実装ですが作業時間はわずか1日。会社で作っていたものに比べて簡易版ではありますが、一度得た技術を応用するのは容易でした。実際の検索フォームはこちらです（ブログのサイドバーにも表示しています）：

山の記事検索

すべての山
百名山

温泉御朱印

フリーワードは通常の検索窓と同じ
すべての山の記事から検索するか百名山の記事に絞るか、はラジオボタン
都道府県のリストはセレクトボックスのプルダウン
山の選択肢は都道府県を選択すると選択可能になる仕様（百名山で記事を絞った場合セレクトボックスが消える）
その他項目として温泉、御朱印という山とセットになることがあるものをチェックボックスで選択可能

といったところが概要で、検索ボタンを押すと上記すべてを掛け合わせた条件で検索された記事が表示される仕組みになっています。それではこのブログに組み込んだ流れを解説していきます。

カスタムタクソノミーの作成

今回の絞り込み検索機能搭載にあたってまず考えたのは「どのような条件から記事を絞り込んでいくか」ということです。山の記事が多いので山の記事の中から絞り込むことに決め、山の記事の中でも「都道府県ごと」という検索の仕方は現状は行えないのでこの方向性で機能を考えることにしました。以前の職場で「セレクトボックス同士を連動させる」機能も実現していたのでこのブログにも実装させるべく、都道府県を選んだら別のセレクトボックスに「選択された都道府県で登ったことのある山の一覧」が抽出されるという機能にすることにしました。

作る絞り込み検索機能の方向性が決まりまず第一に行った作業は、下準備としてカスタムタクソノミーの作成です。このブログは山のことや日常のことを日記のように綴るだけのブログなので記事ごとに都道府県や山の名前がメタデータとして付与されていませんでした。WordPressにデフォルトで搭載されていたカテゴリーやタグに設定していたデータはありますが、カテゴリーもタグも統一された内容ではないので絞り込みには使いづらい。ということで少し手間ではありますが、別軸のカテゴリーやタグを設定できるカスタムタクソノミーを導入することにしました。導入に当たっては特にこの2つのサイトの情報が非常に役立ちました。

WordPressのカスタムタクソノミーをプラグイン無しで設定する方法
カスタムタクソノミーを自作し、自作したカスタム投稿タイプに適用させる

今回はカスタム投稿タイプは作っていないので、既存の投稿タイプである’post’に新しいカテゴリーを設定します。これは難しい作業ではなく、以下のコードを子テーマのfunction.phpに追加するだけで間単に設定できます。今回は都道府県ごとの名前を付与するということでareaという名前にしました。

/* カスタムタクソノミーを作成 */
function self_made_taxonomies() {
    // 自作カテゴリーを作成
    register_taxonomy( 'area', 'post',  array(
            'label'            => '都道府県', //表示名
            'show_ui'           => true, //管理画面に表示するか
            'show_admin_column' => true, //管理画面の一覧に表示するか
            'show_in_nav_menus' => true, //カスタムメニューの作成画面で表示するか
            'hierarchical'      => true, //階層構造を持たせるか（持たせるとカテゴリー扱い）
        )
    );
}
add_action( 'init', 'self_made_taxonomies', 0 );

このコードを追加するだけでダッシュボードにカスタムタクソノミーが表示されます。今回は都道府県を親、都道府県ごとの山を子にして登録を行いました。

山の記事ごとに都道府県と山の名前のタクソノミーを付与していきます。例えば縦走している記事のようにひとつの記事で有名な山をいくつも越えておりさらに県もまたいでいる場合は、ひとつの記事に関連するすべての都道府県と山の名前を付与します。カスタムタクソノミーの表示順を変える方法を探しましたがうまく見つからなかったので、Taxonomy Orderというプラグインで地図上の都道府県の順番に並び替えています。

問題だったのは例えば富士山のように山梨県と静岡県にまたがっている山で、子が登録できる親の数はひとつに限られているので山ひとつに対して県はひとつしか選択できません。色々と調べましたがこれはもう仕様なので仕方がないようです。いずれにせよ山はひとつなのでどこかの県に合わせればいいのですが、島根県と広島県ではそれぞれにまたがる恐羅漢山しか登ったことがないのでいずれかの県に登録するともう片方の県がリストに表示されなくなってしまいます（登録されている記事がないため）。苦肉の策として名称をosorakanzanとosorakanzan-shimaneとした二つの子カテゴリーを作成しそれぞれの県に登録しました。

カスタムタクソノミーの設定が済んだら、次に行ったのは最終的に検索フォームを設置するサイドバーでPHPを動かせるようにする設定です。以下のサイトを参照しました：

WordPress でプラグイン使わずにウィジェットで PHP コード動かす

これも難しい作業ではなく、以下のコードを子テーマのfunction.phpに追加するのみです：

/* ウィジェットでPHPを動かす */
add_filter( 'widget_text', function( $ret ) {
	$php_file = 'search-form';

	if( strpos( $ret, '[' . $php_file . ']' ) !== false ) {
		add_shortcode( $php_file, function() use ( $php_file ) {
			get_template_part( $php_file );
		});

		ob_start();
		do_shortcode( '[' . $php_file . ']' );
		$ret = ob_get_clean();
	}

	return $ret;
}, 99 );

$php_file =に入っている項目がファイル名で、PHPファイルの置き場は子テーマの直下です。上記の場合search-form.phpというファイルを子テーマの直下に置き、ウィジェットのテキストに[search-form]と書きサイドバーに設置すればPHPの内容が出力されます。

JSファイルの設置

今回のフォームでは

百名山のラジオボタンを押すと山の選択肢のセレクトボックスが消える
都道府県を選択すると別のセレクトボックス上で都道府県ごとの山の選択肢が選択可能になる

という2つの挙動においてJSが必要だったので、下準備としてselection.jsというファイルを作り親テーマフォルダのJSフォルダに格納（ファイル名は任意のもので大丈夫です）。そしてこのファイルを呼び出せるようにheader.phpのheadタグ内に下記のように追記します。

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/selection.js" type="text/javascript"></script>

既にjQueryを呼びさせるようにしている場合はselection.jsを呼び出すだけで大丈夫です。src内はフォルダの場所を指しているので運営しているサイトによって異なるかと思います。

これで事前準備は完了です。別ページにて実際の検索フォームの作成と検索結果の表示について詳しく書いていきたいと思います。

Yusaku Days

絞り込み検索導入～事前準備編

もくじ

カスタムタクソノミーの作成

サイドバーでPHPを動かす

JSファイルの設置