CakePHP2 でオリジナルのレイアウトを使うための2つの作業

CakePHP のアクション内でビューのレンダーとレイアウトのオンオフが可能なんですねっ！ | oki2a24 の続きです。

まとめ

app/webroot/css/ に CSS を入れる。名前は、cake.XXX.css という感じで。
app/View/Layouts/ にレイアウトファイルを入れる。
レイアウトファイルで CSS を、コントローラーでレイアウトを指定する。

前提

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

ソース

ソース一覧

cake/sample/app/webroot/css/cake.haskap.css
cake/sample/app/View/Layouts/haskap.ctp
cake/sample/app/Controller/HaskapController.php

ソースの中身です。

ebroot/css/cake.haskap.css

@charset "utf-8";
body {
	background: #514583;
	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;
}

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

cake/sample/app/View/Layouts/haskap.ctp

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
	<?php echo $this->Html->charset(); ?>
	<title>
		<?php echo $title_for_layout; ?>
	</title>
	<?php
		echo $this->Html->css('cake.haskap');
		echo $scripts_for_layout;
	?>
</head>
<body>
	<div id="container">
		<div id="header">★★　ヘッダー！　★★</div>
		<div id="content">
			<?php echo $content_for_layout; ?>
		</div>
		<div id="footer">★★　フッター！　★★</div>
	</div>
</body>
</html>

ポイントは次の2点だと思います。

$this->Html->css(‘cake.haskap‘) で CSS を指定する。拡張子は付けにない。cake.haskap で app/webroot/css/cake.haskap.css が指定される。
$content_for_layout でビューの内容を読み込む。

cake/sample/app/Controller/HaskapController.php

<?php

class HaskapController extends AppController {

	// コントローラー名
	public $name = 'Haskap';
	// モデルを指定しない
	public $uses = null;
	// レイアウトとして使用するものを指定。Layouts フォルダの、haskap.ctp を使う。
	public $layout = "Haskap";

	public function index() {
	}

}

?>

ポイントは次だと思います。

public $layout でレイアウトを指定する。Haskap で app/View/Layouts/haskap.ctp が使用される設定となる。

結果

無事オリジナルの CSS とレイアウトが適用されました。

まとめ

前提

ソース

結果

関連

「CakePHP2 でオリジナルのレイアウトを使うための2つの作業」への1件の返信

コメントを残すコメントをキャンセル