【CakePHP3/element】CakePHP3でelementを使用しheaderを共通化する方法
今回は、CakePHP3系でelementを使用してheaderを共通化する方法を紹介していきます。
1.やりたい事
headerを全てのページに共通で表示する。
2.共通で表示するheaderファイルを作成する
Viewで表示する内容を共通化するためのファイルは、下記elementディレクトリ配下に配置します。
/src/Template/Element/{共通化するファイル}
今回は、全てのページに表示するheaderファイルを作成します。
任意の内容を記述しましょう。
※こちらはAdminLTE3のヘッダー内容を参考に作成しています。
<!-- Navbar --> <nav class="main-header navbar navbar-expand navbar-white navbar-light"> <!-- Left navbar links --> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="index3.html" class="nav-link">Home</a> </li> <li class="nav-item d-none d-sm-inline-block"> <a href="#" class="nav-link">Contact</a> </li> </ul> </nav> <!-- /.navbar -->
3.作成したheaderを共通で表示させるための設定
作成したheaderを共通で表示させる設定を行います。
default.ctpに下記記述を行いましょう。
/src/Template/Layout/default.ctp <body> <!-- こちらを追加 --> <?php echo $this->element('header'); ?> <?= $this->Flash->render() ?> <div class="container clearfix content-wrapper"> <?= $this->fetch('content') ?> </div> <footer> </footer> </body> </html>
これで全ページに作成したheaderを表示することができます。
footerやsidebannerを共通化したいときも、element内にファイルを作成し、default.ctpに追加すれば大丈夫です。
bakeすると、全ctpファイルにサイドバナーが直書きされているので、そちらは消して共通化をしましょう。