[Shopify] API でパンくずリストを無料で作成する

shopofy breadcrumbs

 

こんにちは、ECペンギンです。

今回はSEO的にも非常に重要な『パンくずリスト』の作り方を解説していきます。ざっと調べてみるとパンくずリストを作成するShopify Appがあったりしたのですが、有料で使いにくそうというのが正直な感想でした。

 

またShopify APIを使ったものでも英語ソースしか見当たらなかったので日本語で解説する記事を書いていきます。

 

おそらくこの記事にたどり着いた人は『パンくずリスト』がどんなものなのかを、すでに理解していると思うので、説明は省きます。

ただShopify関係の英語ソース記事を探す際に役立つ知識として一つ挙げると、『パンくずリスト』は英語で『Breadcrumb navigation』と訳せます。

 

それでは早速、パンくずリストの作り方。

 

STEP1. まずパンくず用のSnippetを作成する

 

まずは、breadcrumb.liquidというsnippetを作成します。

Shopifyの管理画面からは

テーマ→アクション→コードを編集→ Snippetフォルダに移動→Add a new snippet→breadcrumbs(全て小文字)で作成

shopify パンくずリスト 作成 snippets[参照] 公式Shopify API

 

これで、snippetが作成できました。Atomなど自分のエディター上で編集している方はsnippetフォルダの中にbreadcrumbs.liquidファイルを作成してください。

 

STEP2. 作成したbreadcrumbs.liquidファイルを編集

 

次にパンくずリストの内容を記述していきます。

コードはコピペでOKです。



{% unless template == 'index' or template == 'cart' or template == 'list-collections' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="/" title="Home">Home</a>

  {% if template contains 'page' %}
    <span aria-hidden="true">›</span>
    <span>{{ page.title }}</span>

  {% elsif template contains 'product' %}
    {% if collection.url %}
      <span aria-hidden="true">›</span>
      {{ collection.title | link_to: collection.url }}
    {% endif %}
    <span aria-hidden="true">›</span>
    <span>{{ product.title }}</span>

  {% elsif template contains 'collection' and collection.handle %}
    <span aria-hidden="true">›</span>
    {% if current_tags %}
      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
      {{ collection.title | link_to: url }}
      <span aria-hidden="true">›</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
      <span>{{ collection.title }}</span>
    {% endif %}

  {% elsif template == 'blog' %}
    <span aria-hidden="true">›</span>
    {% if current_tags %}
      {{ blog.title | link_to: blog.url }}
      <span aria-hidden="true">›</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
    <span>{{ blog.title }}</span>
    {% endif %}

  {% elsif template == 'article' %}
    <span aria-hidden="true">›</span>
    {{ blog.title | link_to: blog.url }}
    <span aria-hidden="true">›</span>
    <span>{{ article.title }}</span>

  {% else %}
   <span aria-hidden="true">›</span>
   <span>{{ page_title }}</span>
  {% endif %}
</nav>
{% endunless %}

 

ちなみに上記コードは、page, product, collection, blog, articleのページによって表示されるパンくずリストが異なります。基本的には編集不要です。

 

STEP3. パンくずリストを表示したいページにコードを挿入

 

ここまでくればもう簡単です。

パンくずリストを入れたい場所に下記コードをコピペするだけ。


{% render 'breadcrumbs' %}

 

例えば、productページに表示させたい際は、product-template.liquidなどに上記コードをいれるとパンくずリストが表示されるはずです。

 

調べてみると有料のAppを使わなくてもShopify APIなどで対応できるものも結構あるものですね。

ちなみに今回参考にした、Shopify APIの公式ソースはこちら
https://shopify.dev/tutorials/customize-theme-add-breadcrumbs