Yii 2.0/テーマ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
*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]
テーマを使用するには、アプリケーション構成ファイル（confi...
''例: テーマの設定''
'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-t...
'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, i...
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
<link rel="stylesheet" href="../themes/my-theme/asse...
</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>このページでは、テーマでカスタマイズした左サイドバー...
***アプリを確認 [#kaba3d23]
アプリケーションをブラウザで開き、左サイドバーが正しく表...
**参考情報 [#b62d94c3]
-&target_blank(テーマ | Yii 2.0 決定版ガイド,https://www....
----
RIGHT:Today : &counter(today); / Yesterday : &counter(yes...
終了行:
*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]
テーマを使用するには、アプリケーション構成ファイル（confi...
''例: テーマの設定''
'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-t...
'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, i...
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
<link rel="stylesheet" href="../themes/my-theme/asse...
</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>このページでは、テーマでカスタマイズした左サイドバー...
***アプリを確認 [#kaba3d23]
アプリケーションをブラウザで開き、左サイドバーが正しく表...
**参考情報 [#b62d94c3]
-&target_blank(テーマ | Yii 2.0 決定版ガイド,https://www....
----
RIGHT:Today : &counter(today); / Yesterday : &counter(yes...
ページ名:
1
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
