a-blog cms でサイト内検索を実装する方法【Field_SearchモジュールとPOST_2GET】
目次
今回はWebサイトによくあるサイト内検索を a-blog cms で実装する方法について紹介します。よくあるキーワード検索だけではなく、カテゴリーや、カスタムフィールドの値でのサイト内検索の実装方法を紹介します。a-blog cms ではキーワード検索はもちろんのこと、カテゴリーやカスタムフィールドの値、日付を指定してエントリーを検索する機能を標準で搭載しています。
サイト内検索機能の仕組み
a-blog cmsには、サイト内検索機能を実現するための2つの機能があります。それは、POST_2GET と Field_Search モジュールです。
1つ目の POST_2GET は指定したパラメーターに沿ったURLを組み立ててリダイレクトする機能です。
公式のサンプルコードを拝借しますが、以下の例は、bid=1（news）cid=3（economy）を指定して http://sample.com/news/economy/ にリダイレクトするコードです。
<!-- ボタンを押すと /news/economy/ にリダイレクトされる -->
<form action="" method="post">
<input type="hidden" name="bid" value="1">
<input type="hidden" name="cid" value="3">
<input type="submit" name="ACMS_POST_2GET" value="経済ニュースに移動">
</form>name 属性に指定したい key を、 value 属性に値を記述することで a-blog cms が自動的にURLを組み立ててリダイレクトしてくれます。
2つ目の Field_Searchモジュール は、検索後のページで `value` の値を保持するためのモジュールです。
言葉で説明するのは難しいため、実際のサンプルコードを見てみたいと思います。
<!-- BEGIN_MODULE Field_Search -->
<div class="module-section">
<section class="search">
<div class="module-header clearfix">
<h2 class="module-heading">検索</h2>
</div>
<form
action=""
method="post"
name="searchForm"
class="acms-form search-form"
role="search"
>
<div class="acms-form-action">
<!-- 宣言 -->
<input type="hidden" name="field[]" value="color" />
<select name="color">
<option value="">全て</option>
<option value="red" {color:selected#red}>赤色</option>
<option value="yellow" {color:selected#yellow}>黄色</option>
<option value="blue" {color:selected#blue}>青色</option>
</select>
<span class="acms-form-side-btn">
<button
type="submit"
name="ACMS_POST_2GET"
class="acms-btn btn-search"
>
<span class="acms-icon-search"></span>
<span class="acms-hide-visually">検索</span>
</button>
</span>
<input type="hidden" name="tpl" value="/search.html" />
</div>
</form>
</section>
</div>
<!-- END_MODULE Field_Search -->Field_Searchモジュールを記述することで、検索結果のページ（リダイレクト後）でカスタムフィールドの値を出力することができるようになります。
下記の画像はField_Searchモジュールを使用した場合と、使用していない場合の比較です。
Field_Searchモジュール使用時
Field_Searchモジュール不使用時
Field_Searchモジュールを使用しているときは、検索したカスタムフィールドの値である赤色が出力できているのがわかると思います。
これは、Field_Searchモジュールの中では、 {color:selected#red} のコードが動いているからです。また、下記のようにカスタムフィールドの変数を記述しても組み立てられたURL内のカスタムフィールドの値を出力することができます。
<!-- BEGIN_MODULE Field_Search -->
<p>{color}</p>
<!-- END_MODULE Field_Search -->
このように、Field_Searchモジュールを使用することで、検索結果のページ（リダイレクト後）でカスタムフィールドの値を出力することができます。
サイト内検索の実装
上記で紹介した、POST_2GET と Field_Searchモジュールを組み合わせることで様々なサイト内検索フォームを実装することができます。 次に、実際に僕が実装したサイト内検索の例を見ていきましょう。
最初にHTMLのコードをお見せします。
<!-- BEGIN_MODULE Field_Search -->
<form action="" method="post" name="searchForm" class="acms-form search-form" role="search" aria-label="検索フォーム">
<!-- 宣言 -->
<input type="hidden" name="field[]" value="area">
<!-- カテゴリーのセレクトボックス -->
<select name="cid">
<option value="">すべて</option>
<!-- BEGIN_MODULE Category_List -->
@include("/admin/module/setting.html")
<!-- BEGIN category:loop --><!-- BEGIN category:veil -->
<option value="{cid}" <!-- BEGIN_IF [%{cid}="" eq="" {cid}]="" --=""> selected<!-- END_IF -->>{name}</option> <!-- END category:veil --><!-- END category:loop --> <!-- END_MODULE Category_List --> </select>
<!-- エリアのセレクトボックス -->
<select name="area"> <option value=""></option> <option value="全国" {area:selected#全国}="">全国</option> <option value="北海道" {area:selected#北海道}="">北海道</option> <option value="東北" {area:selected#東北}="">東北</option> <option value="関東" {area:selected#関東}="">関東</option> <option value="北信越" {area:selected#北信越}="">北信越</option> <option value="東海" {area:selected#東海}="">東海</option> <option value="関西" {area:selected#関西}="">関西</option> <option value="中国" {area:selected#中国}="">中国</option> <option value="四国" {area:selected#四国}="">四国</option> <option value="九州" {area:selected#九州}="">九州</option> <option value="沖縄" {area:selected#沖縄}="">沖縄</option> <option value="WEB" {area:selected#web}="">WEB</option> </select>
<!-- キーワード検索の指定 -->
<input type="search" id="searchForm" name="keyword" value="%{KEYWORD}" size="15" class="search-form-input">
<input type="hidden" name="query" value="keyword">
<!-- テンプレートの指定 -->
<input type="hidden" name="tpl" value="search.html">
<!-- 検索ボタン -->
<span class="acms-form-side-btn"><button type="submit" name="ACMS_POST_2GET" class="acms-btn btn-search"><span class="acms-icon-search" aria-hidden="true"></span><span class="acms-hide-visually">検索</span></button></span>
</form>
<!-- END_MODULE Field_Search -->上記のコードを細かく説明していきます。
<!-- 宣言 -->
<input type="hidden" name="field[]" value="area"/>
上記の部分についてですが、カスタムフィールドの値でサイト内検索を実装するときは、最初に宣言が必要になります。今回の場合 area というフィールド名のカスタムフィールドで検索を行うため、 area を value 属性に指定して宣言しています。
<!-- カテゴリーのセレクトボックス -->
<select name="cid">
<option value="">すべて</option>
<!-- BEGIN_MODULE Category_List -->
@include("/admin/module/setting.html")
<!-- BEGIN category:loop --><!-- BEGIN category:veil -->
<option value="{cid}"<!-- BEGIN_IF [%{CID}/eq/{cid}] --> selected<!-- END_IF -->>{name}</option>
<!-- END category:veil --><!-- END category:loop -->
<!-- END_MODULE Category_List -->
</select>
この部分は <select> タグと <option> タグを使用して、カテゴリーのセレクトボックスを作成しつつ、内部ではカテゴリーリストモジュールでカテゴリーを出力させています。
ここでのポイントとしては、 <select> タグの name 属性に cid を指定しているところです。サイト内検索を行う上での基本なのですが、 フォームの name 属性に検索対象をしていして、 value 属性に値を指定することで、POST_2GETがURLを組み立ててリダイレクトしてくれます。
<!-- エリアのセレクトボックス -->
<select name="area">
<option value=""></option>
<option value="全国"{area:selected#全国}>全国</option>
<option value="北海道"{area:selected#北海道}>北海道</option>
<option value="東北"{area:selected#東北}>東北</option>
<option value="関東"{area:selected#関東}>関東</option>
<option value="北信越"{area:selected#北信越}>北信越</option>
<option value="東海"{area:selected#東海}>東海</option>
<option value="関西"{area:selected#関西}>関西</option>
<option value="中国"{area:selected#中国}>中国</option>
<option value="四国"{area:selected#四国}>四国</option>
<option value="九州"{area:selected#九州}>九州</option>
<option value="沖縄"{area:selected#沖縄}>沖縄</option>
<option value="WEB"{area:selected#WEB}>WEB</option>
</select>
この部分は最初の宣言時に指定した area のカスタムフィールドの検索のためのセレクトボックスを作成しています。ここでのポイントは {area:selected#全国} のコードです。
Field_Searchモジュールの中でカスタムフィールドの検索を行う場合は、{ [フィールド名] :selected#[値]}のように記述すると検索結果のページで指定したカスタムフィールドの値を選択状態にして出力することができます。
先程のカテゴリーのセレクトボックスでは <!-- BEGIN_IF [%{CID}/eq/{cid}] --> selected<!-- END_IF -->と記述し、IFブロックを使用しなくてはいけなかったですが、カスタムフィールドの検索用のフォームでは短く記述することができます。
<!-- キーワード検索の指定 -->
<input type="search" id="searchForm" name="keyword" value="%{KEYWORD}" size="15" class="search-form-input">
<input type="hidden" name="query" value="keyword">
こちらの部分はキーワード検索のための指定になります。ここでのポイントは2行目の <input type="hidden" name="query" value="keyword"> を記述することでクエリで検索ができるようになる点です。クエリ検索を行わない場合は /search.html/keyword/テスト/ のようなURLが組み立てられますが、先程のクエリ検索の記述をすることで、 /search.html?keyword=テスト のようなURLを組み立てることができるようになります。
クエリ検索で検索できると、Google Analyticsなどの各種ツールでデータを分析できるようになります。そのため、基本的には先程のコードを記述しておくことをおすすめ致します。
<!-- テンプレートの指定 -->
<input type="hidden" name="tpl" value="search.html">
最後に、上記のコードで検索結果を表示するテンプレートを指定することができます。今回の場合は search.html に検索結果を表示するよう指定しています。また、注意点として config.system.yaml 内の forbid_tpl_inheritance_when_path_unresolved が on に設定されていると、カテゴリーでサイト内検索をしたときに、カテゴリーのディレクトリ内にテンプレートのファイルがないと404エラーが出てしまいます。カテゴリーのディレクトリを全て作成して、指定したテンプレートのファイルを置くのがめんどくさいという場合は config.system.yaml 内の allow_tpl_path にテンプレートのファイルを記述すれば、 allow_tpl_pathに記述したファイルはパス解決に失敗した場合でもテンプレートが継承されるようになります。つまり、カテゴリーのディレクトリにテンプレートファイルがなくてもルートにある同じ名前のファイルを参照してくれます。
以上で今回の解説は以上になります。
まとめ
今回は、a-blog cms でサイト内検索の実装の方法について記事を書きました。サイト内検索はSEO対策にも効果があると言われています。まだサイトに実装していない方は実装してみてはいかがでしょうか？また、a-blog cms では今回紹介した他にもサイト内検索でできることはたくさんあります。気になる方は公式のドキュメントに詳しく書かれているため読んでみると良いと思います。この記事を読んでくれた方ありがとうございました。