Shopifyでは１つのサイトの中で複数のブログを作成し、お知らせやスタッフブログ等のタイトルをつけた各ブログに記事を分類して管理することができます。
WordPressのカテゴリーのような機能だと思っていただくと分かりやすいかと思います。
今回はShopifyのテンプレート言語であるLiquidで、「blog」というハンドルを指定したブログの記事一覧を表示してみましょう。
コード
{% paginate blogs.blog.articles by 3 %} <!-- 表示する記事数を指定 -->
{% for article in blogs.blog.articles %} <!-- ループの開始 -->
{{ article.published_at | time_tag: format: 'date' }} <!-- 記事の公開日 -->
<a href="{{ article.url }}">{{ article.title }}</a> <!-- 記事のURL・タイトル -->
{% endfor %}
{% endpaginate %}
ここから１つずつ順を追って解説していきます。
ブログのハンドルを確認する
まず、ブログのハンドルを確認します。
管理画面内にあるブログを編集するというページの１番下の欄で確認できます。
ここでは「blog」と指定しています。
ループで記事を取得する
ループとは繰り返し処理のことです。
以下の構文でblogに分類されている記事を全て取得します。
{% for article in blogs.blog.articles %} <!-- ループの開始 -->
{% endfor %} <!-- ループの終了 -->
１行目のblogs.blog.articlesのblogの部分は先ほど確認したハンドルを記述します。
今回の場合は「blog」となります。
また、最後の{% endfor %} がないとエラーが出るので注意してください。
これだけではまだ何も表示されません。
上記の構文に繰り返す内容を追記しましょう。
記事の公開日とタイトルを表示する
先ほどの構文の中に記事の公開日とURL、タイトルを取得する記述を追記します。
{% for article in blogs.blog.articles %} <!-- ループの開始 -->
{{ article.published_at | time_tag: format: 'date' }} <!-- 記事の公開日 -->
<a href="{{ article.url }}">{{ article.title }}</a> <!-- 記事のURL・タイトル -->
{% endfor %} <!-- ループの開始に戻る -->
追記すると以下のように全ての記事の公開日とタイトルが表示されます。
２行目のtime_tag: format: 'date'の’date’の部分を予め用意されているフォーマットに変更すると他の形式で日付を表示することができます。
フォーマットについてはこちらの記事で紹介されていますので、参考にしてみてください。
ただ、これだけでは記事がある限り永遠にループを繰り返してしまいますので、表示する記事数を制御します。
表示する記事数を制御する
表示する記事数を制御する記述を追記して表示件数を制御します。
{% paginate blogs.blog.articles by 3 %} <!-- 表示する記事数を指定 -->
{% for article in blogs.blog.articles %} <!-- ループの開始 -->
{{ article.published_at | time_tag: format: 'date' }} <!-- 記事の公開日 -->
<a href="{{ article.url }}">{{ article.title }}</a> <!-- 記事のURL・タイトル -->
{% endfor %}
{% endpaginate %}
追記すると以下のように新着順で3件の記事が表示されます。
１行目の最後「by 3」で表示する件数を3件に絞っています。
こちらもfor文と同じで、{% endpaginate %}がないとエラーが出るので注意してください。
ここまででblogというハンドルのブログ記事を取得し、記事の公開日とURL、タイトルを３件分表示させる記述ができあがりました。
HTMLでマークアップする
あとは上記の記述をHTMLでマークアップすれば完成です。
（HTMLのマークアップは一例です。）
{% paginate blogs.blog.articles by 3 %}
{% for article in blogs.blog.articles %}
<article>
{{ article.published_at | time_tag: format: 'date' }}
<h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
</article>
{% endfor %}
{% endpaginate %}
マークアップすることにより、少し見やすくなりました。
さらにCSSで見た目を好きなように変更してみてください。
まとめ
今回紹介したループはブログだけでなく、商品一覧の表示などでも応用ができます。
また、記事の公開日やURL、タイトル以外にもサムネイル画像やタグ、抜粋文などを表示することも可能です。
Shopifyのチートシートでは様々な構文をキーワードから検索することができますので、こちらも参考にしてみてください。