CakePHPでは、デフォルトのテンプレートが設定されています。
基本的には、このデフォルトのテンプレートのまま使い続ける場合は少ないと思います。
本記事では、このデフォルトのテンプレートを、別のテンプレートに変更する場合の方法を説明いたします。
デフォルトのテンプレート置き場
CakePHPのデフォルトのレイアウトは、下記の場所にあるレイアウトを利用しています。
デフォルトレイアウトのディレクトリ
|
1 2 3 4 5 6 7 8 9 10 11 12 |
./app/src/Template/Layout |--Email | |--html | | |--default.ctp | |--text | | |--default.ctp |--ajax.ctp |--default.ctp |--error.ctp |--rss | |--default.ctp |
テンプレートの変更
レイアウトを変更するには、この場所に新しくレイアウトを作成し、各ファイルからこのレイアウトを指定することにより、変更することができます。
実際に、自分だけのレイアウトを作成してみましょう。
[Template]内の[Layout]フォルダ内に、[sample.ctp]という名前のファイルを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <?= $this->Html->charset() ?> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> <?= $this->fetch('title') ?> </title> <?= $this->Html->meta('icon') ?> <?= $this->Html->css('base.css') ?> <?= $this->Html->css('sample.css') ?> <?= $this->fetch('meta') ?> <?= $this->fetch('css') ?> <?= $this->fetch('script') ?> </head> <body> <div id="header"><?= __($header) ?></div> <?= $this->fetch('content') ?> <div id="footer"><?= __($footer) ?></div> </body> </html> |
下記の場所に、各cssファイルが保存されています。
今回追加するcssファイルも、この場所に保存します。
|
1 2 3 4 |
./app/webroot/css |--base.css |--cake.css |
今回作成するcssファイルは、[sample.css]としています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
sample.css body { margin: 0; } #header { font-size:9px; color:#666666; text-align:center; } #footer { font-size:10px; color:#7777AA; text-align:right; border:1px solid #999999; border-width:1px 0px 0px 0px; margin: 50px 0px 0px 0px; } |
テンプレート変更の実行画面
レイアウト設定
コントローラー全体に設定する場合
|
1 2 3 4 5 |
public function initialize() { parent::initialize(); $this->viewBuilder()->setLayout('simple'); } |
特定のアクションに設定する場合
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ $this->viewBuilder()->setLayout('simple'); if ($this->request->is('post')) { $user = $this->Auth->identify(); if ($user) { $this->Auth->setUser($user); return $this->redirect($this->Auth->redirectUrl()); } $this->Flash->error('ユーザー名またはパスワードが不正です。'); } |
