![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Yii2では、テーマを使用してアプリケーションの外観（ビュー）を簡単にカスタマイズできます。テーマは、デフォルトのビューをオーバーライドする方法を提供し、異なるレイアウトやスタイルを適用するために便利です。
Yii2のテーマは主に以下の3つで構成されています：
通常、テーマは @app/themes に配置されます。例えば、以下のような構造です：
/themes
/my-theme
/layouts
main.php
/site
index.php
about.php
/assets
/css
/js
テーマを使用するには、アプリケーション構成ファイル（config/web.php）で設定します。
例: テーマの設定
'components' => [
'view' => [
'theme' => [
'pathMap' => [
'@app/views' => '@app/themes/my-theme',
],
'baseUrl' => '@web/themes/my-theme',
],
],
],
例えば、views/site/index.php をカスタマイズしたい場合、テーマディレクトリに同じ構造を作成します。
/themes/my-theme/site/index.php
このファイルが優先され、アプリケーションで使用されます。
テーマに合わせてCSSやJavaScriptを変更したい場合、AppAsset を拡張または置き換えます。
例: アセットバンドルの変更
namespace app\themes\mytheme\assets;
use yii\web\AssetBundle;
class ThemeAsset extends AssetBundle
{
public $basePath = '@webroot/themes/my-theme/assets';
public $baseUrl = '@web/themes/my-theme/assets';
public $css = [
'css/style.css',
];
public $js = [
'js/script.js',
];
public $depends = [
'app\assets\AppAsset',
];
}
アセットを登録する際に、このテーマ用アセットバンドルを指定します。
複数テーマを切り替えたい場合は、動的に設定できます。
例: 動的テーマの切り替え
\Yii::$app->view->theme = new \yii\base\Theme([
'pathMap' => ['@app/views' => '@app/themes/another-theme'],
'baseUrl' => '@web/themes/another-theme',
]);
コントローラやアクションで設定すれば、特定のページのみ異なるテーマを適用できます。
現在のヘッダーを左サイドバーに変更する例を具体的に解説します。
まず、テーマのディレクトリを作成します。
ディレクトリ構造
以下のように、themes/my-theme を作成します。
/themes/my-theme
/layouts
main.php
/site
index.php
/assets
/css
style.css
config/web.php でテーマを設定します。
'components' => [
'view' => [
'theme' => [
'pathMap' => [
'@app/views' => '@app/themes/my-theme',
],
'baseUrl' => '@web/themes/my-theme',
],
],
],
themes/my-theme/layouts/main.php を作成し、ヘッダーを左サイドバーに移動します。
コード例: main.php
<?php
use yii\helpers\Html;
use app\assets\AppAsset;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
<link rel="stylesheet" href="../themes/my-theme/assets/css/style.css">
</head>
<body>
<?php $this->beginBody() ?>
<div class="container">
<!-- 左サイドバー -->
<div class="sidebar">
<h3>メニュー</h3>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/site/about">About</a></li>
<li><a href="/site/contact">Contact</a></li>
</ul>
</div>
<!-- メインコンテンツ -->
<div class="content">
<?= $content ?>
</div>
</div>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
themes/my-theme/assets/css/style.css を作成し、サイドバーとコンテンツのレイアウトを設定します。
CSS例: style.css
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 250px;
background-color: #333;
color: #fff;
padding: 20px;
box-sizing: border-box;
}
.sidebar h3 {
margin-top: 0;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
margin-bottom: 10px;
}
.sidebar ul li a {
color: #fff;
text-decoration: none;
}
.sidebar ul li a:hover {
text-decoration: underline;
}
.content {
flex: 1;
padding: 20px;
box-sizing: border-box;
}
例として、themes/my-theme/site/index.php を作成します。
<?php $this->title = 'ホーム'; ?> <h1>Welcome to My Theme</h1> <p>このページでは、テーマでカスタマイズした左サイドバーを確認できます。</p>
アプリケーションをブラウザで開き、左サイドバーが正しく表示されるか確認します。
