[Shopify] ブログのアーカイブで特定タグの個数をカウントして表示させる方法

2020年10月2日

先日ブログ記事にサイドバーを設置して、カテゴリ一覧やアーカイブを表示させる方法を書きました。

https://ec-penguin.myshopify.com/blogs/shopify/sidebar-categories-archives

現状ちょっとデザインを当てた（未完成）のでこんな感じになっています。

Shopify ブログ　サイドバー　アーカイブカテゴリ

ただ一般的なアーカイブは、

2020年10月（21）

など21記事なら21という記事数が表示されていると思うのです。

なので、今回はその何記事あるかというのを表示できるように実装を進めていきます。

編集するブログ記事のアーカイブ部分

今回編集するのは先ほどのスクショにもある部分です。具体的なコードはこちら。

<div id="archives-sidebar">
　{% if blog.all_tags.size > 0 %}
　　 
　　<p class="sidebar-title">アーカイブ</p>
　　<ul class="archives-sidebar-box">
　　　{% for tag in blog.all_tags reversed%}
　　　　{% if tag contains "年" and tag contains "月" %}
　　　　　{% if current_tags contains tag %}
　　　　　　<li class="tag-link">
　　　　　　　{{ tag | replace: '年0', '年' }}
　　　　　　　 
　　　　　　</li>
　　　　　{% else %}
　　　　　　<li class="tag-link">
　　　　　　　{{ tag | replace: '年0', '年' | link_to_tag: tag }}
　　　　　　　
　　　　　　</li>
　　　　　{% endif %}
　　　　{% endif %}
　　　{% endfor %}
　　</ul>
　{% endif %}
</div>

この部分を編集していきます。ファイル名で言うと、前回の記事で作ったコードで私と同じファイル名を指定しているのであれば、blog-sidebar.liquidファイルになっています。

アーカイブの記事数をカウントする具体的なコード

それでは具体的なアーカイブのタグ数をカウントするコード（1つ目）です。

{% assign count = 0 %}
{% for article in blogs[blog.handle].articles %}
　{% if article.tags contains tag %}
　　{% capture count %}{{ count | plus: 1 }}{% endcapture %}
　{% endif %}
{% endfor %}

これを一番最初に記載したコードの

の場所に追加します。

処理としては、

count変数を0に設定し、blogs[blog.handle].articlesで全ての記事を拾ってくる。もし、その記事に特定のtagが含まれていたらcount変数に1プラスしていく。という処理になっています。

ただこれだけだと、count変数にタグ数を追加しただけなのでcountの値を出力する必要があります。

追加するのは下記コード（2つ目）です。

({{count}})

これで例えば20記事あれば（20）と表示されます。

見え方はこんな感じになります。

shopify ブログアーカイブ数表示

（6~8月ほぼ記事書いてないのがバレる😱）

というように、ちゃんとブログ書いているか、サボっているかが見える仕様になっておりますのでお気をつけください。。笑

ちなみにアーカイブの各月の前にあるアイコンはsvgで入れてます。

一度整理するために、修正後の全体のコードを貼っておきますね。

<div id="archives-sidebar">
　{% if blog.all_tags.size > 0 %}
　　<p class="sidebar-title">アーカイブ</p>
　　<ul class="archives-sidebar-box">
　　　{% for tag in blog.all_tags reversed%}
　　　　{% assign count = 0 %}
　　　　{% for article in blogs[blog.handle].articles %}
　　　　　{% if article.tags contains tag %}
　　　　　　{% capture count %}{{ count | plus: 1 }}{% endcapture %}
　　　　　{% endif %}
　　　　{% endfor %}
　　　　{% if tag contains "年" and tag contains "月" %}
　　　　　{% if current_tags contains tag %}
　　　　　　<li class="tag-link">
　　　　　　　{{ tag | replace: '年0', '年' }}
　　　　　　　({{count}})
　　　　　　</li>
　　　　　{% else %}
　　　　　　<li class="tag-link">
　　　　　　　{{ tag | replace: '年0', '年' | link_to_tag: tag }}
　　　　　　　({{count}})
　　　　　　</li>
　　　　　{% endif %}
　　　　{% endif %}
　　　{% endfor %}
　　</ul>
　{% endif %}
</div>