CakePHPの画面レイアウトを変更する

CakePHPで画面を作成する場合、\{CakePHPプロジェクト}\src\Controller\コントローラー名Controller.php\{CakePHPプロジェクト}\src\Template\コントローラー名\アクション名.ctpを作成すると、このようなデフォルトの画面レイアウトで表示されます。

CakePHP デフォルトレイアウト

この画面レイアウトを変更する方法です。

通常の画面レイアウトは、\{CakePHPプロジェクト}\src\Template\Layout\default.ctp\{CakePHPプロジェクト}\webroot\css\base.css\{CakePHPプロジェクト}\webroot\css\style.cssなどが適用されています。
レイアウトのカスタマイズ時はテンプレートファイルスタイルシートを追加します。

コンテンツ部分のビュー

\{CakePHPプロジェクト}\src\Template\Test\index.ctpには以下の内容を記述しています。

<h1>
<?php print($param1); ?>
</h1>

テンプレートファイルの追加

default.ctpを参考に編集すると分かりやすいです。

  1. \{CakePHPプロジェクト}\src\Template\Layout\にテンプレートファイルを追加します
  2. <head>タグ内に追加するCSSのリンクを出力します(任意)
<?= $this->Html->css('追加CSSファイル名') ?>
実際の記述例:拡張子はあっても無くてもOK.
<?= $this->Html->css('new-layout.css') ?>
  1. 独自の画面定義を行います
  2. コンテンツ部分のビュー(\{CakePHPプロジェクト}\src\Template\コントローラー名\アクション名.ctp)を表示したい箇所で下記コードを記述します
<?= $this->fetch('content') ?>

ページタイトルは下記で表示可能です。

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

スタイルシートの追加(任意)

\{CakePHPプロジェクト}\webroot\css\にスタイルシートを追加します

テンプレートファイルの変更

\{CakePHPプロジェクト}\src\Controller\コントローラー名Controller.phpで使用するレイアウトファイルを指定します。

  1. レイアウトを変更したいfunction(アクション名)に以下の記述を追加します
$this->viewBuilder()->setLayout('レイアウトファイル名');
実際の記述例:レイアウトファイル名に拡張子は書かない.
<?php
namespace App\Controller;

class TestController extends AppController
{

    public function index()
    {
        // レイアウトの変更.
        $this->viewBuilder()->setLayout('new-layout');

        $this->set('param1', '2019/01 test.');
    }
}

変更後のサンプル

CakePHP レイアウト変更
new-layout.css
@charset "UTF-8";

html {
    color: #212121;
}

header,
footer {
    display: block;
}

header {
    background-color: #1976D2;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
    color: #FFF;
    height: 50px;
    padding: 0 .5em;
    width: 100%;
}

.container {
    margin: 8px 0;
    display: block;
}

footer {
    background: #1976D2;
    color: #fff;
    clear: both;
    flex: 0 0 auto;
    padding: 5px 0;
    text-align: center;
}
new-layout.ctp
<!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('new-layout.css') ?>

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
</head>
<body>
<header>
    <h1><?= $this->fetch('title') ?></h1>
</header>
<div class="container">
    <?= $this->fetch('content') ?>
</div>
<footer>
    -- footer --.
</footer>
</body>
</html>
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です