覚書 パンくず

MT8でカテゴリー別のパンくずリストを作成する方法をご説明します。

基本的な実装方法

1. カテゴリーアーカイブテンプレートでの実装

<nav class="breadcrumb">
  <ol>
    <li><a href="<$mt:BlogURL$>">ホーム</a></li>
    <mt:IfArchiveType archive_type="Category">
      <mt:CategoryParents glue=" ">
        <li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
      </mt:CategoryParents>
      <li><$mt:CategoryLabel$></li>
    </mt:IfArchiveType>
  </ol>
</nav>

2. 記事アーカイブでカテゴリー情報を含める場合

<nav class="breadcrumb">
  <ol>
    <li><a href="<$mt:BlogURL$>">ホーム</a></li>
    <mt:EntryCategories>
      <mt:CategoryParents glue=" ">
        <li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
      </mt:CategoryParents>
      <li><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a></li>
    </mt:EntryCategories>
    <li><$mt:EntryTitle$></li>
  </ol>
</nav>

3. より詳細な実装例（構造化データ対応）

<nav class="breadcrumb" aria-label="パンくずリスト">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <!-- ホーム -->
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="<$mt:BlogURL$>">
        <span itemprop="name">ホーム</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    
    <!-- カテゴリー階層 -->
    <mt:EntryCategories>
      <mt:SetVarBlock name="position">2</mt:SetVarBlock>
      <mt:CategoryParents>
        <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
          <a itemprop="item" href="<$mt:CategoryArchiveLink$>">
            <span itemprop="name"><$mt:CategoryLabel$></span>
          </a>
          <meta itemprop="position" content="<$mt:Var name="position"$>" />
        </li>
        <mt:SetVarBlock name="position"><mt:Var name="position" op="+">(1)</mt:SetVarBlock>
      </mt:CategoryParents>
      
      <!-- 現在のカテゴリー -->
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="<$mt:CategoryArchiveLink$>">
          <span itemprop="name"><$mt:CategoryLabel$></span>
        </a>
        <meta itemprop="position" content="<$mt:Var name="position"$>" />
      </li>
    </mt:EntryCategories>
  </ol>
</nav>

4. CSSの例

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin: 0 0.5em;
  color: #999;
}

.breadcrumb a {
  color: #0066cc;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

ポイント

• <mt:CategoryParents>: 親カテゴリーを階層順に取得
• <mt:EntryCategories>: 記事に紐づくカテゴリーを取得
• <mt:IfArchiveType>: アーカイブタイプによって表示を切り替え