MovableType.net 活用ブログ

MovableType.net の新機能の使い方や、ウェブサイトの構築・運用に役立つTIPSを紹介しています。

サイト内検索機能を徹底解説!

サイト内検索機能として使っていたGoogleカスタム検索の有料版がなくなって以降、お困りの方も多かったかと思います。

MovableType.netでは、DataAPI+JavaScriptによってサイト内検索を行える機能を利用できるようになりました。

今回は、このサイト内検索機能を徹底解説したいと思います!

検索ボックスの設置方法


検索ボックスを設置にするのは簡単です、以下のMTタグを一つテンプレートに記述するだけです。

<$mt:SiteSearchSnippet$>

そうすると実際のソースは以下のようなものが出力されます

<div class="mt-site-search-container">
<div id="mt-site-search" class="mt-site-search" data-worker="/.app/search-worker.js" data-fields="title,body,more,keywords" data-language="ja_JP"></div>
<script src="https://site-search.movabletype.net/v1.0.0/js/search.js" id="mt-site-search-script" async defer></script>
</div>

クラス構造など決まっているので、これにあわせてCSSを追加すれば検索ボックスの見た目もコントロールできます。

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

これだと、ちょっと設置には難しい場合が多いですよね(^^;)

ということでフォームの検索結果をカスタマイズする方法をご紹介していきます!

検索結果のカスタマイズ

カスタマイズ可能な項目の詳細は以下のマニュアルにも記述しているのですが、

今回はこれは使うよね!という代表的なものの組み合わせを説明したいと思います!

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

まず、検索結果は専用のページをインデックス・テンプレートで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によって検索結果として表示する」という仕組みになっているため対象のコンテンツが何万もある場合などは向いていません。

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

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

このエントリーをはてなブックマークに追加

アカウント作成は無料! 同じアカウントでウェブサイトをいくつでも作成でき、作成したウェブサイト毎に14日間無料で利用可能です。

アカウント作成