TopMovable Typeカスタマイズカテゴリー > 2011年11月
2011年11月22日

Movable Typeのカテゴリリストで階層別に背景画像を変更する

November 22,2011 1:55 AM
Tag:[]
Permalink

Movable Typeのカテゴリリストで階層別に背景画像を変更する方法を紹介します。

1.カテゴリリストの完成サンプル

このカスタマイズでは次のようなカテゴリリストを出力します。

カテゴリリスト

カテゴリリストのli要素のclass属性には、階層別に異なる値を設定します。class属性値にスタイルを適用すれば、階層別に異なる背景画像を適用できます。

また、サンプルでは第3階層の最後のli要素に「last」というclass属性値も付与しています。

<ul>
  <li class="parent"><a href="http://user-domain/cat1/">親カテゴリ</a>
    <ul>
      <li class="child"><a href="http://user-domain/cat1/1/">子カテゴリ1</a>
        <ul>
          <li class="grandchild"><a href="http://user-domain/cat1/1/1/">孫カテゴリ1</a></li>
          <li class="grandchild"><a href="http://user-domain/cat1/1/2/">孫カテゴリ2</a></li>
          <li class="grandchild last"><a href="http://user-domain/cat1/1/3/">孫カテゴリ3</a></li>
        </ul>
      </li>
      <li class="child"><a href="http://user-domain/cat1/2/">子カテゴリ2</a>
        <ul>
          <li class="grandchild"><a href="http://user-domain/cat1/2/1/">孫カテゴリ1</a></li>
          <li class="grandchild"><a href="http://user-domain/cat1/2/2/">孫カテゴリ2</a></li>
          <li class="grandchild last"><a href="http://user-domain/cat1/2/3/">孫カテゴリ3</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

2.カスタマイズ

1項のカテゴリリストを出力するには、次のサブテンプレートを利用します。

<$mt:SetVar name="depth" value="1"$>
<mt:TopLevelCategories>
  <mt:SubCatIsFirst>
<ul>
  </mt:SubCatIsFirst>
    <mt:if name="depth" eq="1">
  <li class="parent"><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
    </mt:if>
    <mt:if name="depth" eq="2">
  <li class="child"><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
    </mt:if>
    <mt:if name="depth" eq="3">
      <mt:SubCatIsLast>
  <li class="grandchild last"><a href="<$MTCategoryArchiveLink$>"><mt:CategoryLabel></a>
      <mt:else>
  <li class="grandchild"><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
      </mt:SubCatIsLast>
    </mt:if>
    <$mt:SetVar name="depth" op="++"$>
  <$mt:SubCatsRecurse$>
  <$mt:SetVar name="depth" op="--"$>
</li>
  <mt:SubCatIsLast>
</ul>
  </mt:SubCatIsLast>
</mt:TopLevelCategories>

ポイントは青色で示した変数depthの制御で、これで階層の深さを判断しています。変数をインクリメントしているのはMTSubCatsRecurseの直前のMTSetVarタグ、デクリメントしているのがMTSubCatsRecurseの直後のMTSetVarタグです。

また、赤色で示したMTSubCatIsLastタグで、第3階層の「last」を付与を制御しています。

ちなみに、

      <mt:SubCatIsLast>
  <li class="grandchild last"><a href="<$MTCategoryArchiveLink$>"><mt:CategoryLabel></a>
      <mt:else>
  <li class="grandchild"><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
      </mt:SubCatIsLast>

の5行は、実際には次の1行に置き換えて書くこともできます。

<li class="grandchild<mt:SubCatIsLast> last</mt:SubCatIsLast>"><a href="<$MTCategoryArchiveLink$>"><mt:CategoryLabel></a>

第1階層・第2階層の判定処理の中に、第3階層の処理と同じようにMTSubCatIsLastタグを使えば、「parent」や「child」に「last」を付与することができます。

3.カスタマイズ(第1階層をh3要素にする)

第1階層のみをh3要素にするには、次のサブテンプレートを利用します。

<$mt:SetVar name="depth" value="1"$>
<mt:TopLevelCategories>
  <mt:SubCatIsFirst>
    <mt:if name="depth" ne="1">
<ul>
    </mt:if>
  </mt:SubCatIsFirst>
    <mt:if name="depth" eq="1">
<h3><mt:CategoryLabel></h3>
    </mt:if>
    <mt:if name="depth" eq="2">
  <li class="child"><MTCategoryLabel>
    </mt:if>
    <mt:if name="depth" eq="3">
      <mt:SubCatIsLast>
  <li class="grandchild last"><a href="<$MTCategoryArchiveLink$>"><mt:CategoryLabel></a>
      <mt:else>
  <li class="grandchild"><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a>
      </mt:SubCatIsLast>
    </mt:if>
    <$mt:SetVar name="depth" op="++"$>
  <mt:SubCatsRecurse>
  <$mt:SetVar name="depth" op="--"$>
  <mt:if name="depth" ne="1">
</li>
  </mt:if>
  <mt:SubCatIsLast>
    <mt:if name="depth" ne="1">
</ul>
    </mt:if>
  </mt:SubCatIsLast>
</mt:TopLevelCategories>

2項のサブテンプレートの違いは、赤色で示しました。違いは、第1階層の処理でh3要素を出力することと、ul要素を出力しないことです。

4.その他

このエントリーのカスタマイズでは変数を利用して階層を判断していますが、次のタグを利用しても実現可能です。

  • MTHasParentCategory
  • MTHasNoParentCategory
  • MTHasSubCategories
  • MTHasNoSubCategories

例えば、第2階層の判定にはMTHasParentCategoryタグとMTHasSubCategoriesタグ、第3階層の判定にはMTHasNoSubCategoriesタグを使用します。ただし、第2階層までしかないカテゴリがあると、第2階層がMTHasNoSubCategoriesタグの判定にひっかかってしまい、期待通りの出力にならない可能性があるので気をつけてください。

Comments [0] | Trackbacks [0]
2011年11月11日

Movable Typeで製品情報のテーブルを作る

November 11,2011 1:55 AM
Tag:[, ]
Permalink

Movable Typeで、次のように製品別に各情報(ソフトウェア/FAQ/ダウンロード)の有無を、テーブル形式で表示する方法を紹介します。

ソフトウェアFAQダウンロード
製品A×
製品B×
製品C×

このエントリーは、MTQのフォーラムで質問された回答の情報展開です。

1.ブログの構造

まず「製品」ブログがあり、そこに投稿されているブログ記事のタイトルは次のようになっています。

  • 製品A
  • 製品B
  • 製品C

「製品」ブログと別に、「ソフトウェア」「FAQ」「ダウンロード」の各ブログがあり、そこに「製品」ブログと同じブログ記事タイトルのブログ記事を必要に応じて作成します。ここでは次のような状態になっていると仮定します。また各ブログ記事にはブログ名と同じカテゴリもひもづいています。

  • 「ソフトウェア」ブログ
    ブログ記事:製品A・製品B(カテゴリ:ソフトウェア)
  • 「FAQ」ブログ
    ブログ記事:製品B・製品C(カテゴリ:FAQ)
  • 「ダウンロード」ブログ
    ブログ記事:製品A・製品C(カテゴリ:ダウンロード)

上記の状態で、冒頭のような製品別に情報有無を示すテーブルを作成します。

ソフトウェアFAQダウンロード
製品A×
製品B×
製品C×

2.テンプレート

テーブルを作成するためのテンプレートは次のようになります。

<mt:SetHashVar name="list">
  <$mt:SetVar name="1" value="ソフトウェア"$>
  <$mt:SetVar name="2" value="カタログ"$>
  <$mt:SetVar name="3" value="FAQ"$>
</mt:SetHashVar>
 
<mt:SetVarTemplate name="foo">
  <$mt:SetVar name="pname_cat" value="0"$>
  <mt:TopLevelCategories category="$category">
    <$mt:CategoryLabel setvar="catname"$>
    <mt:If name="catname" eq="$pname">
      <$mt:SetVar name="pname_cat" value="1"$>
      <mt:If tag="CategoryCount">
<td>○</td>
      <mt:Else>
<td>×</td>
      </mt:If>
    </mt:If>
    <$mt:SubCatsRecurse$>
  </mt:TopLevelCategories>
  <mt:Unless name="pname_cat">
<td>×</td>
  </mt:Unless>
</mt:SetVarTemplate>
 
<table>
  <thead>
    <tr>
      <th></th>
<mt:Loop name="list">
  <th><$mt:GetVar name="__value__"$></th>
</mt:Loop>
    </tr>
  </thead>
  <tbody>
<mt:Entries>
  <$mt:EntryTitle setvar="pname"$>
    <tr><td><$mt:GetVar name="pname"$></td>
  <mt:Loop name="list">
    <$mt:GetVar name="__key__" setvar="blog_id"$>
    <$mt:GetVar name="__value__" setvar="category"$>
    <mt:Blogs include_blogs="$blog_id">
      <$mt:GetVar name="foo"$>
    </mt:Blogs>
  </mt:Loop>
    </tr>
</mt:Entries>
  </tbody>
</table>

3.テンプレートの解説

まず、最初のMTSetHashVarタグでブログIDとブログ名のハッシュを用意します。

<mt:SetHashVar name="list">
  <$mt:SetVar name="1" value="ソフトウェア"$>
  <$mt:SetVar name="2" value="カタログ"$>
  <$mt:SetVar name="3" value="FAQ"$>
</mt:SetHashVar>

サンプルテンプレートでは、MTSetHashVarタグの次にMTSetVarTemplateタグがありますが、この説明は後回しにして、最後のtable要素出力用のサブテンプレートについて説明します。

<table>
  <thead>
    <tr>
      <th></th>
<mt:Loop name="list">
  <th><$mt:GetVar name="__value__"$></th>
</mt:Loop>
    </tr>
  </thead>
  <tbody>
<mt:Entries>
  <$mt:EntryTitle setvar="pname"$>
    <tr><td><$mt:GetVar name="pname"$></td>
  <mt:Loop name="list">
    <$mt:GetVar name="__key__" setvar="blog_id"$>
    <$mt:GetVar name="__value__" setvar="category"$>
    <mt:Blogs include_blogs="$blog_id">
      <$mt:GetVar name="foo"$>
    </mt:Blogs>
  </mt:Loop>
    </tr>
</mt:Entries>
  </tbody>
</table>

MTLoopタグで、さきほどのハッシュを読み込んでthead要素とth要素を出力します。

<mt:Loop name="list">
  <th><$mt:GetVar name="__value__"$></th>
</mt:Loop>

tbody要素ではMTEntriesタグでブログ記事を順番に読み出します。テーブルの一番左にブログ記事タイトルを出力するため、一旦変数pnameにブログ記事タイトルを保持して、それを出力します。

<mt:Entries>
  <$mt:EntryTitle setvar="pname"$>
    <tr><td><$mt:GetVar name="pname"$></td>

次のMTLoopタグでは、ハッシュ変数listのキーと値をそれぞれ読み出して、変数blog_idと変数categoryに保持します。変数blog_idはMTBlogsタグのblog_idモディファイアに利用して各ブログの情報を読み出します。

  <mt:Loop name="list">
    <$mt:GetVar name="__key__" setvar="blog_id"$>
    <$mt:GetVar name="__value__" setvar="category"$>
    <mt:Blogs include_blogs="$blog_id">
      <$mt:GetVar name="foo"$>
    </mt:Blogs>
  </mt:Loop>

MTBlogsタグブロックで冒頭の表の○×部分の情報を出力しますが、ここでさきほどスキップしたMTSetVarTemplateタグの内容(変数foo)を利用します。

<mt:SetVarTemplate name="foo">
  <$mt:SetVar name="pname_cat" value="0"$>
  <mt:TopLevelCategories category="$category">
    <$mt:CategoryLabel setvar="catname"$>
    <mt:If name="catname" eq="$pname">
      <$mt:SetVar name="pname_cat" value="1"$>
      <mt:If tag="CategoryCount">
<td>○</td>
      <mt:Else>
<td>×</td>
      </mt:If>
    </mt:If>
    <$mt:SubCatsRecurse$>
  </mt:TopLevelCategories>
  <mt:Unless name="pname_cat">
<td>×</td>
  </mt:Unless>
</mt:SetVarTemplate>

MTSetVarTemplateタグではTopLevelCategoriesタグを使って各ブログのカテゴリを順次読み出します。

  <mt:TopLevelCategories category="$category">
    <$mt:CategoryLabel setvar="catname"$>

読み出したカテゴリがブログ名と等しいカテゴリ名であれば、そのカテゴリに属するブログ記事数をMTIfタグとMTCategoryCountを組み合わせて判定し、記事が投稿されていれば○を、投稿されていなければ×をtd要素と組み合わせて出力します。

    <mt:If name="catname" eq="$pname">
      <$mt:SetVar name="pname_cat" value="1"$>
      <mt:If tag="CategoryCount">
<td>○</td>
      <mt:Else>
<td>×</td>
      </mt:If>
    </mt:If>

また、ブログ名と等しいカテゴリが1つも存在しない場合を考慮して、次の部分で×を出力します。

  <mt:Unless name="pname_cat">
<td>×</td>
  </mt:Unless>

変数pname_catはカテゴリ繰り返し処理の前に「0」を設定して、カテゴリ名とブログ名が等しい場合に「1」を設定するようにしています。

  <$mt:SetVar name="pname_cat" value="0"$>
    …中略…
    <mt:If name="catname" eq="$pname">
      <$mt:SetVar name="pname_cat" value="1"$>

最終的な形は、これに「Movable TypeでMTPagesタグとMTEntriesタグを入れ子にして動作させる方法」を組み合わせています。

具体的には、table要素全体をMTPagesタグで括って、ウェブページに作成した製品情報からブログ記事を取り出し、さらに各ブログの情報を取り出しています。ブログ記事を取り出す際にMTPagesのコンテキストと競合しないよう、MTEntriesタグにinclude_blogsモディファイアを与えます。

そのサブテンプレートについては以下の記事のコメント欄の最後の部分をご覧ください。

MTQフォーラム - 製品関連情報をマトリックスで表示したい

前述の記事や本エントリーで紹介するテンプレートを組み合わせれば、ブログ・カテゴリ・ウェブページ・ブログ記事の情報を組み合わせた、さまざまなテーブルを作ることができると思います。色々試してみてください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3