【CakePHP3/element】CakePHP3でelementを使用しheaderを共通化する方法 - 文系Webエンジニアの技術メモとたまに旅のメモ

今回は、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>