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

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

 

 

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

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

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

(以前やっていたWordpressブログ)

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

 

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

 

 

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

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

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

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

Shopify デフォルト ブログ記事

 

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

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

 

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

 

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

 

<div id="categories-sidebar">
  {% if blog.all_tags.size > 0 %}
     <p>カテゴリ一覧</p>
     <ul class="categories-sidebar-box">
     {% for tag in blog.all_tags %}
         {% if tag contains "テーマ開発" or tag contains "運営" %}
            {% if current_tags contains tag %}
               <li>{{ tag }}</li>
            {% else %}
               <li>{{ tag | link_to_tag: tag }}</li>
            {% endif %}
        {% 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の下に下記コードをコピペしましょう。理屈は同じです。"年"と"月"を持つタグを拾ってきてサイドバーに表示させています。

 

<div id="archives-sidebar">
   {% if blog.all_tags.size > 0 %}
     <p>アーカイブ</p>
     <ul class="archives-sidebar-box">
    {% 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 %}
      {% endif %}
    {% endfor %}
    </ul>
   {% endif %}
</div>

 

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

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

 

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

 

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

 

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

 

以上いかがだったでしょうか。

せっかくブログに遊びにきてくれても、その人が1記事だけで離脱してしまうのは寂しいですよね。せっかくなら何記事かみてもらいたい。。

サイドバーがあると、もしかしたら複数記事をみてくれるきっかけになるかも知れません。あとはランキング記事一覧のサイドバー項目も作りたいな。あとでトライしてみます☺️

それでは本日も良い一日を!

 

関連記事

Contact form

新規ストア構築、開発などのお仕事の依頼・無料相談はこちら