Shopifyのブログ記事セクションにタグを表示させる

公開
ブログセクションにタグを表示させる。コンテンツの整理やサイト内の回遊性を高めよう。

RiseテーマやDawnテーマなど、Shopifyの無料テーマにデフォルトで搭載されている「ブログ記事」セクションでは、通常タグが表示されません。この記事では、コード編集によってタグを表示させる方法を解説します。

今回はRiseテーマ15.0.0を元に解説してます（2024/07/21現在の最新バージョン）

デフォルトのブログ記事セクション

デフォルトのブログ記事セクション

編集するファイル

編集するファイルは snippetsフォルダ内の article-card.liquidファイルになります

タグを表示させるコード

日付の下にタグを表示させるために、130行目あたりに以下のコードを追記します

<div class="article-tags">
  {% for tag in article.tags %}
    <span class="badge">{{ tag }}</span>
  {% endfor %}
</div>

この位置になります

コードを追記する位置

カスタマイズ後のセクション

カスタマイズ後のブログ記事セクション

タグにリンクを付ける（オプション）

タグをクリックしてフィルタリングされたブログ一覧を表示させたい場合は、以下のコードを使用します

<div class="c_article__tags">
  {% for tag in article.tags %}
    <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="badge">
      {{ tag }}
    </a>
  {% endfor %}
</div>
<style>
  .c_article__tags {
    position: relative;
    z-index: 1;
  }
  .c_article__tags a {
    text-decoration: none;
  }
</style>

まとめ

  • Shopifyの「ブログ記事」セクションにタグを表示させるには、article-card.liquidファイルを編集します。
  • シンプルな表示だけでなく、タグにリンクを付けてフィルタリング機能を追加することも可能です。
  • 適切なスタイリングを行うことで、デザイン面でも統一感のあるタグ表示が実現できます。

このタグ表示機能の実装は、ブログコンテンツの整理を効率化し、ユーザー体験を大幅に改善します。タグを戦略的に活用することで、より魅力的で使いやすいブログセクションを作り上げることができるでしょう。読者の関心を引き、サイト内の回遊性を高める強力なツールとして、ぜひタグ機能を取り入れてみてください。

関連記事

Shopifyのブログ機能をさらに活用したい方は、以下の記事もご覧ください

この記事では、Shopifyのブログでタグを使ってカテゴリー分類を行う方法について詳しく解説しています。
ブログの整理と読者のナビゲーション改善に役立つ情報が満載です。

Back to blog