Dawn2.0テーマを例に、「ざっくりつかむShopifyテーマ」について解説します。各ファイルの関係性や、全体的なインクルードの流れについて記述しています。
目次:
- レイアウト→テンプレート→セクション→スニペットの流れを把握する
- レイアウトファイル: 最も基本的なファイル。ページの種類を判別
- テンプレートファイル: 該当ページの雛形となる「枠組み」ファイル
- セクションファイル: 該当テンプレートの「エリア」
- スニペットファイル: 再利用ブロックなどを別に保管しておく「便利な道具箱」
- レイアウト(layout): 基本ファイルから、ふさわしいテンプレートを自動呼で選んで呼び出す
- ページごとにふさわしいテンプレートを呼び出す: {{ content_for_layout }}
- ヘッダー情報を出力: {{ content for header }}
- セクションファイルやスニペットを呼び出すことも可能
- テンプレート(templates): ページを構成するセクションと順序を記述
- 2つのテンプレートファイル方式: .liquidと.json
- JSON形式の場合
- セクション(sections): エリア単位で表示させる内容をliquidタグ等を用いて記述
- schemaタグ
- styleタグ
- Shopifyテーマ構造を把握できたら、Dawnテーマのカスタマイズに挑戦
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
レイアウト→テンプレート→セクション→スニペットの流れを把握する
Shopifyテーマがコードを呼び出していく大きな流れとして、レイアウト→テンプレート→セクション→スニペットの流れがあります。(インクルードの順番)
少し抽象的な内容になりますが、それぞれのファイルがどのような役割を果たしているのかを把握しておきましょう。
レイアウトファイル: 最も基本的なファイル。ページの種類を判別
まず最も基本的なファイルとしてレイアウトファイルが読み込まれ、その中で「呼び出すのはどのページか」がURLによって判別されます。呼び出す種類のページが判別されたら、その種類のページの雛形である「テンプレートファイル」が呼び出されます。
最も基礎となるレイアウトファイルによって、表示されるページが商品ページか、ブログ記事ページか、TOPページかなどが判別されます。
テンプレートファイル: 該当ページの雛形となる「枠組み」ファイル
テンプレートファイルでは、「そのテンプレートを構成するパーツ(=セクション)をどのような順番や設定で出力するか」という雛形が定められています。
まさしく、そのページの「テンプレート」を定めている形です。そのページの基本的な形を決めてある、「枠組み」ファイルだと思っても良いでしょう。
このテンプレートファイルは、Shopify管理画面のテーマ編集から編集する際、ページの雛形として出力されるものと同一になります。
セクションファイル: 該当テンプレートの「エリア」
テンプレートファイルによってどこのページが呼び出されるかが決まったら、そのページを構成していく「セクション」単位のコードがセクションファイルによって書き出されていきます。
実際に書き出されるHTMLコードはこのセクションファイルに記述されていることが多いです。
スニペットファイル: 再利用ブロックなどを別に保管しておく「便利な道具箱」
何度も利用する可能性があるブロックのコードや、セクションファイルに記述してしまうと冗長になってしまう可能性のあるコードが保管してあるファイル群です。
セクションファイルから呼び出されることがほとんどですが、特に制約はなく、いかなる種類のファイルから呼び出すことも可能です。
スニペット = 用語集という意味合いもあることから、よく使うコード表現を保管しておき、必要に応じて短い表現で利用できる「便利な道具箱」のようなイメージを持っておくとよいと思います。
以上のレイアウト→テンプレート→セクション→スニペットの流れ、特にテンプレート→セクションの関係を抑えておきましょう。
以下より、それぞれのファイル群について詳細を説明していきます。
レイアウト(layout): 基本ファイルから、ふさわしいテンプレートを自動呼で選んで呼び出す
layoutフォルダ内のレイアウトファイル。もっとも基本となるこのレイアウトファイルについて詳細を見ていきます。
レイアウトファイル(layout)は、デフォルトでは theme.liquidが採用されます。
「テーマタグ」と呼ばれるタグによって、他ファイルの情報をインクルードしている。
テンプレートを自動で選んで呼び出す以外にも、ヘッダー情報の出力や直接セクションファイルを呼び出したりもしています。
さまざまな条件分岐などを用いて、「今いるページでは何を出力するか = 何のテンプレートファイルを呼び出すか」を判別・出力しています。
ページごとにふさわしいテンプレートを呼び出す: {{ content_for_layout }}
レイアウトファイルの中で最も重要だと言っても過言ではない、この1つのタグ。
{{ content_for_layout }}
このタグによって、「templateフォルダ内にある、どのテンプレートファイルを呼び出すか?」が制御されています。
この {{ content_for_layout }} タグが レイアウト → テンプレート の流れを作っています。
ヘッダー情報を出力: {{ content for header }}
{{ content for header }}
セクションファイルやスニペットを呼び出すことも可能
レイアウト → テンプレート → セクション → スニペットの流れをスキップして、レイアウトファイルから直接セクションファイル(sections)を呼び出すことも可能です。
sectionsフォルダ内に格納されている、セクションファイルを呼び出すタグは下記のように記述します。
{% section ‘section-file-name’ %}
たとえば、私の場合(Dawn2.0テーマ)はtheme.liquidに下記のようなコードが記述されていました。
{% section 'announcement-bar' %}
{% section 'header' %}
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'footer' %}
また、セクションよりも粒度の小さい「スニペット」(snippets)を呼び出すことも可能です。
スニペットファイルはsnippetフォルダに格納されています。
下記のコードでは、renderタグを用いてsnippet > meta-tags.liquid を呼び出しています。
{% render 'meta-tags' %}
テンプレート(templates): ページを構成するセクションと順序を記述
「特定のページ内でどのセクションを表示させるか?」というセクション内容とその順序の情報を持っているのがテンプレートファイル。
2つのテンプレートファイル方式: .liquidと.json
JSON形式の場合
下記は、Dawn2.0のarticle.jsonの内容です。JSON形式で、article = ブログ記事 にどんな内容をどんな順番で吐き出すのか?を定義しています。
吐き出すブロックの順番は、特に sections > main > blocks で定義されてあります。
{
"sections": {
"main": {
"type": "main-article",
"blocks": {
"featured_image": {
"type": "featured_image",
"settings": {
"image_height": "adapt"
}
},
"title": {
"type": "title",
"settings": {
"blog_show_date": true,
"blog_show_author": false
}
},
"content": {
"type": "content",
"settings": {
}
},
"share": {
"type": "share",
"settings": {
"share_label": "この記事をシェアする"
}
}
},
"block_order": [
"featured_image",
"title",
"content",
"share"
],
"settings": {
}
}
},
"order": [
"main"
]
}
実際にarticleページで呼び出されるセクションファイルは、 sections > main > type に”main-article”とあるように、sections/main-article.liquidファイルが出力されることとなります。
セクション(sections): エリア単位で表示させる内容をliquidタグ等を用いて記述
上で説明したlayoutやtemplatesファイルから呼び出される、実際にページにエリアとして出力される内容を保持しているのがセクションファイル(sections)です。
for文などのliquidタグによるロジックや、HTML、エリア内に直接適用させたいCSS, JSONなどを記述していきます。
コーディングの際に最も記述することが多いのはこのセクションファイル(sections)でしょう。
schemaタグ
styleタグ
本セクションファイルのみに適用されるCSSを定義できます。
Shopifyテーマ構造を把握できたら、Dawnテーマのカスタマイズに挑戦
Shopifyテーマ構造の概要・全体を把握できたら、具体的にカスタマイズを行っていきましょう。Shopifyテーマには初期状態のままでは日本の慣習にそぐわないものが多く、Dawnもその1つです。
ShopifyテーマDawnを日本向けにローカライズ(姓名フォーム・抜粋文) の記事で、Dawnテーマを日本向けにローカライズしていく具体的なカスタマイズ方法をご紹介しています。
また、JavaScriptを利用したカスタマイズとして、 Shopifyブログ本文中に吹き出しコメント挿入を実装するカスタマイズ方法 もご紹介しています。こちらも併せてお読みください。
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています。 SEOを意識した制作や、制作後の運用・成果を見据えたWebサイトづくりが得意です。
🍀 Webサイト制作とSEOの専門家 - Marketing Wizard
上リンクには私のプロフィール・実績を掲載しています。ご確認のうえ、お気軽にご相談ください。
Category:
Tags: Shopify
この記事の気になった箇所を読み返す:
- レイアウト→テンプレート→セクション→スニペットの流れを把握する
- レイアウトファイル: 最も基本的なファイル。ページの種類を判別
- テンプレートファイル: 該当ページの雛形となる「枠組み」ファイル
- セクションファイル: 該当テンプレートの「エリア」
- スニペットファイル: 再利用ブロックなどを別に保管しておく「便利な道具箱」
- レイアウト(layout): 基本ファイルから、ふさわしいテンプレートを自動呼で選んで呼び出す
- ページごとにふさわしいテンプレートを呼び出す: {{ content_for_layout }}
- ヘッダー情報を出力: {{ content for header }}
- セクションファイルやスニペットを呼び出すことも可能
- テンプレート(templates): ページを構成するセクションと順序を記述
- 2つのテンプレートファイル方式: .liquidと.json
- JSON形式の場合
- セクション(sections): エリア単位で表示させる内容をliquidタグ等を用いて記述
- schemaタグ
- styleタグ
- Shopifyテーマ構造を把握できたら、Dawnテーマのカスタマイズに挑戦
- 成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています