MovableType.net 活用ブログ

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

サイト内検索を利用してタグ検索を実現する方法

MovableType.net には現状記事などにタグをつける機能はありません。

今回はサイト内検索を使い、タグによる記事一覧の表示を実現する方法をご紹介します!

実際の動作は、記事の個別ページに表示されたタグをクリックすると、そのタグによる検索結果ページが表示される、というものになります。

カスタムフィールドを作成する

まず、タグを入力するためにカスタムフィールドを作成します。

システムオブジェクトは記事を選び、タイプはテキスト、識別子はtagsにします。

タグ検索結果ページの作成

続いて、検索結果ページを作成します。デザイン>テンプレートのインデックス・テンプレートで、タグ検索結果ページを tag-search.html というファイル名で作成し、検索結果を表示する部分に以下のようなソースを記述します。

<mt:SetVars>
  blogid=<$mt:BlogID$>
</mt:SetVars>
<$mt:SiteSearchSnippet blog_ids="$blogid" search_result_container="s-result" storage_id="tag" fields="field:tags" query_key="tag" no_search_form="1"$>
<div id="s-result"></div>

ポイントは、以下になります。

  • fields="field:tags": 検索の対象を先程作成したカスタムフィールドのtagsにしている
  • no_search_form="1":タグ検索結果ページには検索ボックスはいらないので非表示にしている

指定できるモディファイアの詳細は以下もご覧ください。

MTSiteSearchSnippet - タグリスト | MovableType.net

また、タグ検索とは別の通常の検索ボックスもページ内に設置している場合は、2つの検索ボックスが設置されることになるので以下の記事を参考にしてください。

サイト内検索の検索ボックスを1ページ内に2つ設置する方法 - MovableType.net 活用ブログ

記事にタグを表示する

最後に記事の個別ページでタグを表示したい部分に、以下のコードを記述します。

<mt:If tag="CustomFieldValue" identifier="tags">
<div class="tags">タグ:<div id="entry-tags"><mt:CustomFieldValue identifier="tags" /></div></div>
</mt:if> <script> (function() { var e = document.querySelector("#entry-tags"); var f = document.createDocumentFragment(); e.textContent.split(/\s+/).forEach(function(t) { var a = document.createElement("a"); a.textContent = t; a.href = "/tag-search.html?tag=" + t; f.appendChild(a); }); e.innerHTML = ""; e.appendChild(f); })(); </script>

このコードでは、カスタムフィールドのタグの値を表示し、そのタグにタグ検索結果ページへのリンクを追加する、ということを行っています。

以上で実装は完了です。

後は、実際のカスタムフィールドで記述をすると、

以下のようにページ内に表示され、

タグをクリックすると検索結果が表示されます。

その他のヒント

その他運用を助ける機能として、サイト内検索機能では表記ゆれに対応することができます。
タグの表記ゆれに対応することができますので、こちらもご利用ください。詳しくは以下の記事をご覧ください。

サイト内検索機能:ユーザー辞書を使って表記ゆれに対応する方法 - MovableType.net 活用ブログ

タグ検索の結果で「とある記事を優先的に表示したい」ということも可能です。やり方は簡単で、優先的に表示したい記事・ウェブページのキーワード欄に、指定したいタグを追加するだけです。

以上、記事にタグをつけて一覧で表示する方法、是非サイト運営でご活用いただければと思います!

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

アカウント作成は無料!

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

アカウント作成