テーマ

テーマにはページの見た目を簡単に素早く切り替えられるようになるという利点があります。

テーマを使うためには、コントローラの中でテーマ名を指定して下さい。

class ExampleController extends AppController
{
    public $theme = 'Example';
}

Changed in version 2.1

バージョン 2.1 より前では、 $this->viewClass = 'Theme' という設定が必要でした。 2.1 ではこの設定は不要になり、通常の View クラスがテーマをサポートします。

またテーマの設定や変更はアクション、または beforeFilter や beforeRender などのコールバック関数の中から行えます。

$this->theme = 'AnotherExample';

テーマのビューファイルは templates/Themed/ フォルダに配置する必要があります。 Themed フォルダの中にテーマ名のフォルダを作成して下さい。上記の例でいうと、テーマは templates/Themed/AnotherExample に配置するかたちになります。 従来の app/ レイアウトでは、テーマは app/View/Themed/ に置きます。

NOTE

これは大事なことなのですが、CakePHP は CamelCase のテーマ名を期待しているということを 覚えておいてください。

さらに、 templates/Themed/Example/ 以下は templates/ と全く同じ構造にして下さい。

例えば、Posts コントローラの edit アクションのためのビューファイルは templates/Themed/Example/Posts/edit.ctp となります。また、レイアウトファイルは templates/Themed/Example/Layouts/ に配置されます。

ビューファイルがテーマに見つからない時、CakePHP は templates/ フォルダの中を探します。 これによって、マスタービューファイルを作成して、テーマフォルダには上書きが必要なファイルだけを 配置すればよくなります。

テーマアセット

テーマにはビューファイルのように静的なアセットを含めることができます。テーマは webroot ディレクトリにあるアセットをいくつでも必要なだけ読み込めます。その結果、テーマの パッケージングと配布は簡単になっています。開発中であってもテーマのアセットへのリクエストは Dispatcher によってハンドリングされます。プロダクション環境での パフォーマンスを改善するためには、テーマのアセットをアプリケーションの webroot ディレクトリにコピーするかシンボリックリンクを貼ることをお勧めします。 詳しくは以下を参照して下さい。

新しいテーマの webroot を使うには:

templates/Themed/<themeName>/webroot<path_to_file>

のようなディレクトリをテーマの中に作成して下さい。ディスパッチャはビューパスから 正しいテーマのアセットの検索をハンドリングします。

CakePHP のすべての組み込みヘルパーはテーマに対応しており、自動的に正しいパスが作成されます。 ビューファイルのようにテーマフォルダにファイルが無い場合、メインの webroot フォルダが デフォルトととなります。

// 'purple_cupcake'という名前のテーマの時
$this->Html->css('main.css');

// パスの作成は以下の通り
/theme/purple_cupcake/css/main.css

// リンク
templates/Themed/PurpleCupcake/webroot/css/main.css

プラグインとテーマアセットのパフォーマンスを改善する

PHP を通してアセットを提供すると PHP を通さずにアセットを提供した場合より確実に 遅くなることはよく知られています。コアチームは出来るだけ速いプラグインとテーマのアセットを 提供しようとコツコツと努力を重ねていますが、より高い性能が必要とされる状況はあるかもしれません。 そのような状況では、シンボリックリンクを張るかプラグインとテーマのアセットを CakePHP によって使われている webroot のパスに一致するディレクトリに コピーすることが推奨されます。

• plugins/DebugKit/webroot/js/my_file.js は webroot/debug_kit/js/my_file.js になります。
• templates/Themed/Navy/webroot/css/navy.css は webroot/theme/Navy/css/navy.css になります。