2011年12月05日 に更新

CakePHP2.0.3でJSファイルやCSSファイルを読み込む

⚠️ この記事は最終更新日から3年以上が経過しています。

CakePHP2で外部JSファイルとCSSファイルをHEADタグ内で読み込む方法です。
CakePHP1.2やCakePHP1.3と多少変わっています。

最初にwebrootフォルダのフォルダにCSSファイルとJSファイルを入れておきます。
/app/webroot/css → CSSファイル
/app/webroot/js → JSファイル

次に、レイアウトファイルのHEADタグ内で$scripts_for_layout変数を出力します。
/app/View/Layouts/default.ctp





<?php echo $title_for_layout; ?>






次にViewファイルの上辺りで以下の内容を記述します。
以下の例ではscript1.jsとscript2.js、import.css、sub.cssが読み込まれます。
読み込みたいファイル名は合わせて修正してください。
(/app/View/ControllerName/action_name.ctp)

Html->script(array('script1', 'script2'), array('inline'=>false)); ?>
Html->css(array('import', 'sub'), false, array('inline'=>false)); ?>

CakePHP1時代と違ってHTMLヘルパーは$this->Htmlのような参照方法になったので注意します。
また、inlineオプションをfalseにすることによってレイアウトファイル側でスクリプトファイルを読み込んでくれます。
Cookbookのcssメソッドの説明scriptメソッドの説明に以下のように書かれています。

scriptメソッド:

Creates link(s) to a javascript file.
If key inline is set to false in $options,
the link tags are added to the $scripts_for_layout variable
which you can print inside the head tag of the document.

Include a script file into the page.
$options['inline'] controls whether or not a script
should be returned inline or added to $scripts_for_layout.
$options['once'] controls, whether or not you want to
include this script once per request or more than once.

cssメソッド:

Creates a link(s) to a CSS style-sheet.
If key ‘inline’ is set to false in $options parameter,
the link tags are added to the $scripts_for_layout variable which you can print inside the head tag of the document.

最後に、こんな感じでHTMLが出力されます。





ViewからLayoutというちょっとトリッキーなデータの受け渡しなので
最初はちょっとだけ戸惑うかもしれないですね。
いちいちレイアウト側に分岐を書かなくていいので便利。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

計算問題(認証) *