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

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

 

 

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

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 %}
   <!--ここに1つ目のコードが入ります!-->
  <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', '年' }}
        <!--ここに2つ目のコードが入ります!-->
      </li>
     {% else %}
      <li class="tag-link">
       {{ tag | replace: '年0', '年' | link_to_tag: tag }}
        <!--ここに2つ目のコードが入ります!-->
      </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 %}

 

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

   <!--ここに1つ目のコードが入ります!-->

の場所に追加します。

 

処理としては、

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>

 

全体のコードはこのようになっております 。

 

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

 

アーカイブを見に行っても1記事しかないのか。と思ってもらうとユーザーの落胆につながってしまいます。(そもそも記事を書けという話なのですが、、)

しかし、事前にリンク先のアーカイブ数がわかれば、アーカイブス数が多いタグをクリックしてくれるはずです。そして、どれくらいの記事数があるブログなのか、更新頻度はどれくらいなのかも一目瞭然なので、読者にとってはありがたい情報なのかなと思い実装しました。

ただ、、、

ブログをあまり更新していない人やブログをしばらく更新していない人にとっては諸刃の剣となってしまうので、お気を付けくださいませ。(かくいう私も危ういので頑張ってブログ更新していきます。。)

それでは、本日も良い1日を!

関連記事

Contact form

新規ストア構築、開発などのお仕事の依頼・無料相談はこちら