ブログをカテゴライズする方法について解説します!!
そもそもShopifyのブログにはカテゴリーの概念がなく階層分けすることができません。
じゃあどうやってカテゴリー分けするかというと。。
タグ(tag)を使ってカテゴリー分けします!!
タグ(tag)を使えばブログ一覧のフィルタリングができ、分類がで可能です!
今回はブログのタグを使ったカテゴライズについて解説してます!
Dawn(ver12.0.0)だとデフォルトのブログ記事一覧ページは以下のような表示になっています
今回のコードを記述することで以下のようにカテゴリーで分類することが可能になります!!
カテゴリー(タグ)を表示させるコード
早速ですが今回のコードはこちらです
<div class="blog-tag__container page-width">
<ul class="blog-tag__lists">
{% for tag in blog.all_tags %}
<li class="blog-tag__list">
<a class="blog-tag__link" href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
</div>
<style>
.blog-tag__container {
margin-top: 32px;
margin-bottom: 32px;
}
.blog-tag__lists {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.blog-tag__list {
list-style: none;
}
.blog-tag__link {
display: inline-block;
color: currentColor;
text-decoration: none;
border: 1px solid currentColor;
padding: 2px 16px;
transition: opacity .3s ease;
}
@media (hover: hover) {
.blog-tag__link:hover {
opacity: .65;
}
}
</style>
main-blog.liquidの19行目に貼り付けると表示されます
コードの解説
{% for tag in blog.all_tags %}
<li class="blog-tag__list">
<a class="blog-tag__link" href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>
</li>
{% endfor %}
blog.all_tagsはブログの全ての記事のタグを出力してくれます!
そのままだと全てのタグが同時に出力されてしまうのでfor文を使って1つずつ出力します!
一番重要なのはaタグのhref属性に以下のURLをつけることです!
「記事一覧のURL+tagged+タグ名」
href="{{ blog.url }}/tagged/{{ tag | handle }}"
を入れてあげることでタグでフィルタリングされたブログページに遷移します!
注意点
blog.tagsに注意
blog.tagsでも全てのタグを取得できそうですが微妙に違います。
フィルターされた状態で表示されている記事分しか参照しないのでtaggedやpagenationを使う場合は注意してください!
URLに注目してもらえれるとわかるのですが
以下のようにフィルタリングした状態だとblog.tagsではタグを全て取得できていません
handleフィルターはつけよう
タグ名にスペースや特殊な文字があるとうまく動かないのでhandleフィルターをつけてあげましょう!
href="{{ blog.url }}/tagged/{{ tag | handle }}"
こんな使い方もできるよ
タグを複数使ってフィルタリング
2つ以上のタグでフィルタリングしたい場合
タグ名をプラス(+)で繋ぐと複数のタグでもフィルタリングできます
tagged/タグ名+タグ名
https://store.machitake.com/blogs/shopify/tagged/Javascript+liquid
特定のタグのみ出力
接頭をつけるとタグの中でも更にカテゴライズできます
if文を使うことで特定のタグのみ出力できます
以下のコードはcategoryを持ったタグのみ出力できます
{% for tag in blog.all_tags %}
{% if tag contains 'category' %}
<li class="blog-tag__list">
<a class="blog-tag__link" href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>
</li>
{% endif %}
{% endfor %}
「category_」が付いてるとイマイチなのでsplitフィルターを使って削除します
{% for tag in blog.all_tags %}
{% if tag contains 'category' %}
<li class="blog-tag__list">
<a class="blog-tag__link" href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag | split: '_' | last }}</a>
</li>
{% endif %}
{% endfor %}
category_だったりdate_など
はじめにルールを決めてあげることで更に細かくカテゴリー分けができます
まとめ
Shopifyでは
オンラインストア → ブログ記事 → ブログを管理する
でブログを分けることはできるのですが
liquidで記事を取得する際ブログ単位でしが取得ができないので
ブログを跨いでの記事の取得ができません。(カテゴリーのALLが使えなかったブログを跨いでのカテゴライズができない)
ブログも商品のall_productsみたいなオブジェクトがあればいいのですが現状ありません
ですので今回のようにtaggedを使うことになります
ブログをカテゴライズする際は今回のコードを参考にしてもらえると嬉しいです!
最後まで見て頂きありがとうございます!