Yii framework で自分だけのテーマ(theme)を作成してみる

Yii framework ではWebアプリケーションの見た目をテーマ（theme）を作ってガラっと変更することができます。　今回はその方法を解説したいと思います。

１．自分用のテーマフォルダを作成する

まずはテーマ関連のファイルをまとめておくためのフォルダを「/themes」直下に作成しましょう。　この時に重要なのがフォルダ名で、ここで決めたフォルダ名がテーマ名になります。

今回は試しに「mytheme」という名前で作成してみます。　すぐに本番で使いたい人は自分のサイト用の独自のテーマ名にしておいてください。

テーマファイルを０から作るのは大変ですから、まずは標準で用意されているテーマフォルダをコピーしちゃいましょう。

標準のテーマは「/protected/views」フォルダです。
すでにこのフォルダをカスタマイズしている人でもそのままコピーしてOKです。

コピーできたら、１で作成しておいたテーマディレクトリ「/themes/mytheme」内にペーストしましょう。

そして最後のステップ。

アプリケーション初期構成ファイル（/protected/config/main.php）にテーマを切り替える旨のプロパティを追加します。

return array(
'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
...
'theme'=>'mytheme',
...
);

たったこれだけ。　これだけで次から「mytheme」内のファイルを編集すれば独自のテーマで表示されるようになりますし、テーマを増やしたければ１～３のステップで新たに作成すればOKです。

さて、独自のテーマを作成した後はやはり独自のCSSファイルや画像をテーマファイルに適用したいもの。

標準ではアプリケーションベースフォルダ直下に「css」「images」フォルダがありますが、テーマの場合はテーマ別に管理したいですよね。

テーマごとにCSSや画像を配置する場合は「/themes/mythme」直下に「css」「img」「js」等のフォルダを作成しましょう。

普通であればこれらのフォルダには全ページで共通のCSSや画像のみを入れておき、viewsフォルダ内の階層化されたそれぞれのディレクトリに個別のCSSや画像を入れたいところなのですが、これは推奨されていません。

というのも、Yiiのドキュメントには以下のように書かれているためです。

注意: views ディレクトリは、セキュリティに関わるデータを含む事が有り得るため、
ウェブユーザからのアクセスを防ぐ様に設定するべきです。

ですから、念の為にviewsディレクトリ直下に「.htaccess」を配置して次のように外部から直接アクセスできないようにしておきましょう。　これで残念ながらviewsディレクトリ内にCSSファイルや画像を配置しても参照することができなくなります。　セキュリティ向上のためです。我慢我慢。

deny from all

階層ごとに個別に適用させたいCSSファイルや画像などは「/themes/mytheme/css」や「/themes/mytheme/img」フォルダに「views」と同じような階層を作って配置するのが良いでしょう。

配置したCSSファイルや画像をテーマファイルから参照する場合はアプリケーションのthemeプロパティからbaseUrlを参照し、CSSや画像フォルダのパスを繋げて参照します。

<link href="<?php echo Yii::app()->theme->baseUrl; ?>/css/screen.css" ... />

<img src="<?php echo Yii::app()->theme->baseUrl; ?>/img/logo.gif" ... />

2014-01-05