![見出し画像](https://assets.st-note.com/production/uploads/images/89374240/rectangle_large_type_2_67e175ee58d24dcb3441c092fea583cd.png?width=1200)
[Shopify]ブログ用メタフィールド使って記事一覧にLPと紐づいたバナー設置できるセクション(Dawn)60/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
今日はブログ一覧にPagesで作成したLPを選択してバナーを設置します。
①Pageのメタフィールドでバナー設置機能を追加。
②BlogのメタフィールドでPageのLPを選択するだけで、そのページのメタフィールドで設定したサムネとリンク先を引っ張ってくる
といった動作になります。
対象テーマ:Dawn
✔️今回のゴール
![](https://assets.st-note.com/img/1666229090104-hCSEhFz3qU.png?width=1200)
![](https://assets.st-note.com/img/1666228981134-hdJ7uiWePX.png?width=1200)
PCの場合は横並び3つのバナーを設置する想定で作成してます。
それ以外の数の時は確認していないのでレイアウトは適宜調整が必要になるかもしれません。
◆CMS
![](https://assets.st-note.com/img/1666229210038-QKdCLBvy92.png?width=1200)
今回はCMSで編集できる項目はありません。
セクションを追加するだけの操作になります。
✔️設置手順
Step1 ページのメタフィールドを追加
![](https://assets.st-note.com/img/1666229360020-VvmHkvwzsu.png?width=1200)
![](https://assets.st-note.com/img/1666229393458-NKJnIuwnRV.png?width=1200)
名前:なんでもOK
→私は「ブログ用バナー」にしてみました
ネームスペースとキー:custom.thumbnail
コンテンツタイプ:ファイル
ファイル:画像のみ&1つ
▼生成したこちらの定義は後ほど使用します
page.metafields.custom.thumbnail
Step2 ブログのメタフィールドを追加
※ブログ記事の方ではなくて「ブログ」を選択してください。
![](https://assets.st-note.com/img/1666229373431-tSu85XUIo9.png?width=1200)
![](https://assets.st-note.com/img/1666229387837-kQeQjt9jlR.png?width=1200)
名前:なんでもOK
→私は「バナー選択」にしてみました
ネームスペースとキー:custom.banner
コンテンツタイプ:ページ
選択できるページ数:リストを選択
▼後ほど使用します
blog.metafields.custom.banner
Step3 新しいセクションファイルを作成
管理画面>コード編集>セクション>新規セクションファイル作成
![](https://assets.st-note.com/img/1666229457765-NraLRuvvmh.png)
ファイル名はなんでもOKです
→今回はblog-banners.liquidにしました
下記のコードをコピペ
<div class="blog__lists-banner">
<ul class="blog__lists">
{% for banner in blog.metafields.custom.banner.value %}
<li class="blog__banner">
<a href="{{ banner.url }}">
<img src="{{ banner.metafields.custom.thumbnail | img_url: 'master' }}" loading="lazy" alt="{{ banner.metafields.custom.thumbnail }}">
</a>
</li>
{% endfor %}
</ul>
</div>
{% schema %}
{
"name": "ブログ記事一覧バナー",
"tag": "section",
"presets": [
{
"name": "ブログ記事一覧バナー"
}
]
}
{% endschema %}
ここで一度CMSで挿入してみて正常に動いているのか確認してみます^^
❶まずは、ページの詳細画面に行き、先ほど作成したメタフィールドのバナー設置箇所にサムネを設定します。
![](https://assets.st-note.com/img/1666229749537-wS5SFaes17.png?width=1200)
![](https://assets.st-note.com/img/1666229754025-n9lj38vx7R.png?width=1200)
❷次に、ブログの画面に行き、ブログ管理の画面に遷移し、先ほどブログのメタフィールドで追加した項目が表示されているので、表示させたいページを選択。
![](https://assets.st-note.com/img/1666229783016-mT07aZxuF6.png?width=1200)
![](https://assets.st-note.com/img/1666229820084-C5wcZfpjnk.png?width=1200)
![](https://assets.st-note.com/img/1666229832278-RT2X1dWIZ1.png?width=1200)
上手く反映されましたね!!
あとはレイアウトを調整するだけ♪
✔️コピペで簡単!フルコードはこちら
動画でご紹介していたレイアウトのCSS記入バージョンのフルコードです。
設置位置によってマージン入れたりする必要はあると思いますのでその辺はお好みで調整していただければと思います。
PCの場合は横並び3つのバナーを設置する想定で作成してます。
それ以外の数の時は確認していないのでレイアウトは適宜調整が必要になるかもしれません。
【ご注意】
※返金&サポートはしておりません。
※最新のDawnテーマ対象です。
別テーマでも使用できるかもしれませんが検証はしてません。
※コードのみのご紹介で解説などはしておりません。
※2022.10.20時点のコードです。メンテナンスは今後する予定はありません。
ここから先は
この記事が気に入ったらサポートをしてみませんか?