CakePHP 4 でテーマを作成して導入する方法

はじめに

CakePHP 4 にはプラグイン機能があり、それを使ってテーマを導入することができます。テーマを使えば簡単にサイトデザインの切り替えが可能になります。

今日は CakePHP 4 で独自テーマを作成して導入する方法をご紹介します。

CakePHP
4.0
XAMPP
7.3.15
目次
  1. テスト用コントローラ作成
  2. テーマ作成
  3. 使用テーマの設定
  4. テーマを設定ファイルで管理
  5. CSSなどのシンボリックリンク/コピーを自動作成
  6. おわりに

1. テスト用コントローラ作成

テストで使うコントローラを用意します。今回は下記内容で作りました。

/src/Controller/SampleController.php
<?php
declare(strict_types=1);

namespace App\Controller;

class SampleController extends AppController
{
  public function index()
  {
    $this->set('msg', 'Hello, World!');
  }
}

余談ですが、CakePHP を使うなら作業効率向上のために Bake コマンドの習得がオススメです。コントローラは下記で作成可能です。 

> cd \path\to\cakephp4
> bin/cake bake controller sample --no-test

2. テーマ作成

今回のテーマ名は「MyTheme」とします。plugins/MyTheme フォルダを作成し、そこにレイアウトテンプレ、ページテンプレ、CSS を追加します。

/plugins/MyTheme/templates/layout/default.php
<html>
<head>
  <title>My Theme</title>
  <?= $this->fetch('css') ?>
</head>
<body>
  <h1>My Theme</h1>
  <?= $this->fetch('content') ?>
</body>
</html>
/plugins/MyTheme/templates/Sample/index.php
<?php $this->Html->css('style', ['block' => true]) ?>
<h2>Sample</h2>
<p><?= $msg ?></p>
/plugins/MyTheme/webroot/css/style.css
p {
  color: #c00;
  font-size: 24px;
}

3. 使用テーマの設定

作成した「MyTheme」を使用するための設定です。２つのファイルに追記しています。

/src/Application.php
public function bootstrap(): void
{
  ...
  // Load more plugins here
  $this->addPlugin('MyTheme'); // ←追加
}
/src/Controller/AppController.php
class AppController extends Controller
{
  ...

  // ↓追加
  public function beforeRender(\Cake\Event\EventInterface $event)
  {
    $this->viewBuilder()->setTheme('MyTheme');
  }

引数の型は CakePHP 3 と異なり EventInterface です。

特定のコントローラのみにテンプレートを適用したい場合は、そのコントローラの beforRender() に setTheme() の１行を追記してください。

これで完了です。/sample にアクセスし、テーマファイルの内容で出力されていることを確認してください。

Themes (CakePHP 4 Cookbook)
https://book.cakephp.org/4/en/views/themes.html

4. テーマを設定ファイルで管理

指定テーマを AppController.php や Application.php に直書きすると保守性がよくないので、設定ファイルでテーマを指定するようにします。

/config/app_local.php
return [
  'theme' => 'MyTheme', // ← 追加
  ...
];
/src/Application.php
// Load more plugins here
$this->addPlugin(Configure::read('theme')); // ← 引数の 'MyTheme' の部分を変更
/src/Controller/AppController.php
<?php
...
use Cake\Core\Configure; // ←無ければ追加
...
public function beforeRender(\Cake\Event\EventInterface $event)
{
    $this->viewBuilder()->setTheme(Configure::read('theme')); // ← 引数の 'MyTheme' の部分を変更
}
app_local.php はバージョン管理に含まれないので、必要に応じて app_local.example.php にも同様の変更を加えてください。
Reading Configuration Data (CakePHP 4 Cookbook)
https://book.cakephp.org/4/en/development/configuration.html#reading-configuration-data

6. おわりに

CakePHP で Web サイトなどを構築する場合には、サイト側のデザイン変更が発生することが予想されます。テンプレートや CSS をまとめてテーマとして実装し、設定ファイルで切替可能にすれば、作業効率が上がります。

その際には、パフォーマンス向上のためにデプロイ時のシンボリックリンク作成も併せて行うといいと思います。