kyo-log

【shopify コピペでOK】トップのブログ記事一覧にタグを表示する方法を解説

ECサイト制作

無料テーマの一つSimpleではトップのブログ記事リストにタグは表示されていません。この記事ではトップのブログ記事リストにタグを表示可能にする方法を解説します。結構簡単なのでぜひチャレンジしてみてください。

目次

カスタマイズ画面に表示切替用チェックボックス設置

sections/featured-blog.liquidに以下のコードを付け足してください。ファイルの下の方に{% schema %}と{% endschema %}で囲まれている部分があります。その中のtypeがcheckboxでidがshow_view_allとなっているデータの終了タグのすぐ下に付け。コード中の矢印と@@@@は書かないでください。

    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": {
        (略)
        "ja": "「すべて表示」ボタンを表示する",
        (略)
      },
      "default": false
    }, ← @@@@ このコンマから @@@@
    {
      "type": "checkbox",
      "id": "blog_show_tag",
      "label": {
        "ja": "タグを表示する"
      },
      "default": false
    } ← @@@@ ここまで @@@@
  ],

うまくいけばこのように”タグを表示する”というチェックボックスが表示されます。

列数や行数とレンジスライダーがありますが、これは独自に付け足したものです。こちらの記事でカスタマイズ方法を解説しています。

チェックの有無によりタグ表示・非表示切り替え

前章ではチェックボックスを付け足しただけで、タグの表示・非表示切り替えはできません。

切り替え可能にするために、snippets/featured-blog.liquidを編集して以下のようにします。20行目～30行目を付け足してください。

<h2 class="h3"><a href="{{ article.url }}">{{ article.title }}</a></h2>
{% if section.settings.blog_show_date %}
  <p class="featured-blog__meta txt--minor">
    <time datetime="{{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' }}">{{ article.published_at | date: format: 'date' }}</time>
  </p>
{% endif %}
{% if section.settings.blog_show_date and section.settings.blog_show_author %}
  <span class="meta__dot txt--minor" aria-hidden="true"></span>
{% endif %}
{% if section.settings.blog_show_author %}
  <p class="featured-blog__meta txt--minor">{{ article.author }}</p>
{% endif %}
{% if section.settings.blog_show_excerpt %}
  <div class="rte rte--indented-images">
    {{ article.excerpt_or_content | strip_html | truncatewords: 30 }}
  </div>
{% endif %}

{% comment %} ここから {% endcomment %}
{% if section.settings.blog_show_tag %}
  {% if article.tags.size > 0 %}
    <ul class="list--inline txt--minor">
      {% for tag in article.tags %}        
        <li>
          <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endif %}
{% comment %} ここまでを付け足す {% endcomment %}

<p class="read-more"><a href="{{ article.url }}">{{ 'blogs.article.read_more' | t }} →</a></p>

うまくいけば”タグを表示する”のチェックの有無により、タグの表示・非表示が切り替わります。

タグを装飾する(おまけ)

タグがコンマ区切りで味気ないので、少しだけ装飾してみます。

先ほどsnippets/featured-blog.liquidに付け加えたコードを少し変更します。タグを句切っているコンマを消去して、タグにcssを適用するためにclassを付け加えます。

{% if section.settings.blog_show_tag %}
  {% if article.tags.size > 0 %}
    <ul class="list--inline txt--minor">
      {% for tag in article.tags %}        
        <li class="tag"> {% comment %} tagというclassを追加{% endcomment %}
          <a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a> {% comment %} コンマ消去 {% endcomment %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endif %}

ここまででcssを適用する準備が出来ました。assets/theme.scss.liquidの最下部に次のコードを付け足すことでタグを装飾します。

.featured-blog__post .tag a {
  display: inline-block;
  padding: 5px;
  border: 1px solid #111;
  border-radius: 3px;
}

cssでうまく装飾できればこのようになります。

注意

編集を行う前にオリジナルのテスト記事をいくつか加えておく必要があります。

ECサイト制作の最新記事4件