コンテンツにスキップ
【厳選】おすすめ Shopifyアプリ
【厳選】おすすめ Shopifyアプリ
Shopifyのブログ記事内にタグ一覧を追加する Tsun Inc.

Shopifyのブログ記事内にタグ一覧を追加する

タグ一覧とは

Shopifyサイトを運用していると様々な場面で「タグ」という単語を耳にすると思います。

本記事での「タグ」は、Shopifyの管理画面にてブログ記事に付けられる「タグ」のことを指します。「タグ一覧」はそのタグをShopifyのブログやブログ記事で一覧表示することを指します。

詳しくは ブログ記事にタグ一覧を出すメリットと表示方法 にまとめてあるので、参考にしてください。

まだShopifyのブログ機能を利用していない方は、下記の記事でShopifyのブログ機能について解説していますので参考にしてください。

Shopifyのブログ機能をフル活用しよう|機能や拡張アプリを紹介

作成したもの

  • Liquidを使ったタグ一覧

前提条件

対象読者

  • Liquidの知識がある (Shopifyテーマのコード編集が必要なため)
  • Shopifyの商品またはブログ記事でタグを利用している

環境

  • Dawn v7.0.0 (テーマに関係なく動作します)

実装

シンプルなコード例

まずはシンプルなコード例です。

ブログ記事テンプレート内で取得できるarticleオブジェクトにはtagsがあり、tagsにはブログ記事のタグが入っています。

それをループで1つずつ link_to_tag フィルターでタグ用のリンクに変換しています。

link_to_tagはタグ用のaタグを自動で生成してくれるフィルターですが、aタグにプロパティを指定したい場合などは下記のように自前でaタグを生成する必要があります。

一部のタグを除外したい場合

一部のタグを除外して表示したい場合、Shopify Liquidで配列から任意の要素を取り除いた配列を生成する を参考に下記のようにします。

まとめ

今回はShopifyのブログ記事内にタグ一覧を追加する方法をご紹介しました。Tsunではタグ一覧をノーコードで導入できるShopifyアプリをリリースしました!

【無料】RuffRuff タグ一覧

「RuffRuff タグ一覧」は2022年12月にリリースしたShopifyサイトにタグ一覧を簡単に表示できるShopifyアプリです。
無料から利用でき、OS2.0対応のShopifyテーマならノーコードで導入可能です。
ブログ記事だけでなく、ブログや商品、コレクションにも付与されているタグデータをタグ一覧として表示できます。
ユーザーの利便性や内部リンクによるSEO対策におすすめです。

 Tsun Inc.ではShopifyを使ったストア構築やアプリ開発を行っています。

もしストア構築やアプリ開発をしたい方は、Tsun Inc.へお問い合わせください。

前の記事 Shopifyのテーマ拡張機能をCI/CDサービスからデプロイする
次の記事 Shopifyのブログ記事内に自動で目次を生成する

Shopify Apps

TECH BLOGS

BLOGS

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

詳しく見る →

掲載情報に関して

掲載している各種情報は、株式会社Tsunが調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。

アプリの比較

{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}

比較する最初のアイテムを選択します

比較する2番目の項目を選択します

比較する3番目の項目を選択

比較