概要
今回はCakePHP4でのviewの一部分を共通化する方法について解説します。
フロント構築をする際に、ヘッダーやフッター、サイドバーなど、各ページに共通して読み込む要素は、別ファイルに切り分けて読み込むのが一般的です。
例えば、WordPressでは画像のような構成が一般的です。
CakePHPでもこのような構成でサイトを構築することが可能です。
前提
共通部分の描画
共通部分の描画はtemplates/layout/default.phpで行われています。
※templatesディレクトリの構成については下記の記事をご参照ください。
コードの内容
templates/layout/default.php
下記は、初期状態のdefault.phpを一部編集したものです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?php・・・省略<body> //ヘッダーーーーーーーーーーーーーーーーー <header> <p>headerだよ</p> </header> //ヘッダーーーーーーーーーーーーーーーーー <main class="main"> <div class="container"> <?= $this->Flash->render() ?> //コンテンツの読み込み <?= $this->fetch('content') ?> </div> </main> //フッターーーーーーーーーーーーーーーーー <footer> <p>footerだよ</p> </footer> //フッターここまでーーーーーーーーーーーー</body></html> |
ヘッダーやフッターなど、各ページ共通で読み込む内容がここに記載されています。
特に指定をしなければ、各ページに自動で読み込まれます。
ヘッダーやフッターをさらに別のファイル切り分けるには？
概要に記載したwordpressの構成のように、ヘッダーやフッターを別ファイルに切り分けるためにelementを利用します
elementを使って、パーツを作成する
elementを使えば、ヘッダーやフッターのようなパーツを作成することが可能です。
templates/elementディレクトリにheader.phpとfooter.phpを作成しましょう。
templates/element/header.php
1 2 3 | <header> <p>headerだよ</p></header> |
templates/element/footer.php
1 2 3 | <footer> <p>footerだよ</p></footer> |
default.phpから読み込む
先述のdefault.phpにはヘッダーとフッターが直書きされていましたが、これをelementを読み込む形に修正します。
下記のように読み込みます。
1 | <?= $this->element('ファイル名') ?> |
templates/layout/default.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php・・・省略<body> //ヘッダーをelementから読み込むーーーーー <?= $this->element('header') ?> <main class="main"> <div class="container"> <?= $this->Flash->render() ?> //コンテンツの読み込み <?= $this->fetch('content') ?> </div> </main> //フッターをelementから読み込むーーーーーー <?= $this->element('footer') ?></body>・・・省略 |
これでヘッダーとフッダーを別ファイルに切り分ける作業が完了しました。
参考
・CakePHP 4.x Strawberry Cookbook：View
コメント