BASEでカテゴリー一覧を表示する方法

この記事は、Zennに投稿した記事を一部編集して転載したものです。

概要

BASE(ベイス)でカテゴリー一覧を表示する際の方法と注意点についてまとめた記事です。

カテゴリー階層について

BASEのカテゴリーは3階層で構成されています。公式資料によると、上位階層から順に大カテゴリ　>　中カテゴリ　>　小カテゴリと呼びます。

重要な制限として、「ナビゲーション内では第二階層（中カテゴリ）までしか表示されません」。つまり、プルダウンなどで表示できるのは第二階層までに限定されます。

コード例

カテゴリー一覧表示コード

{block:AppsItemCategory}
    <ul class="category">
    {block:AppsItemCategoryCategories}
        <!-- 大カテゴリのループ -->
        <li class="category__item"><a href="{AppsItemCategoryCategoryPageURL}">{AppsItemCategoryCategoryName}</a>
            <ul class="category category--medium">
            {block:AppsItemCategoryMediumCategories}
                <!-- 中カテゴリのループ -->
                <li class="category__item"><a href="{AppsItemCategoryMediumCategoryPageURL}">{AppsItemCategoryMediumCategoryName}</a></li>
            {/block:AppsItemCategoryMediumCategories}
            </ul>
        </li>
    {/block:AppsItemCategoryCategories}
    </ul>
{/block:AppsItemCategory}

カテゴリーページのパンくずリストコード

{block:AppsItemCategory}
{block:IndexPageCategory}
    <!-- カテゴリ名をページの見出しとして表示 -->
    <h2 class="categoryTitle01">{IndexPageCategory}</h2>
    {block:HasAppsItemCategoryChildCategories}
        <!-- 子カテゴリの一覧を表示 -->
        <ul>
            {block:AppsItemCategoryChildCategories}
                <li><a href="{AppsItemCategoryChildCategoryPageURL}">{AppsItemCategoryChildCategoryName}</a></li>
            {/block:AppsItemCategoryChildCategories}
        </ul>
    {/block:HasAppsItemCategoryChildCategories}
{/block:IndexPageCategory}
{/block:AppsItemCategory}