Yii 2.0/テーマの変更点

追加された行はこの色です。
削除された行はこの色です。
Yii 2.0/テーマへ行く。
Yii 2.0/テーマの差分を削除
#author("2025-02-16T14:01:02+09:00","default:fujioka","fujioka")
#author("2025-02-16T15:52:30+09:00","default:fujioka","fujioka")
*Yii 2.0/テーマ [#s0ef4e77]
Yii2では、テーマを使用してアプリケーションの外観（ビュー）を簡単にカスタマイズできます。テーマは、デフォルトのビューをオーバーライドする方法を提供し、異なるレイアウトやスタイルを適用するために便利です。

#contents

**概要 [#u14a5882]
***テーマの構成 [#n1a8461b]
Yii2のテーマは主に以下の3つで構成されています：
-レイアウトファイル: views/layouts に配置される。
-ビュー（ページ）ファイル: views ディレクトリ内に配置される。
-アセットファイル: CSS、JavaScript、画像など。
***テーマのディレクトリ構造 [#o3cf7eca]
通常、テーマは @app/themes に配置されます。例えば、以下のような構造です：
 /themes
     /my-theme
         /layouts
             main.php
         /site
             index.php
             about.php
         /assets
             /css
             /js
***テーマの設定 [#ef03263a]
テーマを使用するには、アプリケーション構成ファイル（config/web.php）で設定します。

''例: テーマの設定''
 'components' => [
     'view' => [
         'theme' => [
             'pathMap' => [
                 '@app/views' => '@app/themes/my-theme',
             ],
             'baseUrl' => '@web/themes/my-theme',
         ],
     ],
 ],
-pathMap: デフォルトのビューがテーマディレクトリ内のどのビューで置き換えられるかを指定します。
-baseUrl: アセットファイル（CSS、JSなど）のURLパス。
***テーマでビューをオーバーライドする [#c558914f]
例えば、views/site/index.php をカスタマイズしたい場合、テーマディレクトリに同じ構造を作成します。
 /themes/my-theme/site/index.php
このファイルが優先され、アプリケーションで使用されます。
***アセットバンドルのカスタマイズ [#a4239523]
テーマに合わせて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',
     ];
 }
アセットを登録する際に、このテーマ用アセットバンドルを指定します。
***複数テーマの使用 [#ic8d1e75]
複数テーマを切り替えたい場合は、動的に設定できます。

''例: 動的テーマの切り替え''
 \Yii::$app->view->theme = new \yii\base\Theme([
     'pathMap' => ['@app/views' => '@app/themes/another-theme'],
     'baseUrl' => '@web/themes/another-theme',
 ]);
コントローラやアクションで設定すれば、特定のページのみ異なるテーマを適用できます。
**具体例 [#b1a6ed5c]
現在のヘッダーを左サイドバーに変更する例を具体的に解説します。
***テーマを作成する [#q527d27f]
まず、テーマのディレクトリを作成します。

''ディレクトリ構造''~
以下のように、themes/my-theme を作成します。
 /themes/my-theme
     /layouts
         main.php
     /site
         index.php
     /assets
         /css
             style.css
***テーマの設定 [#t355a26b]
 config/web.php でテーマを設定します。
 'components' => [
     'view' => [
         'theme' => [
             'pathMap' => [
                 '@app/views' => '@app/themes/my-theme',
             ],
             'baseUrl' => '@web/themes/my-theme',
         ],
     ],
 ],

***左サイドバー用のレイアウトを作成 [#bfaf7ee3]
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="<?= Yii::$app->request->baseUrl ?>/themes/my-theme/assets/css/style.css">
     <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() ?>
***CSSを追加 [#i1ebd3d1]
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;
 }
***ビューのオーバーライド [#nd27b22b]
例として、themes/my-theme/site/index.php を作成します。
 <?php
 $this->title = 'ホーム';
 ?>
 <h1>Welcome to My Theme</h1>
 <p>このページでは、テーマでカスタマイズした左サイドバーを確認できます。</p>
***アプリを確認 [#kaba3d23]
アプリケーションをブラウザで開き、左サイドバーが正しく表示されるか確認します。
**参考情報 [#b62d94c3]
-&target_blank(テーマ | Yii 2.0 決定版ガイド,https://www.yiiframework.com/doc/guide/2.0/ja/output-theming);
----
RIGHT:Today : &counter(today); / Yesterday : &counter(yesterday); / Total : &counter(total);
Yii 2.0/テーマ の変更点

Yii 2.0/テーマの変更点
