CakePHP2 でこのアクションのときだけこの CSS を使いたい、という場合の切り替え方法を調べます。

CakePHP でオリジナルのレイアウトを使うための2つの作業 | oki2a24 の続きになります。

レイアウトで別の CSS を設定するのではなく、同じレイアウトを使いつつ、このアクションだけ別の CSS にしたい！というときに使う方法です。

まとめ

•  View/themed/haskapTheme/webroot/css/cake.generic.css という感じで CSS ファイルを置く。 haskapTheme だけ適宜変更。
• コントローラで切り替える。アクションで $ths->theme = “haskapTheme” などと指定すればよい。

前提

• CakePHP 2.1.3 導入済み。
• ドキュメントルート/cake/sample/（ここにCakePHP が入ってます。app ディレクトリとか、.travis.yml ファイルとか。）

ソース

cake/sample/app/View/themed/haskapTheme/webroot/css/cake.generic.css

@charset "utf-8";
body {
	background: #e2e2e2;
	color: #fff;
	margin: 0;
}

#header{
	font-size: 2em;
	font-weight: bold;
	padding: 10px 20px;
}
#content{
	background: #fff;
	color: #333;
	padding: 10px 20px 40px 20px;
}
#footer {
	padding: 6px 10px;
	text-align: right;
}

特にポイントはありません。

cake/sample/app/Controller/HaskapController.php

<?php

class HaskapController extends AppController {

	// コントローラー名
	public $name = 'Haskap';
	// モデルを指定しない
	public $uses = null;

	public function index() {
		$this->theme = "haskapTheme";
	}

}

?>

ポイントは、アクション内で、$this->theme = “haskapTheme”; と指定することで、アクションで表示される CSS が指定したものに変わります。

結果

また、haskapThme といういかにもテーマめいた名前から、試しに hogehoge としてみましたら、ちゃんと動きました。やった！

具体的に変更した箇所は、View/themed フォルダ内のテーマフォルダ名 を hogehoge としたのと、コントローラのアクションで $this->theme に入れる値を hogehoge とした2箇所でした。

でも

やってみてあれ？と思ったことがあります。

コントローラーでたとえば、public $layout = “Haskap”; と指定すると、$layout に設定したレイアウトとその CSS が有効になってしまいました。アクション内で $this->theme に代入した CSS が有効になりません。

$layout を消せば今までどおり、結果の画面になります。なぜ？切変わらなーいです！ナンデ！？