#04 Shopifyでヘッダー（ナビゲーションバー）をデザインする

WEB-YoNet｜Shopifyでオリジナルテーマ制作

2021年10月7日 09:46

この記事を読むことでオリジナルデザインのヘッダー部分のデザインの概要を学ぶことができます。

ヘッダーのナビゲーション部分は管理画面から編集ができる

まず、Shopifyのヘッダーのナビゲーション部分は管理画面から編集が可能な部分です。

左側のナビゲーションエリアのメニュー（赤枠①）をクリックすると
「メインメニュー（赤枠②）」が表示されます。

管理画面からナビゲーションのメニューにどのメニューを追加するかを設定することができます。

メインメニュー

ヘッダー部分のLiquidのコードについて

ヘッダーのナビゲーションのデザインをします。
Shopifyのテーマの「layout」フォルダの「theme.liquid」を開きます。

{% for link in linklists.main-menu.links %}
   {% assign child_list_handle = link.title | handleize %}
       {% if linklists[child_list_handle].links != blank %}
           <a href="{{ link.url }}">{{ link.title }}</a>
           [{% for childlink in linklists[child_list_handle].links %}
               <a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
           {% endfor %}]
       {% else %}
           <a href="{{ link.url }}">{{ link.title }}</a>
       {% endif %}
{% endfor %}

はい、いきなりハードルが高いですね。
1つずつみていきましょう。

{% for link in linklists.main-menu.links %}
　処理内容
{% endfor %}

◆for in 繰り返し
{% for オブジェクト in 条件 %}
　処理内容
{% endfor %}

{% for オブジェクト in 条件 %}は繰り返し処理です。
”条件にマッチすると処理内容を繰り返し実行する”ということになります。
{% endfor %}で処理内容の繰り返しを抜けることができます。

{% for link in linklists.main-menu.links %}
　処理内容
{% endfor %}

for link in
for ～ in に囲まれた link　これは何か？
どうやらlinkオブジェクトみたいです。
https://shopify.dev/api/liquid/objects/link

ここがproductのときある。
その場合はproductオブジェクトになる。
https://shopify.dev/api/liquid/objects/product

次は条件をみていきます。

{% for link in linklists.main-menu.links %}
　処理内容
{% endfor %}

linklists.main-menu.links

linklists　これは何か？
これもオブジェクトです。
https://shopify.dev/api/liquid/objects/linklist

linklists.main-menu.links
https://shopify.dev/api/liquid/objects/linklist#linklist-links

main-menu はShopifyの管理画面で設定できるナビゲーションのメニューのことを指しています。

for の繰り返し処理に当てはめると、
「main-menuのリンクを1つずつ取り出すよ」ということになります。

そもそもオブジェクトとは何か？
オブジェクトは箱によく例えられます。箱の中にはデータがたくさんあり、オブジェクトを「.」でつなぐことにより、箱の中にあるデータを取り出すイメージです。
例えば、productオブジェクトには商品名などが入っています。商品名を取り出すのに「product.title」と記述します。
https://shopify.dev/api/liquid/objects/product#product-title

オブジェクトについてはイチ役さんの記事が参考になります！

オブジェクトの種類については@eijiSaitoさんの記事が参考になります！

{% assign child_list_handle = link.title | handleize %}

{% assign child_list_handle %}
assign　は変数を定義する意味です。
「child_list_handle」という変数を定義しています。
※変数を定義すると、変数の中身を初期化することになる

assign child_list_handle = link.title | handleize
変数「child_list_handle」に「link.title | handleize」の内容を入れる

{% assign child_list_handle = link.title | handleize %}

link.title | handleize　とは何か？
linkはオブジェクトで
link.titleはリンクオブジェクトからタイトルを取得する
https://shopify.dev/api/liquid/objects/link#link-title

| handleize　とは何か？
| はフィルターです。
フィルターを使う目的は、オブジェクトの中身を出力するときに
フィルターの条件を通した内容を出力することができる
　
linkオブジェクトにはハンドル属性がないので、
ハンドルフィルター（ | handleize）を使用しています。

（例）link.title | handleize　の事例
　　　link.titleが「About us」だった場合
「About us」はハンドルフィルター「| handleize」を通るので、
「about-us」になります。

ハンドルフィルター「| handleize」の効果は、
・スペースをハイフン「-」に変換
・全ての文字を小文字にする「About」→「about」

次に以下のを1つずつ見ていきましょう。

◆if条件分岐
{% if linklists[child_list_handle].links != blank %}
　処理内容A
{% else %}
　処理内容B
{% endif %}

もし条件に合うなら処理内容Aを実行する
それ以外の場合は処理内容Bを実行する

◆条件内容
{% if linklists[child_list_handle].links != blank %}
　処理内容A
{% else %}
　処理内容B
{% endif %}

linklists[child_list_handle].links != blank
①　　　②　　　　　　　③　　④⑤
①linklists　はオブジェクト
②[child_list_handle] は上で定義した変数・中身は「link.title | handleize」
③.links　オブジェクトのリンクを取得

①②③で
サブメニューのリンク　ということになり

――
④!=　同じでない
⑤blank　空白である

④⑤で
!= blank　空白ではない　ということになり

★まとめ
もしサブメニューのリンクが空白でなければ
つまり日本語にすると
もしサブメニューがあれば処理内容Aと実行する
それ以外の場合、処理内容Bを実行する

☆サブメニューがあるかどうか判定することが目的

次はサブメニューがあればドロップダウンで表示するためのコードを見ていきましょう。（太字部分）

{% if linklists[child_list_handle].links != blank %}
<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}

◆サブメニューがあればドロップダウンで表示するためのコード

<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
　<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]

※サブメニューのリンクがあればサブメニューのリンクを表示する

| escape　エスケイプフィルターの役割
HTML上で、>や、"、などの特殊文字を表示するための処理です。
例えば、<は、<に変換されます。
https://qiita.com/eijiSaito/items/b4a1675ec196546aa4f2#escape

※サブメニューがない場合は
<a href="{{ link.url }}">{{ link.title }}</a>
※リンクタイトルとURLを出力する

AGATA CODEさんの記事が参考になります！

{% if shop.customer_accounts_enabled %}
   {% if customer %}
       <a href="/account">account</a>
       {{ 'log out'  | customer_logout_link }}
   {% else %}
       {{ 'log in ' | customer_login_link }}
       {{ 'register' | customer_register_link }}
   {% endif %}
{% endif %}

{% if shop.customer_accounts_enabled %}
処理内容A
{% else %}
処理内容B
{% endif %}

shop.customer_accounts_enabled　とは？

shop　はオブジェクト
customer_accounts_enabled　shopオブジェクトのデータを取り出してる
customer_accounts_enabled　は何か？
↓
顧客アカウントが有効 → 会員がログインしている状態

ログインしている人は処理内容A
ログインしていない人は処理内容B

― ログインページへのリンク（customer_accounts_enabled解説）
https://shopify.dev/themes/architecture/templates/customers-login#link-to-the-login-page

★まとめ
会員ログインしている人には
「アカウント情報編集ページへのリンク」と
「ログアウトリンク」を表示する
会員ログインしていない人には
「ログインページへのリンク」と「会員登録ページへのリンク」を表示する

{% if customer %}
もし会員なら

<a href="/account">account</a>
アカウント情報編集ページへのリンクが表示される

{{ 'log out' | customer_logout_link }}
ログアウト

―URLフィルター　文字付きリンクが生成される
| customer_logout_link

この場合「ログアウト」という
ログアウトするためのリンク付きテキストが表示される

{{ 'log in ' | customer_login_link }}
ログインページへのリンクが表示される

{{ 'register' | customer_register_link }}
会員登録ページへのリンクが表示される

Bootstrapでナビゲーションを作る

Bootstrapのサイトでコンポーネントとして用意されているコードを使います。左側のメニューから「Components」から「Navbar」を選択し、ページ内の「Nav」の見出しのコードをコピーします。

headerをセクションとして登録する

「sections」フォルダに「header.liquid」を新規作成します。

Shopifyテーマキットでは「sections」フォルダが用意されていないので、
新規作成します。

「sections」フォルダに「header.liquid」にBootstrapのサイトからコピーしたコードをペーストします。

次に「layout」フォルダの「theme.liquid」を開き、以下のコードを切り取りします。


{% for link in linklists.main-menu.links %}
   {% assign child_list_handle = link.title | handleize %}
       {% if linklists[child_list_handle].links != blank %}
           <a href="{{ link.url }}">{{ link.title }}</a>
           [{% for childlink in linklists[child_list_handle].links %}
               <a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
           {% endfor %}]
       {% else %}
           <a href="{{ link.url }}">{{ link.title }}</a>
       {% endif %}
{% endfor %}

<a href="/carts">carts</a>

{% if shop.customer_accounts_enabled %}
   {% if customer %}
       <a href="/account">account</a>
       {{ 'log out'  | customer_logout_link }}
   {% else %}
       {{ 'log in ' | customer_login_link }}
       {{ 'register' | customer_register_link }}
   {% endif %}
{% endif %}

「sections」フォルダの「header.liquid」にペーストします。
先程ペーストした、BootstrapのHTMLコードの上にペーストします。

新規作成したセクション「header.liquid」を「theme.liquid」に読み込む

「layout」フォルダの「theme.liquid」を開きます。元々ナビゲーションの記述があった場所にセクション「header.liquid」を読み込むコードを記述します。

{% section 'header' %}

「sections」フォルダにある「header.liquid」が読み込めます。

「header.liquid」の編集

BootstrapのHTMLコードにLiquidのコードを融合させます。この編集作業はHTMLとCSSの知識がある方ならできると思います。
編集前のコードは以下の通りです。
（ざっと流して見るくらいでOKです）

{% for link in linklists.main-menu.links %}
   {% assign child_list_handle = link.title | handleize %}
       {% if linklists[child_list_handle].links != blank %}
           <a href="{{ link.url }}">{{ link.title }}</a>
           [{% for childlink in linklists[child_list_handle].links %}
               <a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
           {% endfor %}]
       {% else %}
           <a href="{{ link.url }}">{{ link.title }}</a>
       {% endif %}
{% endfor %}

<a href="/cart">carts</a>

{% if shop.customer_accounts_enabled %}
   {% if customer %}
       <a href="/account">account</a>
       {{ 'log out'  | customer_logout_link }}
   {% else %}
       {{ 'log in ' | customer_login_link }}
       {{ 'register' | customer_register_link }}
   {% endif %}
{% endif %}

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav">
         <li class="nav-item">
           <a class="nav-link active" aria-current="page" href="#">Home</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Features</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item">
           <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
         </li>
       </ul>
     </div>
   </div>
 </nav>

Bootstrapのナビゲーションメニューは以下の太字のHTMLコードで
挟んであげると機能しそうです。

◆修正前<li class="nav-item">
　<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>

まずは、以下のコードをBootstrapのナビゲーションの最後のメニューとして記述したいので、

◆修正前<a href="/cart">carts</a>

をメニューの最後の箇所に記述します。

◆修正後
<li class="nav-item">
　<a class="nav-link" href="/cart">carts</a>
</li>

※<a class="nav-link">がないと、横並びの文字のスペースがなくなるので、
　どのリンクにも追加します。

次にLiquidの記述をBootstrapのメニューの箇所に融合させていきます。

◆修正前
<ul class="navbar-nav">
　<li class="nav-item">
　　<a class="nav-link active" aria-current="page" href="#">Home</a>
　</li>
　<li class="nav-item">
　　<a class="nav-link" href="#">Features</a>
　</li>
　<li class="nav-item">
　　<a class="nav-link" href="#">Pricing</a>
　</li>
　<li class="nav-item">
　　<a class="nav-link" href="/cart">carts</a>
　</li>
</ul>

Bootstrapのナビゲーションメニューを作成するには以下のコードにすればうまく機能します。次にLiquidに記載されているHTMLを編集しますが、このコードの形にすれば、うまくいきます。

◆Bootstrapのメニューのコード
<li class="nav-item">
　<a class="nav-link" href="▲▲▲">■■■</a>
</li>

以下のLiquidのHTMLの箇所を編集していきます。

{% for link in linklists.main-menu.links %}
   {% assign child_list_handle = link.title | handleize %}
       {% if linklists[child_list_handle].links != blank %}
           <a href="{{ link.url }}">{{ link.title }}</a>
           [{% for childlink in linklists[child_list_handle].links %}
               <a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
           {% endfor %}]
       {% else %}
           <a href="{{ link.url }}">{{ link.title }}</a>
       {% endif %}
{% endfor %}

Bootstrapのコードを削除し、LiquidのコードをBootstrapのコードを削除した場所にコピー＆ペーストします。

◆修正前
<ul class="navbar-nav">
　<li class="nav-item">
　　<a class="nav-link active" aria-current="page" href="#">Home</a>
　</li>
　<li class="nav-item">
　　<a class="nav-link" href="#">Features</a>
　</li>
　<li class="nav-item">
　　<a class="nav-link" href="#">Pricing</a>
　</li>
　<li class="nav-item">
　　<a class="nav-link" href="/cart">carts</a>
　</li>
</ul>

◆修正後
<ul class="navbar-nav">

※※ここにLiquidのコードを追加します※※
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<a href="{{ link.url }}">{{ link.title }}</a>
[{% for childlink in linklists[child_list_handle].links %}
<a href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
{% endfor %}]
{% else %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endif %}
{% endfor %}
※※※※※※※※※※※※※※※※※※※※※※

　<li class="nav-item">
　　<a class="nav-link" href="/cart">carts</a>
　</li>
</ul>

Liquidのコードを編集します。

LiquidのHTMLコードの編集手順
①<a>タグがある場所を<li class="nav-item"></li>で挟む
②<a>タグに class="nav-link"を追記する　

◆編集後
<ul class="navbar-nav">

{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="nav-item">
<a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
</li>
[{% for childlink in linklists[child_list_handle].links %}
<li class="nav-item">
<a class="nav-link" href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
</li>
{% endfor %}]
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endif %}
{% endfor %}

<li class="nav-item">
<a class="nav-link" href="/cart">carts</a>
</li>
</ul>

最後に「header.liquid」の一番上にあったLiquidのコードを</nav>タグの下に移動して終わりです。

{% if shop.customer_accounts_enabled %}
   {% if customer %}
       <a href="/account">account</a>
       {{ 'log out'  | customer_logout_link }}
   {% else %}
       {{ 'log in ' | customer_login_link }}
       {{ 'register' | customer_register_link }}
   {% endif %}
{% endif %}

最後に今回編集した「header.liquid」の全コードを記述しています。
（どこか不具合があれば申し訳ないです）

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav">
        
           {% for link in linklists.main-menu.links %}
           {% assign child_list_handle = link.title | handleize %}
               {% if linklists[child_list_handle].links != blank %}
                   <li class="nav-item">
                       <a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
                   </li>
                   [{% for childlink in linklists[child_list_handle].links %}
                       <li class="nav-item">
                           <a class="nav-link" href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
                       </li>
                   {% endfor %}]
               {% else %}
                   <li class="nav-item">
                        <a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
                   </li>
               {% endif %}
          {% endfor %}
      
         <li class="nav-item">
           <a class="nav-link" href="/cart">carts</a>
         </li>
       </ul>
     </div>
   </div>
 </nav>


 {% if shop.customer_accounts_enabled %}
   {% if customer %}
       <a href="/account">account</a>
       {{ 'log out'  | customer_logout_link }}
   {% else %}
       {{ 'log in ' | customer_login_link }}
       {{ 'register' | customer_register_link }}
   {% endif %}
{% endif %}

この記事が気に入ったらサポートをしてみませんか？