更新日: 2022 / 06 / 19

BASEのテンプレートタグの使い方まとめ

カテゴリー: BASE

BASEテーマカスタマイズに必要な独自タグの使い方を解説。

BASEでは値（ショップ名など）の出力や商品のループ表示にWordpressで使われているような独自タグを使います。

ここでは効率よくテーマ開発を進めるための、独自タグの基本的な使い方をまとめています。

  1. BASEのテンプレートタグとは？

  2. BASE独自タグの基本的な使い方

    1. 変数タグの使い方
    2. ブロックタグの使い方

  3. BASEの各ページで使えるコード

    1. 商品一覧で使えるBASEタグのコード例

  4. 商品詳細で使えるBASEタグのコード例

    1. カテゴリ一覧のコードサンプル
    2. パンくずリスト

  5. まとめ

BASEのテンプレートタグとは？

BASEタグはテーマのコード内でページのURLや商品一覧を表示するために使われるものです。

例えばショップのロゴとトップページのURLを出力したい場合は以下のようなタグが使われます。

<html>
    <head>
        ...
    </head>
    <body>
        <h1><a href="{IndexPageURL}">{LogoTag}</a></h1>
    </body>
</html>

{}でタグが認識され、その中にタグ名を入れることで値が表示されます。

Wordpressを使ったことがある人ならテンプレートタグと同じ感じで使うことができると思います。

<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo get_bloginfo( 'name' ); ?></a></h1>

BASE独自タグの基本的な使い方

BASE独自タグの基本的な使い方

独自タグは変数として使うものとブロックとして使うものの２通りがあります。使えるタグはドキュメントに掲載されているので、どんな値が出力されるのかなどを確認できます。

変数タグの使い方

変数タグは、{BASEMenuTag}のように単独で記述し、値を直接表示することができます。ページのリンクやショップの情報などがあります。

<!-- トップページへのリンク -->
{IndexPageURL}

<!-- ショップの名前 -->
{ShopName}

ブロックタグの使い方

ブロックはループや現在のページの判別（if文）で使用します。ループは商品一覧や関連商品、ifブロックは現在のページや商品の有無を判別できます。

また、ブロックタグでは開始タグと閉じタグが必要です。

<!-- 商品のループ -->
{block:Items}
  {ItemTitle}
{/block:Items}

<!-- もしラベル表示APPがあればラベルを表示 -->
{block:AppsItemLabel}
  {AppsItemLabelTag}
{/block:AppsItemLabel}

BASEの各ページで使えるコード

ではタグを使ったコンテンツ表示の例をいくつか紹介します。BASEアプリのサンプルコードはドキュメントにあるのでそちらも参考にしてください。

商品一覧で使えるBASEタグのコード例

商品一覧はブロックタグでループを作り、変数タグで値を出力するだけです。

<!-- 商品のループ開始 -->
{block:Items}
<div class="products">
  <!-- 商品画像の表示 -->
  <div class="image">
    <img src="{block:ItemImage1}{ItemImage1URL-300}{/block:ItemImage1}{block:NoItemImage1}{ItemNoImageURL}{/block:NoItemImage1}" alt="{ItemTitle}" title="{ItemTitle}" />
  </div>

  <!-- 商品タイトルを表示 -->
  <h2 class="title">
    <a href="{ItemPageURL}">{ItemTitle}</a>
  </h2>

  <!-- 在庫があれば、価格を表示 -->
  {block:HasItemStock}
    <p class="price">{ItemPrice}</p>
  {/block:HasItemStock}

  <!-- 在庫がなければ売り切れ表示 -->
  {block:NoItemStock}
    <p class="soldout">SOLD OUT</p>
  {/block:NoItemStock}
</div>
{/block:Items}
<!-- 商品のループここまで -->

商品詳細で使えるBASEタグのコード例

商品詳細ページのタグは{block:ItemPage}で囲み、商品用の変数タグで情報を表示します。

{block:ItemPage}
  {IllegalReportMessageTag}

  <!-- 商品画像 -->
  <div class="item-image">
    {block:AppsItemLabel}
      {AppsItemLabelTag}
    {/block:AppsItemLabel}
    <img src="{block:ItemImage1}{ItemImage1URL-500}{/block:ItemImage1}{block:NoItemImage1}{ItemNoImageURL}{/block:NoItemImage1}" alt="{ItemTitle}" title="" id="img_large" itemprop="image" >
  </div>

  <!-- 商品詳細 -->
  <div class="item-detail">
    <div class="item-title">
      <h2 class="title">{ItemTitle}{block:AppsDownload}{block:ItemDigitalContent}({ItemDigitalContent}){/block:ItemDigitalContent}{/block:AppsDownload}</h2>
    </div>
    <div class="item-price">
      {block:HasItemStock}
        {block:NoItemProperPrice}
        <!-- 定価 -->
        <p class="price">{ItemPrice}</p>
        {/block:NoItemProperPrice}
        {block:HasItemProperPrice}
        <!-- 割引 -->
        <p class="price-discount">
          <span class="discount-default">{ItemProperPrice}</span><span class="discount-ratio">{ItemDiscountRate}</span>
          <span class="price">{ItemPrice}</span>
        </p>
        {/block:HasItemProperPrice}
      {/block:HasItemStock}
      {block:NoItemStock}
      <span class="price-del">{ItemPrice}</span>
      <span class="price-soldout">SOLD OUT</span>
      {/block:NoItemStock}
    </div>
    {ItemAttentionTag}
  </div>

  <!-- カートボタン -->
  <form id="purchase_form" name="menu" action="{AddToCartURL}" method="post">
    {ItemSelectTag}
    {block:HasItemStock}
    <input type="submit" value="{lang:AddToCart}" class="buttonHover">
    {/block:HasItemStock}
    {block:NoItemStock}
    <a href="{ContactPageURL}/items/{ItemId}" class="buttonHover">{lang:NoItemInquiry}</a>
    {/block:NoItemStock}
  </form>

  <!-- シェアボタンと通報ボタン -->
  <div class="item-share">
    <div class="twitter">
      <a href="http://twitter.com/share" class="twitter-share-button" data-url="{ItemRedirectUrl}" data-lang="ja" data-hashtags="{TwitterDataHashtags}" data-via="{TwitterDataVia}">{lang:Tweet}</a>
    </div>
    <div class="facebook">
      <div class="fb-share-button" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u&src=sdkpreparse">シェア</a></div>
    </div>
    {EmbedWidgetTag}
    <div id="reportBtn">
      {IllegalReportTag}
    </div>
  </div>

  <!-- 商品説明 -->
  <p class="item-description">{ItemDetail}</p>

  <!-- 商品レビュー -->
  {block:AppsReview}
  {AppsReviewTag}
  {/block:AppsReview}

  <!-- 関連商品 -->
  {block:HasRelatedItems}
  <div>関連商品</div>
  {block:RelatedItems}
      <div><a href="{RelatedItemPageURL}"><img src="{RelatedItemImageURL-640}"></a></div>
      <div>{RelatedItemTitle} / {RelatedItemPrice}</div>
  {/block:RelatedItems}
  {/block:HasRelatedItems}

{/block:ItemPage}

カテゴリ一覧のコードサンプル

グルーバルメニューやサイドバーに表示するカテゴリ一覧は第２階層までの仕様となっているようです。

表示方法は動的に表示するものと、HTMLタグをカスタマイズできるタイプの２種類。HTMLカスタマイズできる方はHTMLタグやclass名を自由に変更できます。

<!-- 動的表示 -->
{block:AppsItemCategory}
	{AppsItemCategoryCategoriesTag}
{/block:AppsItemCategory}

<!-- HTMLカスタマイズ -->
{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}
	{BreadcrumbTag}
{/block:AppsItemCategory}
{/block:IndexPageCategory}

まとめ

BASEはheadタグも含めていじれるのでけっこう自由度高いのが特徴です。CSSだけならそれほどでもないんですが、各ページのHTMLも含めてカスタマイズしようと思うとタグの使い方をしっかり覚える必要あり。

とくに商品ページは使えるタグが多くてけっこうややこしいですね。独自タグだけでなく、colorBoxやbxSliderといったjQueryプラグインも絡んでるので、カスタマイズする場合は難易度高めです。