ShopifyでBlogとNewsをわけてトップページに表示する
フレッシュなうちに備忘録を
💡 解決したこと・やりたいこと
・BlogとNewsでデザインを変えたい
・BlogとNewsを分けてトップページに表示したい
・それぞれ個別ページに関連記事を表示したい
🖥 環境
基本テンプレートDebutでの話をします
・テンプレートはDebut
・サンプルでの分類は日本語ですが英語推奨
👉 BlogとNewsとしてますが、サンプルはニュースとジャーニー
✒️ 基本設定
🔍そもそもの記事の分け方
ブログ記事を追加する> 分類エリア > ブログ
ここでカテゴリに近い考え方の分類をします。
サンプルは日本語でつくっちゃってますが、英単語の方がいいです。
そうすると内部的には、Blog用の記事とNews用の記事と分類されて取り扱われます。
✍️ テンプレートを変更する
テンプレート名↓
📄 section > article.liquid
💪 やること
・それぞれにクラスを振り分ける
・レイアウトをそれぞれ変える
それぞれにクラスを振り分ける
{{blog.handle}}
liquid言語は2重波かっこでhtml内に出力することができます。
基本設定で設定した分類(NewsやBlog)は上の {{blog.handle}}で取得することができます。
これを利用して、classを振り分けます。
具体的には、article.liquidの一番上階層のhtmlを以下のようにclass名のところに{{blog.handle}}を挿入します。(半角スペース忘れずに)
👈 Before
<article class="page-width" aria-labelledby="title-0">
👉 After
<article class="page-width {{ blog.handle }}" aria-labelledby="title-0">
💡 出力結果
きちんと、page-widthに続いて 分類名の "ジャーニー" が出力されました。もちろんニュースの記事だったらここは ”ニュース” が出力されます。
あくまでもサンプルなので、日本語ですが英単語推奨です。
これで、クラス別にそれぞれCSSを書き分けることができます。
✂️ Blog別(ニュース、ブログ)にレイアウトを変更する
たとえば以下のような想定だった場合です
・Blog記事は写真が必要で複雑なレイアウト
・Newsは写真がいらない単純なレイアウト
👉 if文で出しわけ方
{% if == '○○○' %}
ここにレイアウトを挿入
{%- endif -%}
liquidでは簡単にif文を挿入できます。
これを利用して、先のCSSの出しわけと合わせて以下のようなテンプレートに変更します
📄 article.liquid
<article class="page-width {{ blog.handle }}" aria-labelledby="title-0">
{% if blog.handle == 'blog' %}
<div id="blogArticle">
ブログ用のレイアウトいろいろ書く
</div>
{%- endif -%}
{% if blog.handle == 'news' %}
<div id="newsArticle">
ニュース用のレイアウトいろいろ書く
</div>
{%- endif -%}
</article>
これで、基本的にarticle.liquidの話は終わりです。
ちなみに管理画面で書いたBlogは、以下のようなタグで出力可能です。(テンプレートに予め書いてあります)
ブログタイトル : {{ article.title }}
ブログに設定した画像 : {{ article.image}}
本文:{{ article.content }}
日付:{{ article.published_at | date: '%Y.%m.%d' }}
📰 関連記事を表示したい
Shopifyアプリを使います。
Related Blog Postsが無料で使えて便利です。
完成イメージ
設定画面
👂 設定画面で聞かれていることは以下
1️⃣ Number of related posts to display : 何記事表示する?
2️⃣ Display the related posts image: 画像いる?
3️⃣ サイズ?
4️⃣ Source of the excerpt : 概要文どこからもってくる?
5️⃣ How to handle no related posts : 関連なかったらどうする?
(何も出さない?/ ランダムで出しとく?/ メッセージ出す?)
6️⃣ Blogs to display on : どのブログで出す?
7️⃣ Show only the same blog type : 同じ分類のブログだけにする?
(ブログを跨いで表示したいときはNo)
ちなみに、CSSを管理画面からカスタム入力できますが、html内に適当に出力されるだけなので、自分が管理しているCSSファイル内に書きましょう。
その他、コンテンツに使われる画像サイズ、出力するもの titleなのか日付なのか、ようやくなのかは追加されるテンプレートファイルに記述します
snippets > relatedblog.liquid
⚠️⚠️⚠️⚠️⚠️
テンプレートを変更して、また設定画面を触るとテンプレートが上書きされるので注意
⚠️⚠️⚠️⚠️
いま説明のために触ったので書き直します・・・
👨👨👦👦 おまけ: 写真がなかったらNo Photo画像を表示する
写真がなかった場合いわゆる「No Photo」画像を表示させることもできます。こちらもif文で
{% if article.image %} とかくと
「もし、ブログにイメージ画像があったら」という意味の条件になります
{%- else -%} 以降に画像がなかった場合の記述をします
{% if article.image %}
<img src="{{ article.image | img_url: '2000x1248', crop: 'center' }}" alt="{{ article.image.alt }}" class="lazyload"/>
{%- else -%}
<img src="{{ 'noimage.png' | file_img_url: '2000x1248', crop: 'center' }}" alt="" class="lazyload"/>
{% endif %}
noimage.pngをshopify内の「ファイル」にアップロードした場合、
'noimage.png' | file_img_url の書き方で、該当のパスを出力できます。
🖥 トップページに表示させる
テンプレート:index.liquid
<section>
<div>
<h3>BLOG</h3>
<ul>
{% for article in blogs['blog'].articles | limit: 3 %}
<li><a href="{{ article.url }}"><time datetime="{{ article.published_at | date: '%Y.%m.%d' }}">{{ article.published_at | date: '%Y.%m.%d' }}</time>{{article.title}}</a></li>
{% endfor %}
</ul>
</div>
<div>
<h3>NEWS</h3>
<ul>
{% for article in blogs['news'].articles | limit: 3 %}
<li><a href="{{ article.url }}"><time datetime="{{ article.published_at | date: '%Y.%m.%d' }}">{{ article.published_at | date: '%Y.%m.%d' }}</time>{{article.title}}</a></li>
{% endfor %}
</ul>
</div>
</section>
トップページは、for文で表示させます。
blogs['ハンドル名'].articles
の書き方で、それぞれの記事が取得できます。
上の参考は、タイトル、日付、URLを出力する単純な構造です。
カスタマイズしだしたらキリがないShopifyですが、少しでも参考になれば
よければサポートお願いします! いいねも大歓迎!