今回はShopifyで特定のカテゴリーやタグをもったブログ記事のみを表示する方法を紹介します。

特定のカテゴリーをもったブログ記事を表示する方法

'news'というブログカテゴリーの記事のみを表示していきます。

<ul>
  //newsカテゴリーのブログをループで4記事取得
  {% for article in blogs['news'].articles  limit: 4 %}
    <li>
      <a href="{{ article.url }}">
        {% if article.image != blank %}
          //サムネイル画像が登録されていたらサムネイルを表示
          <img src="{{ article.image.src | image_url: width: 600 }}" alt="">
        {% else %}
          //サムネイル画像が登録されていなかったらasset内に格納した'default.jpg'を表示
          <img src="{{ 'default.jpg' | asset_img_url: width: 600 }}" alt="">
        {% endif %}
        <p class="title">
          //ブログのタイトルを表示
          {{ article.title }}
        </p>
        <span class="date">
          //ブログの更新日を表示
          {{ article.updated_at | date: '%Y.%m.%d' }}
        </span>
      </a>
    </li>
  {% endfor %}  
</ul>

セクションでブログのカテゴリーを選択できるようにする

表示するブログのカテゴリーを、コード内ではなく管理画面から動的に変更できるようにするには、以下のコードを追加・修正します。

<ul>
//以下for文を修正(管理画面で選択したカテゴリーのブログをループで4記事取得)
{% for article in section.settings.blog.articles limit: 4 %}
 ~　中略 ~
</ul>

//以下schemaを追加
{% schema %}
{
  "name": "ブログリスト",
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "ブログのカテゴリーを選択"
    }
  ],
  "presets": [
    {
      "name": "ブログリスト"
    }
  ]
}
{% endschema %}

特定のタグをもったブログ記事を表示する方法

先ほどブログリストとして表示した記事を、さらに特定のタグで絞り込みしてみます。
今回は'news'カテゴリーの'sample'というタグをもった記事のみを表示します。

<ul>
  {% for article in blogs['news'].articles %}
    {% for tag in article.tags %}
      //タグが'sample'の記事のみ取得する
      {% if tag == 'sample' %}
        <li>
          <a href="{{ article.url }}">
            {% if article.image != blank %}
              <img src="{{ article.image.src | image_url: width: 600 }}" alt="">
            {% else %}
              <img src="{{ 'default.jpg' | asset_img_url: width: 600 }}" alt="">
            {% endif %}
            <p class="title">
              {{ article.title }}
            </p>
            <span class="date">
              {{ article.updated_at | date: '%Y.%m.%d' }}
            </span>
          </a>
        </li>
      {% endif %}
    {% endfor %}
  {% endfor %}  
</ul>


{% schema %}
{
  "name": "ブログリスト",
  "settings": [
    {
      "type": "blog",
      "id": "blog",
      "label": "ブログのカテゴリーを選択"
    }
  ],
  "presets": [
    {
      "name": "ブログリスト"
    }
  ]
}
{% endschema %}

特定のタグをもった記事を表示する際の注意点

先述したコードでは、'sample'のタグがついたブログ記事を全て表示してしまいます。
タグの絞り込みがない場合は、for文内にlimitを指定して表示数の制限が出来ますが、先ほどのコードにlimitをつけても思うように表示がされません。

なぜかというと、例えば'news'カテゴリーの記事のタグが
1番目に新しい記事：タグなし
2番目に新しい記事：sample
3番目に新しい記事：タグなし
4番目に新しい記事：タグなし
5番目に新しい記事：タグなし
6番目に新しい記事：sample
という構成だったとします。

この内容で以下のコードを実行すると、どのような結果になるでしょうか。

<ul>
  {% for article in blogs['news'].articles limit: 4 %}
    {% for tag in article.tags %}
      {% if tag == 'sample' %}
        ~ 中略 ~
      {% endif %}
    {% endfor %}
  {% endfor %}  
</ul>

~ 以下略 ~

取得できる記事は2番目の1記事のみです。
for文でループを回してからif文でタグがついているかどうかの条件分岐をしているため、for文にlimitをつけてしまうと、「全体の◯記事目までをループする」という意味になってしまいます。
1番目に新しい記事：タグなし
2番目に新しい記事：sample
3番目に新しい記事：タグなし
4番目に新しい記事：タグなし
➖➖➖➖ ﾙｰﾌﾟｺｺﾏﾃﾞ ➖➖➖➖
5番目に新しい記事：タグなし
6番目に新しい記事：sample

特定のタグをもった記事を指定した数表示する方法

少し煩雑ではありますが、以下のコードで特定のタグをもった記事を指定した数のみ表示することが可能です。

<ul>
  //表示する記事数を変数limitに指定
  {% assign limit = 4 %}
  //変数countを定義
  {% assign count = 0%}
  {% for article in blogs['news'].articles %}
    {% for tag in article.tags %}
      //タグが'sample'の記事のみ取得する
      {% if tag == 'sample' %}
        //'sample'のタグがついた記事が取得されるごとにcountの数字を1ずつ足していく
        {% assign count = count | plus: 1 %}
        <li>
          <a href="{{ article.url }}">
            {% if article.image != blank %}
              <img src="{{ article.image.src | image_url: width: 600 }}" alt="">
            {% else %}
              <img src="{{ 'default.jpg' | asset_img_url: width: 600 }}" alt="">
            {% endif %}
            <p class="title">
              {{ article.title }}
            </p>
            <span class="date">
              {{ article.updated_at | date: '%Y.%m.%d' }}
            </span>
          </a>
        </li>
      {% endif %}
    {% endfor %}
    //countの数字がlimit以上になった場合ループを停止
    {% if count >= limit %}
      {% break %}
    {% endif %}
  {% endfor %}  
</ul>

なお、for文のループ回数には制限がありデフォルトの状態ではそれ以上の表示ができません。
回避方法等を以下の記事にまとめているので、併せてご覧ください。

【Shopify】Liquidのfor文は50回しかループできない問題について

まとめ

タグの絞り込みを追加すると途端に煩雑になりますが、構築の際にはよく依頼されるセクションです。
表示記事数を、管理画面から動的に変えられるようにするのもいいかもしれません。
ぜひお試しください。