Movable Typeのタグを使用する

Movable Typeのタグの項目を使用する機会があまりなかったので、使用方法についてまとめてみます。

サンプルコード

タグはMovable Typeに標準で用意されている入力フィールドで、以下のような1行テキストです。
複数の値を登録する場合、カンマ区切りで設定します。

例として、以下のような記事と紐づくタグを登録します。

  • 記事A(タグ:タグ例,記事Aのタグ)
  • 記事B(タグ:タグ例,記事Bのタグ)
  • 記事C(タグ:記事Cのタグ)
  • 記事D(タグ:設定なし)

記事に紐づくタグを出力する場合、MTEntryTagsを使って以下のように設定します。

<mt:Entries>
  <h2><mt:EntryTitle></h2>
  <mt:EntryIfTagged>
    <mt:EntryTags>
      <span><$mt:TagName$></span>
    </mt:EntryTags>
  <mt:Else>
    <p>タグなしの場合</p>
  </mt:EntryIfTagged>
</mt:Entries>

再構築を行うと、以下のように表示されました。

<h2>記事D</h2>
<p>タグなしの場合</p>

<h2>記事C</h2>
<span>記事Cのタグ</span>

<h2>記事B</h2>
<span>タグ例</span>
<span>記事Bのタグ</span>

<h2>記事A</h2>
<span>タグ例</span>
<span>記事Aのタグ</span>

次にタグ自体の一覧を表示してみます。
MTTagsを使用します。

<mt:Tags>
  <mt:If name="__first__">
    <ul>
  </mt:If>
  <li><$mt:TagName$>(<$mt:TagCount$>)</li>
  <mt:If name="__last__">
    </ul>
  </mt:If>
</mt:Tags>

再構築を行うと、以下のように表示されました。

<ul>
<li>タグ例(2)</li>
<li>記事Aのタグ(1)</li>
<li>記事Bのタグ(1)</li>
<li>記事Cのタグ(1)</li>
</ul>

タグは記事以外にも設定できますが、上記の一覧内には含まれません。
例えば、以下のようなウェブページとタグを登録したとします。

  • ウェブページA(タグ:タグ例,ウェブページAのタグ)

これで再構築を行っても、出力されるHTMLにウェブページのタグは含まれません。
ウェブページのタグを表示したい場合、typeモディファイアにpageを設定します。

<mt:Tags type="page">
  <mt:If name="__first__">
    <ul>
  </mt:If>
  <li><$mt:TagName$>(<$mt:TagCount$>)</li>
  <mt:If name="__last__">
    </ul>
  </mt:If>
</mt:Tags>

これでウェブページ内のタグ一覧が出力できます。

<ul>
<li>ウェブページAのタグ(1)</li>
<li>タグ例(1)</li>
</ul>

最後にタグ別の記事一覧ページですが、タグ別アーカイブページは基本的には生成できないようです。
近い内容として、インデックステンプレート内にタグ別の一覧ページを生成してみます。

<mt:Tags>
  <mt:SetVars>thisTag=<$mt:TagName$></mt:SetVars>
  <mt:Entries tag="$thisTag">
    <mt:If name="__first__">
      <section>
        <h2><mt:Var name="thisTag"></h2>
        <ul>
    </mt:If>
    <li><mt:EntryTitle></li>
    <mt:If name="__last__">
        </ul>
      </section>
    </mt:If>
  </mt:Entries>
</mt:Tags>

MTTagsでタグのループを回して、その中でMTEntriesでタグに紐づいてる記事のみを出力しています。
これで以下のような出力ができました。

<section>
<h2>タグ例</h2>
<ul>
<li>記事B</li>
<li>記事A</li>
</ul>
</section>

<section>
<h2>記事Aのタグ</h2>
<ul>
<li>記事A</li>
</ul>
</section>

<section>
<h2>記事Bのタグ</h2>
<ul>
<li>記事B</li>
</ul>
</section>

<section>
<h2>記事Cのタグ</h2>
<ul>
<li>記事C</li>
</ul>
</section>

あとはJavaScriptを使って、パラメータの値(?tag=記事Aのタグ や ?tag=タグ例 など)に応じてsectionの表示・非表示を切り替えるようにすれば、見た目上はタグ別アーカイブのようにできるかもしれないです。

参考サイト

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

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2025年2月
 1
2345678
9101112131415
16171819202122
232425262728