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

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

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

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

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

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

変数タグの使い方

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

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

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

ブロックタグの使い方

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

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

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

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

タグを使ったコードサンプル

ではタグを使ったコンテンツ表示の例をいくつか紹介します。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}
<!-- 商品のループここまで -->

商品詳細

商品詳細ページのタグは{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:ItemPage}

カテゴリ一覧

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

表示方法は動的に表示するものと、HTMLタグをカスタマイズできるタイプの2種類。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プラグインも絡んでるので、カスタマイズする場合は難易度高めです。