LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

LaunchCartでページごとのCSSやJSの読み込みの振り分けを設定する方法

テクニック

LaunchCartでページごとのCSSやJSの読み込みの振り分けを設定する方法

LaunchCart上でページごとにCSSやJSの読み込みを振り分けたい場合があると思います。

読み込みを振り分ける方法として、私が使ったことのある方法をご紹介したいと思います。

ちなみにCSSの読み込みは<head>タグ内にあることが推奨されているので、headタグから読み込みを振り分けることを想定しています。

※以前のHTML5の仕様では<body>内に<style>や<link>を置くことは非推奨でしたが、現行のHTML5の仕様では特に非推奨ではありません(<link>, <style>)。ただ、パフォーマンスやコードの可読性の観点から、以前と同様に<head>内からの読み込みがMDNなどでは勧められています。

※余談ですが、<style>は以前はscoped属性を置くことで<body>に置くことができるというルールがありましたが、現行のHTML5の仕様ではscoped属性が廃止されHTML5.2からは無条件で<body>内に置くことが許容されています。ただ、CSSが読み込まれたタイミングでスタイルが調整されるため、特にファーストビューで表示される要素のスタイルなどは<head>内に置くことが無難なように思われます。

WordPressと違い、LaunchCartには「is_home()」や「is_single()」のような各ページを識別する関数がないため、ちょっとひと工夫が必要です。

  • 各ページのテンプレートから必要なCSSやJSを読み込む
    • <head>タグが各ページのテンプレート内にある場合
    • <head>タグが各ページのテンプレート内にない場合
  • ヘッダーやフッターなど、モジュールテンプレート上で振り分ける
  • 商品ごとに読み込むCSSを設定したい場合

各テンプレートから必要なCSSやJSを読み込む

<head>タグが各ページのテンプレート内にある場合

上記のように、各ページのテンプレート内に<head>がある場合は、直接<link>タグを書き込めるので、おすすめです。

<head>タグが各ページのテンプレート内にない場合

一方上記のように、<head>がモジュールテンプレートのheader内などに内包されていて各ページのテンプレートから直接書き込めない場合もあると思います。

そういった場合、twigの変数で読み込むCSSやJSの情報を<head>を内包するモジュールテンプレートに渡し、モジュールテンプレート内で読み込む処理を行う方法が使えます。

各ページのテンプレートで

<head>を内包するモジュールテンプレート内で

 

ヘッダーやフッターなど、モジュールテンプレート上で振り分ける

複数のテンプレートで共通のCSSを振り分けたい場合などで、直接ページのテンプレートにファイル名やパスなどを書きたくない場合もあると思います(読み込みむファイルやディレクトリが変更になる可能性があるなど)。

そういった場合は、各ページのテンプレート上では変数でフラグだけ設定し、モジュールテンプレート上で読み込みを振り分ける方法が使えます。

各ページのテンプレートで

モジュールテンプレート内で

 

商品ごとに読み込むCSSを設定したい場合

LP付きの商品詳細ページのように、それぞれの商品で個別のレイアウトを設定したい場合など、商品ごとに読み込むCSSを指定したい場合もあるかもしれません。

そういった場合は、商品の拡張フィールドを活用することで、商品ごとに読み込むCSSを設定することができます。

  1. 設定 > 拡張フィールド > 商品拡張フィールド > 新規追加 でCSS、JSというフィールドを追加
  2. <head>を内包するモジュールテンプレート内で以下のコードを記述
  3. 各商品の先程設定した拡張フィールドのに読み込みたいCSSやJSのパスを入力

 

ここでご紹介した方法は一例です。こちらの方法を応用したりしていろいろな方法を試されることをおすすめいたします。

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。