ブログをカテゴライズする方法について解説します！！
そもそも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文を使って１つずつ出力します！
一番重要なのは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 }}"こんな使い方もできるよ
タグを複数使ってフィルタリング
２つ以上のタグでフィルタリングしたい場合
タグ名をプラス（+）で繋ぐと複数のタグでもフィルタリングできます
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を使うことになります
ブログをカテゴライズする際は今回のコードを参考にしてもらえると嬉しいです！
最後まで見て頂きありがとうございます！
