📁

【Shopify.dev和訳】Themes/Architecture/Layout/Overview

2021/09/17に公開

Shopify

themes

tech

この記事について

この記事は、Themes/Architecture/Layout/Overviewの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

レイアウト

レイアウトはテーマの基本であり、すべてのテンプレートのレンダリングに使われます。レイアウトファイルは、ヘッダーやフッターなど、繰り返されるテーマ要素を格納するために使用します。

すべてのテーマに必ず含まれているデフォルトのレイアウトは、theme.liquid です。また、カスタムレイアウトを作成することもできます。カスタムレイアウトを使用するか、レイアウトを使用しないかは、layout Liquid タグを使ってテンプレートに設定できます。

レイアウトファイルは、テーマのlayoutディレクトリに格納されます。

標準オブジェクト

レイアウトファイルに含まれる Liquid オブジェクトは大きく分けて 2 つあります。

content_for_header

content_for_headerオブジェクトは、Google Analytics、Shopify Analytics、Shopify アプリなどのための Shopify からのスクリプトを出力します。このオブジェクトへの参照を、HTML タグの<head>と</head>の間に追加する必要があります。

content_for_headerオブジェクトを修正したり、解析したりしてはいけません。content_for_headerが変更されると、あなたのリキッドの動作が変わります。content_for_headerを変更すると、Shopify や公式にサポートされている統合パスを持つ他の分析プログラム内の分析情報が壊れる可能性があります。

Example

<head>
  ...
  {{ content_for_header }}
  ...
</head>

content_for_layout

content_for_layoutオブジェクトは、各テンプレートのコンテンツを動的に出力します。このオブジェクトへの参照は、HTML タグの<body>と</body>の間に追加する必要があります。

Example

<body>
  ...
  {{ content_for_layout }}
  ...
</body>

子孫セレクタ

テンプレートオブジェクトのデータを<body>タグのクラスに出力することで、特定のテンプレートに対応した CSS ルールを作成することができます。

Example

<body class="{{ template.name }}">
  ...
</body>

Shopify アプリのご紹介

Discussion

ログインするとコメントできます