🏗️ テーマ基盤中級

テーマ全体のレイアウト構造

Shopify ストアの全ページ共通レイアウトを定義する theme.liquid。ヘッダー、メインコンテンツ領域、サイドバー（ナビゲーション・検索・カート情報）、フッターを構成し、CSS・JavaScript アセットを読み込む。

用途

すべてのページテンプレートが継承する基本的な HTML 構造として機能。ストア共通のナビゲーション、検索機能、カート表示をサイト全体に展開したいときに使う。

設置場所

theme.liquid として layout/ ディレクトリに配置する。すべてのページテンプレート（templates/ 配下の product.liquid、collection.liquid など）がこのレイアウトを自動で継承し、content_for_layout プレースホルダー内にページ固有コンテンツが挿入される。

注意点

このコードは Online Store 1.0 時代の古い実装（mootools.js、slimbox.js、XHTML 1.0 Strict)が含まれているため、モダンなテーマ開発では使用しないこと。現在の Online Store 2.0 では複数セクション対応・JSON 設定・Dawn テーマベースを推奨される。メインメニューは「main-menu」ハンドルのリンクリストが管理画面に存在することが前提で、存在しない場合は navigation が表示されない。

タグ:layouttheme-liquidheader-footernavigationlegacy

コード

86 行 / liquid

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>{{shop.name}} - {{page_title}}</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  {{ 'main.css'     | asset_url | stylesheet_tag }}
  {{ 'shop.js'      | asset_url | script_tag }}

  {{ 'mootools.js'         | asset_url         | script_tag }}
  {{ 'slimbox.js'          | asset_url         | script_tag }}
  {{ 'option_selection.js' | shopify_asset_url | script_tag }}
  {{ 'slimbox.css'         | asset_url         | stylesheet_tag }}

  {{ content_for_header }}
 </head>

<body id="page-{{template}}">
<p class="hide"><a href="#navigation">Skip to navigation.</a></p>
<div id="wrapper">
  <div class="content clearfix">
    <div id="header">
      <h2><a href="/">{{shop.name}}</a></h2>
    </div>
    <div id="left-col">
      {{ content_for_layout }}
    </div>
    <div id="right-col">
      {% if template != 'cart' %}
          <div id="cart-right-col">
          <dl id="cart-right-col-info">
            <dt>Shopping Cart</dt>
            <dd>
            {% if cart.item_count != 0 %}
              <a href="/cart">{{ cart.item_count }} {{ cart.item_count | pluralize: 'item', 'items' }}</a> in your cart
            {% else %}
              Your cart is empty
            {% endif %}
            </dd>
          </dl>
        </div>
      {% endif %}
      <div id="search">
        <dl id="searchbox">
        <dt>Search</dt>
        <dd>
        <form action="/search" method="get">
        <fieldset>
        <input class="search-input" type="text" onclick="this.select()" value="Search this shop..." name="q" />
        </fieldset>
        </form>
        </dd>
        </dl>
      </div>
      <div id="navigation">
        <dl class="navbar">
        <dt>Navigation</dt>
        {% for link in linklists.main-menu.links %}
          <dd>{{ link.title | link_to: link.url }}</dd>
        {% endfor %}
        </dl>

        {% if tags %}
        <dl class="navbar">
        <dt>Tags</dt>
          {% for tag in collection.tags %}
          <dd>{{ tag | highlight_active_tag | link_to_tag: tag }}</dd>
          {% endfor %}
          </dl>
        {% endif %}
      </div>
    </div>

  </div>
    <div id="content-padding"></div>
</div>

<div id="footer">
  {% for link in linklists.footer.links %}
  {{ link.title | link_to: link.url }} {% if forloop.rindex != 1 %} | {% endif %}
  {% endfor %}
</div>

</body>
</html>

出典・ライセンス

Source:: Shopify/liquid/performance/tests/ripen/theme.liquid
Repository:: https://github.com/Shopify/liquid
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

テーマ全体のレイアウト構造

コード

出典・ライセンス

関連項目

セクションスキーマのカスタムブロック定義

セクション呼び出しのフォーマット

レイアウトテンプレートの指定

Liquid フォーマッター互換のセクション表記

基本的なHTMLレイアウト

layout タグのフォーマット