CakePHPのCSS、JS、image等のデフォルトパスを変更する。

CakePHPのlayoutファイルを作成時にハマったので記事にしておきます。

CakePHPのデザインはLayoutで変更しますが、切り替え方がwebroot/cssに上書きなどの
方法が記述されています。

ですが上書きしてしまうと後々面倒なことになったりデザインを戻すときに大変だったり・・・と
手間がかかってしまうのでデフォルトパスを変更するやり方を調べてみました。

今回はBootstrapのテーマUmiを使って説明します。
https://nkmr6194.github.io/Umi/

ダウンロードしてファイルを解凍したらumiと言うフォルダがあるので
webroot/にumiフォルダをコピーします。

これで、フォルダ階層は下記の通り

webroot/umi/csswebroot/umi/js

になりました。

最初、私は下記のような記述で逃げていましたが

echo $this -> Html -> css('../umi/bootstrap.css');

HTMLが

<link rel="stylesheet" type="text/css" href="css/../umi/css/bootstrap.css">

となり、動作はしていますが気持ちが悪い感が残ってしまいました。

そこで調べてみた結果

define('CSS', WWW_ROOT . 'css' . DS); // 2.4から非推奨define('CSS_URL', 'css/'); // 2.4から非推奨。App.cssBaseUrlを使用define('IMAGES', WWW_ROOT . 'img' . DS); // 2.4から非推奨define('IMAGES_URL', 'img/'); // 2.4から非推奨。App.imageBaseUrlを使用define('JS', WWW_ROOT . 'js' . DS); // 2.4から非推奨define('JS_URL', 'js/'); // 2.4から非推奨。App.jsBaseUrlを使用

ってのが出てきて非推奨って・・・

けど、新しい手がかりが!!
App.cssBaseUrlを使えばいいんだ!!

ってことで検索するも使い方がイマイチわからない・・・

頑張って調べた結果!!見つけました!!

Configure::write('App.imageBaseUrl', 'img/');Configure::write('App.cssBaseUrl', 'umi/css/');Configure::write('App.jsBaseUrl', 'umi/js/');

上記の記述をlayoutフォルダのlayoutファイル、今回渡しの場合はbootstrap.ctpの一番最初に記述すればそのテーマファイルをumiフォルダのCSSとJSを見に行ってくれます。
(imageは当方のフォルダ構成の都合上imgにしていますが任意の場所でOKです。)