カテゴリー
コンピューター

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 が使用される設定となる。

結果

Haskap.jpg

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

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

コメントを残す