Shopifyブログ記事にカテゴリやアーカイブなどのサイドバーを作成する方法

2020年9月30日

今回はブログ記事にカテゴリやアーカイブといった通常サイドバーにあたる部分を作成していきます。

実際Shopifyデフォルト機能では、カテゴリ一覧やアーカイブといった部分が用意されていません。しかし、ブログをやる以上、サイドバー部分がないのは不便だなぁと思ってしまったので今回サイドバーを実装する方法をまとめていきます。多少HTML, CSSわかるよ！くらいの方を想定して紹介します。

ちなみに、実装したいイメージはこんな感じです！

（以前やっていたWordpressブログ）

Shopify Wordpress ブログ　カテゴリアーカイブ

この記事で、右のアーカイブとカテゴリーの部分ができる想定です。それでは早速はじめていきましょう。

Shopifyの構造上、カテゴリが用意されていない

まず前提として、Shopifyのブログはカテゴリー自体が用意されていません。

なので、"タグ"を使用してブログカテゴリー、そして、アーカイブを作成していきます。

ちなみに作成前のShopifyブログ記事はこんな感じ。

Shopify デフォルト　ブログ記事

真ん中に記事があり、両サイドは空白ですね。特別なテーマを使用していない限り、このような構造になっているのはないでしょうか。

それを現在のような右にサイドバーを持つ構造（スマホであれば下）にしていくのが今回の目標です。

ブログ記事の横にカテゴリ一覧を表示する

新規blog-sidebarセクションを作成する

{% if blog.all_tags.size > 0 %}

<p>カテゴリ一覧</p>

{% for tag in blog.all_tags %}

{% if tag contains "テーマ開発" or tag contains "運営" %}

{% if current_tags contains tag %}

{% else %}

{% endif %}

{% endfor %}

</ul>

{% endif %}

</div>

これを新規セクションにコピペします。

今回は、"テーマ開発"と"運営"のみ表示したかったので、タグを記述の2タグのみで絞っています。この後のアーカイブでもタグを使用するので、全タグ表示にしてしまうと不必要なタグも含まれてしまうため、絞ることにしました。

このセクションを保存します。ファイル名はなんでも大丈夫です。blog-sidebar.liquidとして保存しました。

あとは、サイドバーを表示したい箇所に下記コードを挿入すればサイドバーが表示されるはずです。（Shopifyのデフォルトdebutテーマの場合はtemplates/article.liquidに追記しましょう！）

{% section 'blog-sidebar' %}

デザインを当てていないので、見栄えはよくないですが、これでブログのサイドバーができました。

Shopify Blog sidebar 実装

Shopifyブログのアーカイブを作成します

次にShopifyブログ記事横のサイドバーにアーカイブを作成していきます。

もう一度イメージはこんな感じです。

Shopify Blog サイドバー　アーカイブ

こちらもタグ付けが必要ですので、"2020年09月"というように"〇〇年〇月"というタグを各記事につけていくことになります。

注意: 9月→09月など0を付けないと、並べ替えでうまくできないので、必ず一桁月は0を付けましょう。

各ブログ記事にタグをつけ終わったら、先ほど作成したblog-sidebar.liquidの下に下記コードをコピペしましょう。理屈は同じです。"年"と"月"を持つタグを拾ってきてサイドバーに表示させています。

{% if blog.all_tags.size > 0 %}

<p>アーカイブ</p>

{% for tag in blog.all_tags reversed %}

{% if tag contains "年" and tag contains "月" %}

{% if current_tags contains tag %}

<li>{{ tag | replace: '年0', '年' }}</li>

{% else %}

<li>{{ tag | replace: '年0', '年' | link_to_tag: tag }}</li>

{% endif %}

{% endfor %}

</ul>

{% endif %}

</div>

これでアーカイブが作成されました！（1記事しかタグ付けしていないから、1つしか項目ありません。。）

見え方はこんな感じになります！

Shopify サイドバー　アーカイブ　見え方　追加

どちらにせよデザイン調整は必要ですね。（おそらくこの記事をみてくださっている頃には、EC-PENGUINサイトの右側のサイドバーも結構デザイン調整されているのではないでしょうか笑）