• 活用ブログTOP
  • サイト内検索でカスタマイズできる機能を徹底解説!
hayase hayase

サイト内検索でカスタマイズできる機能を徹底解説!

Googleカスタム検索の有料版がなくなって以降、サイト内検索にお困りの方も多かったかと思います。MovableType.netでは、DataAPI+JavaScriptによるサイト内検索が利用できるようになりました!

今回は、サイト内検索でカスタマイズできる機能を徹底解説したいと思います!


検索ボックスの設置方法

まずは検索ボックスを設置してみましょう。
設置方法については、以下のマニュアル、活用ブログ記事にまとまっているのでこちらを参考にしてください。

単純に上記で設置した場合は、検索結果の一覧は以下のように”検索ボックスの下に、ウェブサイト内のブログもすべて含んだもの”が表示されます。

…これだと実際の運用では難しい場合もありますね。
ということで、フォームの検索結果をカスタマイズする方法をご紹介していきます!

検索結果のカスタマイズ

カスタマイズ可能な項目の詳細は以下のマニュアルにも記述があります。

この中から、今回は実際に使う機会の高そうなカスタマイズをご説明したいと思います!

検索結果ページを作ってそのページに遷移させる

まず、検索結果ページをインデックス・テンプレートで「search.html」といったURLで作成します。

そのページの中で検索結果を表示したい場所に、以下のidをつけたdiv等を用意してします。idは任意の文字列でいいですが、今回は s-result にしています。

<div id="s-result">
</div>

これで検索結果ページの準備は完了です。

続いて、検索ボックスのMTタグに以下のようにモディファイアを指定します。

<$mt:SiteSearchSnippet form_action="/search.html" search_result_container="s-result"$>

form_acitonでは遷移先の検索結果ページのURLを指定し、search_result_containerでは検索結果を表示する場所で指定したidを指定します。

これで、どのページで検索を実行しても/search.htmlのページに遷移し、検索結果が表示されることになります。

特定の範囲のコンテンツだけを表示させる

色々な指定方法で、検索対象の範囲を制限することができます。

指定したブログ(ウェブサイト)

指定したブログ(ウェブサイト)だけを対象にするには、以下のようにモディファイアを記述します。

blog_ids="website,staffblog" 

website,staffblogと記述している部分は、各ウェブサイトやブログの設定>全般のところで指定できる識別子ブログIDをカンマ区切りで指定できます。

特定のカテゴリの記事だけを表示する

特定のカテゴリの記事だけを検索対象にするには、以下のように記述します。

filter_categories="お知らせ"

特定のフォルダ配下の記事だけを表示する

ブログ単位よりもさらにその下の特定のフォルダ配下だけを検索対象にしたい、といった場合は以下のように記述します。

filter_pathname="/blog/archive/"

といったように、検索対象の範囲を指定できます。

これらを組み合わせて以下のように記述すると、、、

<$mt:SiteSearchSnippet blog_ids="website,staffblog" filter_categories="お知らせ" form_action="/search.html" search_result_container="s-result"$>

識別子がwebsiteとstaffblogのブログ(ウェブサイト)を対象に、記事のカテゴリがお知らせとなっているものに絞り込み。
その検索結果を/search.htmlに遷移して表示する、ということが実現できます。

検索結果一覧のページ送りの件数を指定する

標準では検索結果一覧は10件ずつページ送りになっています。ページ送りの件数を変更するにはモディファイアの数字部分を変更します。

limit="20"

検索結果の一覧の見た目を変更する

出力されるHTML構造は決まっているので、あわせてCSSを追加することによって見た目も調整することができます。
出力結果は、以下のマニュアルを参考にしてみてください。

検索対象の項目を変更する

標準の検索結果の対象は、記事・ウェブページのタイトル・本文・続き・キーワードになっています。
これをカスタマイズにするには、以下の方法があります。

カスタムフィールドの1行テキストと複数行テキストを対象にする

カスタムフィールドを利用する場合は、テキスト系のフィールドを検索対象にする必要があるでしょう。
その場合は以下のモディファイアを値を1にして追加します。

include_custom_field="1"

特定のカスタムフィールドを対象にする

特定のカスタムフィールドのみを対象にしたい、という場合は以下の記述をします。

fields="field:(フィールドの識別子)"

また、標準の項目もあわせて対象にしたい場合は以下のように記述します。

fields="title,body,more,keywords,field:(フィールドの識別子)"

例えば、「タイトルだけを検索対象にしたい」という場合は、以下で実現できます。

fields="title"

特定のページを検索結果の上位に表示させる

この活用ブログを例にすると、「カスタムフィールド」と検索をしたら、「ブクマ必須!カスタムフィールドの出力基本パターンをご紹介」の記事を検索結果の一番上に表示させたい、といった場合。
これは、記事に重み付けをすることで実現できます。
記事・ウェブページのキーワード欄に、指定したいキーワードを追加するだけです!

検索機能を利用するにあたって注意点は?

MovableType.netの検索機能は、
「検索を実行すると検索対象のコンテンツのテキストデータをブラウザ上に読み込んで、それをJavaScriptによって検索結果として表示する」
という仕組みになっています。
そのため、対象のコンテンツが何万もある場合などは向いていません

ただ、数百数千のサイトであれば読み込むデータやブラウザ側の処理としても現実的ではあるので、多くのサイトでは問題なく利用できるかと思います。
大規模サイト向けには、今後別の方法で検索機能を提供できるような仕組みを検討しています。

以上説明が長くなりましたが、閲覧者にとって非常に便利なサイト内検索機能、是非ご活用ください!