ノウハウをいつでも。ウェブマーケティングのポータルサイト

Movable Type Tips

カテゴリやフォルダを階層的に表示する

このエントリーをはてなブックマークに追加
      
follow us in feedly
友だち追加数

Movable Type でブログやウェブサイトを構築している時に、カテゴリやフォルダの一覧を表示する機会は多いことでしょう。その際、カテゴリやフォルダを階層的に表示させたいケースもあると思います。

カテゴリで階層構造を表示する方法はいくつかありますが、よく使われる方法としては、[MTTopLevelCategories] もしくは [MTSubCategories] というタグを利用するものがあります。

今回は、カテゴリやフォルダの階層表示について説明します。


カテゴリを階層的に表示するためのコード


以下は、Movbale Type の標準テンプレート「Rainier」のウィジェットに使われているタグコードで、カテゴリを階層的に表示するためのコードとなります。
<h3 class="widget-header">カテゴリ</h3>
  <div class="widget-content">
    <mt:TopLevelCategories>
      <mt:SubCatIsFirst>
    <ul class="widget-list">
      </mt:SubCatIsFirst>
      <mt:If tag="CategoryCount">
        <li class="widget-list-item"><a href="<$mt:CategoryArchiveLink$>"
          <mt:If tag="CategoryDescription"> 
           title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"
          </mt:If>>
          <$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
        <mt:Else>
      <li class="widget-list-item"><$mt:CategoryLabel$>
      </mt:If>
      <$mt:SubCatsRecurse$>
      </li>
      <mt:SubCatIsLast>
    </ul>
      </mt:SubCatIsLast>
    </mt:TopLevelCategories>
  </div>


このタグを実行すると、以下のように階層的なカテゴリ表示を行うことができます。

カテゴリを階層表示した状態

フォルダを階層的に表示するためのコード

同じように、フォルダを階層的に表示するためには、[MTTopLevelFolders] もしくは [MTSubFoldres] を利用すると良いでしょう。

ただ、フォルダに用意されているタグは若干異なるため、フォルダを階層的に表示するためには少し注意する必要があります。

上記に記述したカテゴリの階層表示コードを元に、フォルダを階層表示するためのコードとして書き換えてみましょう。書き換える箇所は以下のとおりです。

<mt:TopLevelCategories> => <mt:TopLevelFolders>
<mt:SubCatIsFirst> => <mt:FolderHeader>
<mt:CategoryCount> => <mt:FolderCount>
<mt:CategoryDescription> => <mt:FolderDescription>
<mt:CategoryLabel> => <mt:FolderLabel>
<mt:SubCatsRecurse> => <mt:SubFolderRecurse>
<mt:SubCatIsLast> => <mt:FolderFooter>

以上を踏まえて書き換えると、以下のようになります。

  <h3 class="widget-header">フォルダ</h3>
  <div class="widget-content">
    <mt:TopLevelFolders>
      <mt:FolderHeader>
    <ul class="widget-list">
      </mt:FolderHeader>
    <mt:If tag="FolderCount">
      <li class="widget-list-item"><a href="<$mt:FolderPath$>"
        <mt:If tag="FolderDescription"> 
          title="<$mt:FolderDescription remove_html="1" encode_html="1"$>"
        </mt:If>><$mt:FolderLabel$> (<$mt:FolderCount$>)</a>
      <mt:Else>
      <li class="widget-list-item"><$mt:FolderLabel$>
      </mt:If>
      <$mt:SubFolderRecurse$>
      </li>
      <mt:FolderFooter>
    </ul>
      </mt:FolderFooter>
    </mt:TopLevelFolders>
  </div>

このコードを実行すると、以下のようにフォルダが階層表示されます。

フォルダーを階層表示した状態

フォルダを階層表示する必要がある場合に、ご参考ください。


© MAKEPO

 
このエントリーをはてなブックマークに追加
   
follow us in feedly
友だち追加数

著者情報

オサナイタケシ

長内毅志

Movable Type プロダクトマネジャーを経て、現在、Movable Type エバンジェリスト兼デベロッパーリレーションマネジャー。

他の参加者を見る

長内毅志

関連記事

マーケティングノウハウ足りてますか?

MAKEPOのメルマガ…購読してみませんか?
直近のピックアップ記事のほか、セミナー・ツール活用情報など不定期でお伝えしています。「サイトにアクセスするのは面倒だ!」「電車の中でざっくり読みたい」という方は是非ご登録ください。 リアルタイムで情報取得をしたい方は、RSSまたは公式Twitterをフォローしてご覧ください!

通勤中の情報収集に!

メルマガ登録

いますぐ新着情報を知るなら

LINE@で友だちに追加!