TopMovable Typeカスタマイズカテゴリー > 親カテゴリページにサブカテゴリページのリンクを表示する
2010年4月 5日

親カテゴリページにサブカテゴリページのリンクを表示する

Posted at April 5,2010 12:33 AM
Category:[カテゴリー]
Tag:[, , ]

親カテゴリページにサブカテゴリページのリンクを表示するカスタマイズを紹介します。ご質問をいただいたので、パターンをいくつか揃えてみました。

ここでは、次のようなカテゴリとブログ記事の構成をサンプルにします。

1.基本

親カテゴリ直下のサブカテゴリ名を表示します。サブカテゴリ名にはカテゴリアーカイブページへのリンクを設定します。

親カテゴリアーカイブページの表示

子カテゴリ1アーカイブページの表示

<mt:SubCategories>
  <mt:SubCatIsFirst>
<ul>
  </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a></li>
  <mt:SubCatIsLast>
</ul>
  </mt:SubCatIsLast>
</mt:SubCategories>

サイドバーのカテゴリリストはMTTopLevelCategoriesタグを用いますが、カテゴリアーカイブページでカテゴリの階層関係を制御する場合は、MTSubCategoriesタグを利用します。

2.基本(階層表示)

親カテゴリに含まれるサブカテゴリを階層表示する場合は、1項のサブテンプレートに、MTSubCatsRecurseタグを追加します。

親カテゴリアーカイブページの表示

<mt:SubCategories>
  <mt:SubCatIsFirst>
<ul>
  </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
  <mt:SubCatsRecurse />
  </li>
  <mt:SubCatIsLast>
</ul>
  </mt:SubCatIsLast>
</mt:SubCategories>

3.サブカテゴリページにブログ記事タイトルを表示する

親カテゴリページには直下のサブカテゴリのカテゴリ名のみを表示し、最下層のサブカテゴリページはブログ記事タイトルのみを表示します。

孫カテゴリアーカイブページの表示

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a></li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
<mt:else>
  <mt:Entries>
    <mt:EntriesHeader>
  <ul>
    </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
  </ul>
    </mt:EntriesFooter>
  </mt:Entries>
</mt:hasSubCategories>

MTHasSubCategoriesタグでサブカテゴリの有無を判定し、サブカテゴリがあれば、サブカテゴリ名のみを表示します。サブカテゴリがなければ最下層のカテゴリとみなし、ブログ記事タイトルを表示します。

4.サブカテゴリページにブログ記事タイトルを表示する(階層表示)

サブカテゴリを階層表示する場合は、3項のサブテンプレートに、MTSubCatsRecurseタグを追加します。

親カテゴリアーカイブページの表示

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
    <mt:SubCatsRecurse />
  </li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
<mt:else>
  <mt:Entries>
    <mt:EntriesHeader>
  <ul>
    </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
  </ul>
    </mt:EntriesFooter>
  </mt:Entries>
</mt:hasSubCategories>

5.サブカテゴリ名とブログ記事タイトルをあわせて表示する

親カテゴリページには直下のサブカテゴリのカテゴリ名と、サブカテゴリに属するブログ記事タイトルを表示し、最下層のサブカテゴリページはブログ記事タイトルのみを表示します。

親カテゴリアーカイブページの表示

子カテゴリ1アーカイブページの表示

孫カテゴリアーカイブページの表示

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
    <mt:Entries>
      <mt:EntriesHeader>
  <ul>
      </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
      <mt:EntriesFooter>
  </ul>
      </mt:EntriesFooter>
    </mt:Entries>
  </li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
<mt:else>
  <mt:Entries>
    <mt:EntriesHeader>
  <ul>
    </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
  </ul>
    </mt:EntriesFooter>
  </mt:Entries>
</mt:hasSubCategories>

最下層のカテゴリでブログ記事タイトルを表示しない場合は次のようにします。

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
    <mt:Entries>
      <mt:EntriesHeader>
  <ul>
      </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
      <mt:EntriesFooter>
  </ul>
      </mt:EntriesFooter>
    </mt:Entries>
  </li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
</mt:hasSubCategories>

6.サブカテゴリ名とブログ記事タイトルをあわせて表示する(階層表示)

サブカテゴリを階層表示する場合は、5項のサブテンプレートに、MTSubCatsRecurseタグを追加します。

親カテゴリアーカイブページの表示

子カテゴリ1アーカイブページの表示

孫カテゴリアーカイブページの表示

<mt:hasSubCategories>
  <mt:SubCategories>
    <mt:SubCatIsFirst>
<ul>
    </mt:SubCatIsFirst>
  <li><a href="<mt:CategoryArchiveLink />"><mt:CategoryLabel /></a>
    <mt:Entries>
      <mt:EntriesHeader>
  <ul>
      </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
      <mt:EntriesFooter>
  </ul>
      </mt:EntriesFooter>
    </mt:Entries>
    <mt:SubCatsRecurse />
  </li>
    <mt:SubCatIsLast>
</ul>
    </mt:SubCatIsLast>
  </mt:SubCategories>
<mt:else>
  <mt:Entries>
    <mt:EntriesHeader>
  <ul>
    </mt:EntriesHeader>
    <li><a href="<mt:EntryLink />"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
  </ul>
    </mt:EntriesFooter>
  </mt:Entries>
</mt:hasSubCategories>
Posted by yujiro   このページの先頭に戻る
関連記事
この記事を読んだ人はこんな記事も読んでいます
人気エントリー
Hatena Hot Entries
Hatena Entries
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)

Now loading...
Introduction
Entries of this Category
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12