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

hayase

2020.02.12

サイト内検索

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

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ページ内に２つ設置する方法 - 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>

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

以上で実装は完了です。

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