🏗️ テーマ基盤初級

テーマのHTML基礎構造

Shopify ストアのすべてのページの基本となるHTMLレイアウト。ページタイプ、言語、SEOメタタグ、ファビコン、ヘッダー・フッターグループ、カートドロワーなど共通要素を一元管理する。

用途

すべてのテーマに必須のマスターレイアウトファイル。ストア全体の言語設定、テーマカラー、メタデータ、アクセシビリティ設定、グローバルナビ・フッターの位置付けを統一するとき。

設置場所

layout/theme.liquid に配置する。この1ファイルがすべてのテンプレート（product.liquid、collection.liquid など）の親枠として自動的に適用される。

注意点

{{ content_for_header }} と {{ content_for_layout }} は Shopify が自動挿入するため、削除や位置変更をしないこと。canonical_url、page_title、page_description、shop.name などのグローバルオブジェクトは Shopify が自動設定しており、テンプレート側で上書きできない。request.design_mode クラスはテーマエディタ（カスタマイズ画面）での編集時のみ適用されるため、スタイル調整にはこれを条件にした CSS 分岐が有効。

タグ:layouthtml-structuremeta-tagaccessibilityseo

コード

61 行 / liquid

<!doctype html>
<html 
  lang="{{ request.locale.iso_code }}"
  class="{% if request.design_mode %}design-mode{% endif %}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_primary }}">

  <link rel="canonical" href="{{ canonical_url }}">
  <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
  <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>

  {%- unless settings.favicon == blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: '32', height: '32' }}">
  {%- endunless -%}

  <title>
    {{ page_title }}
    {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
    {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
    {%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
  </title>

  {% if page_description %}
    <meta name="description" content="{{ page_description | escape }}">
  {% endif %}

  {% render 'meta-tags' %}

  {{ content_for_header }}

  {% render 'styles-scripts' %}
</head>

<body class="{{ request.page_type | prepend: 'page-type-' }}">
  <a class="visually-hidden-focusable" href="#main">
    {{ 'general.accessibility.skip_content' | t }}
  </a>
  
  <div id="header-group" class="sticky-top">
    {% sections 'header-group' %}
  </div>

  <main id="main">
    {{ content_for_layout }}
  </main>

  <div id="footer-group">
    {% sections 'footer-group' %}
  </div>

  {% liquid
    render 'offcanvas-cart'
    render 'offcanvas-search'
    render 'modal-localization'
    render 'rich-snippets'
  %}
</body>
</html>

出典・ライセンス

Source:: kondasoft/ks-bootshop/layout/theme.liquid
Repository:: https://github.com/kondasoft/ks-bootshop
License:: MIT

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

テーマのHTML基礎構造

コード

出典・ライセンス

関連項目

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

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

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

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

基本的なHTMLレイアウト

layout タグのフォーマット