CakePHP 3 でテンプレートだけで構成された「テーマ」を簡単実装

はじめに

CakePHP 3 にはプラグイン機能が実装されており、それを用いてテーマ機能を使うことができます。

テーマ（プラグイン）は bake コマンドで作成できますが、テンプレート以外にも様々なファイルが生成されます。最初にそれを見ると、敷居が高く感じるかもしれません。

テーマ (CakePHP 3 Cookbook)
https://book.cakephp.org/3/ja/views/themes.html
Bake を使ってプラグインを作成 (CakePHP 3 Cookbook)
https://book.cakephp.org/3/ja/plugins.html#bake

しかし、テーマをテンプレートだけで構成する場合はもっと少ないファイルで実装可能です。そして、下記 Cookbook にある composer.json への記述も不要です。

プラグインクラスを手動で自動読み込み (CakePHP 3 Cookbook)
https://book.cakephp.org/3/ja/plugins.html#autoloading-plugin-classes

今日はシンプルなテンプレートだけのテーマを簡単に実装する方法をご紹介します。

使用した CakePHP は 3.8.5 です。

目次
  1. テーマのファイルを作成
  2. Application.php でプラグイン読込み
  3. AppController でテーマ指定
  4. 動作確認
  5. CSS など webroot にあるファイル読込の挙動
  6. おわりに

1. テーマのファイルを作成

今回は「MyTheme」という名前でテーマを作ります。そして Sample コントローラに index アクションがあるとします。

下記のように plugins フォルダの中に各ファイルを配置します。 

cakephp3/
  ├ src
  │ └ Controller
  │    └ SampleController.php
  │
  └ plugins/
     └ MyTheme/
        ├ src/
        │ └ Template
        │    ├ Layout
        │    │ └ default.ctp
        │    └ Sample
        │       └ index.ctp
        │
        └ webroot/
           └ css/
              └ style.css

Layout / default.ctp では <head> 内に下記を記述し style.css を読み込んでください。

/plugins/MyTheme/src/Template/Layout/default.ctp
<?= $this->Html->css(['style']); ?>

2. Application.php でプラグイン読込み

Application.php の bootstrap() に、下記１行を追加します。どこに追加しても動くのですが、コメント「Load more plugins here」の下部がいいでしょう。

/src/Application.php
public function bootstrap()
{
  ～～～ 省略 ～～～

  // Load more plugins here
  $this->addPlugin('MyTheme'); // ← これを追加
}

3. AppController でテーマ指定

AppController.php の beforeRender() に下記1行を追加します。beforeRender() がなければ、下記を参考に作ってください。

/src/Controller/AppController.php
<?php
namespace App\Controller;

use Cake\Controller\Controller;
use Cake\Event\Event; // ← もしなければ追加

class AppController extends Controller
{
  ～～～ 省略 ～～～

    public function beforeRender(Event $event)
    {
        $this->viewBuilder()->setTheme('MyTheme'); // ←これを追加
    }
}

もし任意のコントローラだけでテーマを使いたい場合は、そのコントローラの beforeRender() に上記コードを追加してください

4. 動作確認

以上で設定は完了です。

ブラウザで /sample にアクセスして、テーマが適用されているか確認してください。

5. CSS など webroot にあるファイル読込の挙動

MyTheme の Layout/default.ctp に記述した
$this->Html->css(['style']);
の結果を見ると、下記のようになっていると思います。 

<link rel="stylesheet" href="/my_theme/css/style.css">

このように、MyTheme の webroot にある各ファイルは /my_theme/～ でアクセスすることができます。

たとえば /plugins/MyTheme/webroot/images/sample.jpg にあるファイルは、
/my_theme/images/sample.jpg で表示できます。

また、MyTheme のテンプレートに記述した
$this->Html->css()
の挙動は、まず
/plugins/MyTheme/webroot/css
の中に指定ファイルがあるかを探し、もしなければ
/webroot/css
内の当該ファイルを指すURLに変わります。

試しに style.css を /webroot/css/style.css に移動したり、削除したりしてみてください。
$this->Html->css(['style']); の結果が下記のように変わるはずです。 

<link rel="stylesheet" href="/css/style.css">

6. おわりに

テーマ機能を使うと、サイトのデザインを簡単に切り替えることができます。
デザインリニューアルはもちろん、 A/Bテストなどにも活用できるのかなと思います。

テーマやプラグインの実装と聞くと、覚えることが多そう、レベルが高そうと感じる場合もあるかもしれません。しかし上述の通り、テンプレートファイルだけであれば、簡単に追加と削除ができますので、まずは軽い気持ちで試してみてください。