CakePHPのレイアウトの変更

CakePHPでは、デフォルトのテンプレートが設定されています。
基本的には、このデフォルトのテンプレートのまま使い続ける場合は少ないと思います。

本記事では、このデフォルトのテンプレートを、別のテンプレートに変更する場合の方法を説明いたします。

デフォルトのテンプレート置き場
テンプレートの変更
テンプレート変更の実行画面
レイアウト設定
1. コントローラー全体に設定する場合
2. 特定のアクションに設定する場合

デフォルトのテンプレート置き場

CakePHPのデフォルトのレイアウトは、下記の場所にあるレイアウトを利用しています。
デフォルトレイアウトのディレクトリ

./app/src/Template/Layout
|--Email
|  |--html
|  |  |--default.ctp
|  |--text
|  |  |--default.ctp
|--ajax.ctp
|--default.ctp
|--error.ctp
|--rss
|  |--default.ctp

./app/src/Template/Layout

|--Email

| |--html

| | |--default.ctp

| |--text

| | |--default.ctp

|--ajax.ctp

|--default.ctp

|--error.ctp

|--rss

| |--default.ctp

テンプレートの変更

レイアウトを変更するには、この場所に新しくレイアウトを作成し、各ファイルからこのレイアウトを指定することにより、変更することができます。

実際に、自分だけのレイアウトを作成してみましょう。
[Template]内の[Layout]フォルダ内に、[sample.ctp]という名前のファイルを作成します。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;?= $this-&gt;Html-&gt;charset() ?&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;
        &lt;?= $this-&gt;fetch('title') ?&gt;
    &lt;/title&gt;
    &lt;?= $this-&gt;Html-&gt;meta('icon') ?&gt;

    &lt;?= $this-&gt;Html-&gt;css('base.css') ?&gt;
    &lt;?= $this-&gt;Html-&gt;css('sample.css') ?&gt;

    &lt;?= $this-&gt;fetch('meta') ?&gt;
    &lt;?= $this-&gt;fetch('css') ?&gt;
    &lt;?= $this-&gt;fetch('script') ?&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="header"&gt;&lt;?= __($header) ?&gt;&lt;/div&gt;
    &lt;?= $this-&gt;fetch('content') ?&gt;
    &lt;div id="footer"&gt;&lt;?= __($footer) ?&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<?= $this->Html->charset() ?>

<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>

<?= $this->fetch('content') ?>

</body>

</html>

下記の場所に、各cssファイルが保存されています。
今回追加するcssファイルも、この場所に保存します。

./app/webroot/css
|--base.css
|--cake.css

./app/webroot/css

|--base.css

|--cake.css

今回作成するcssファイルは、[sample.css]としています。

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;
}

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;

}

テンプレート変更の実行画面

レイアウト設定

コントローラー全体に設定する場合

public function initialize()
{
parent::initialize();
$this->viewBuilder()->setLayout('simple');
}

public function initialize()

{

parent::initialize();

$this->viewBuilder()->setLayout('simple');

}

特定のアクションに設定する場合

public function login()
{
$this->viewBuilder()->setLayout('simple');

if ($this->request->is('post')) {
$user = $this->Auth->identify();

if ($user) {
$this-&gt;Auth-&gt;setUser($user);
return $this->redirect($this->Auth->redirectUrl());
}
$this->Flash->error('ユーザー名またはパスワードが不正です。');
}
}