特定のページのみコードを適用させる

公開
特定のページのみコードを適用させる


特定のページのみコードを適用させる方法について解説します

例えば、theme.liquidを編集すると全ページにコードが反映されてしまいます

特定のページだけ
「セクションを表示したい」
「cssやjsを当てたい」

そんな時に使えるコードです

ちなみにtheme.liquidだけでなく各セクションなどにも使えます!!

記述するコードはこちら

{%- if template.name == 'page' -%}
    表示させたいものをここに記入
{%- endif -%}
{%- if request.path == 'pathを記入' -%}
    表示させたいものをここに記入
{%- endif -%}

他のやり方もあったりするのですが、
今回はよく使う①と②のコードに絞って解説します!

ショピクラだとこんな使い方

例えば、ショピクラですと下記のような使い方をしています

・サイドバーを特定のページのみ非表示
・ファーストビューの画像バナーをブログ記事のみ非表示

 

TOPなどではサイドバーが表示されていますが、検索ページではサイドバーを非表示にしてます。

トップページにサイドバーを表示

top↑↑

検索ページはサイドバーを非表示

検索ページ↑↑

ブログ記事詳細では画像バナー非表示

記事詳細ページでは画像バナーを非表示に↑↑

 

その他にも

・特定のページのみヘッダーを非表示させたい!
・特定のページのみヘッダーの色を変えたい!
・特定のページのみセクションを表示したい!

こんな感じで使えたりします!

コードの解説

条件分岐(if文)を使い特定のページのみ値を返してくれるようにしています。

①テンプレートで区別(template.name)
②現在のURLで区別

と2つのパターンに分けて解説します。

①テンプレートで区別 {{ template.name }}

テンプレート名"page"のみ表示される
{%- if template.name == 'page' -%}
    表示させたいものをここに記入
{%- endif -%}

template.nameで現在のページのテンプレート名が取得できます。

テンプレート名('page' の部分)については、こちらに各テンプレートの名前(page、articleなど)がありますので該当するテンプレートに合わせてお使いください。

 

後述するrequestオブジェクトの{{ request.page_type }}を使っても同じような制御ができます。

{%- if request.page_type == 'page' -%}
    表示させたいものをここに記入
{%- endif -%}

②現在のURLで区別 {{ request.path }}

"path"が一致する時のみ表示される
{%- if request.path == 'pathを記入' -%}
    表示させたいものをここに記入
{%- endif -%}

requestオブジェクトを使えば現在のURLとそれに関連するページ情報の値が取得できます。

 

{{ request.path }}は現在のURLパスが以下のように取得できます。

・top → /
・商品ページ → /products/商品のhandle
・ブログ → /blogs/ブログのhandle

 

現在のページのpathがわからないって方は下記画像のようにtheme.liquidのbodyタグの下に{{ request.path }}と入力すれば確認できます

{{ request.path }}の記述例

サイトでの見え方

使用するオブジェクト

今回使用しているオブジェクトは以下になります

最後に

特定のページのみにコードを反映させる実装は
割と実務で使うことが多いので参考になると嬉しいです

requestオブジェクトはURLの値が取れるので
if文のcontainsなんかと組み合わせたら色々な実装ができますよー!

블로그로 돌아가기