Magento2 themeの作成
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
[[Magentoめも]]
*Magento2 themeの作成 [#f0312ccc]
見た目を変更するにはテーマを作成します。
管理画面は app/design/adminhtml 以下に~
フロント画面は app/design/frontend 以下に作成することでテ...
管理画面側のテーマは[[Magento2 管理画面themeの作成]]を参...
*設定ファイルの作成 [#r93bbd04]
app/design/frontend/VendorName/ThemeName/ の構成になりま...
VendorName = Yassujp~
ThemeName = blank とします。
app/design/frontend/Yassujp/blank/theme.xml
parent は引き継ぐテーマを指定~
Magento/blank であれば vendor/magento/theme-frontend-blank/
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-insta...
<title>Yassu Blank</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
app/design/frontend/Yassujp/blank/media/preview.jpg にテ...
app/design/frontend/Yassujp/blank/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THE...
'frontend/Yassujp/blank',
__DIR__
);
*画像の設定 [#e54e916f]
画像についての設定を定義します。
app/design/frontend/Yassujp/blank/etc/view.xml
*静的ファイルを設置するフォルダを作成する [#vd283df1]
cssなどの静的ファイルを置くフォルダを含めた構成は以下のよ...
app/design/frontend/VendorName/
└──ThemeName/
├── etc/
│ └── view.xml
├── media/
│ └── preview.jpg
├── web/
│ ├── css/
│ │ └ source/
│ ├── fonts/
│ ├── images/
│ │ └ logo.png
│ └── js/
├── registration.php
└── theme.xml
*ロゴを変更する [#f8f94f78]
Magento_Theme/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instan...
<body>
<referenceContainer name="header.panel">
<block class="Magento\Framework\View\Element...
<arguments>
<argument name="css_class" xsi:type=...
</arguments>
</block>
</referenceContainer>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="str...
<argument name="logo_img_width" xsi:type...
<argument name="logo_img_height" xsi:typ...
</arguments>
</referenceBlock>
<referenceContainer name="footer">
<block class="Magento\Store\Block\Switcher" ...
</referenceContainer>
<referenceBlock name="report.bugs" remove="true"/>
<move element="copyright" destination="before.bo...
</body>
</page>
images/ 以下に logo.png を設置します。
*レビューフォームに文言を追加する [#uf6f097d]
以下からテンプレートをコピーしてきます。~
vendor/magento/module-review/view/frontend/templates/form...
コピー先は以下。~
app/design/frontend/Yassujp/blank/Magento_Review/template...
<div class="block review-add">
<div class="block-title"><strong><?php /* @escapeNot...
<div class="block-content">
<?php if ($block->getAllowWriteReviewFlag()): ?>
<!-- 追加ここから -->
<p>レビュー投稿お待ちしております。</p>
<!-- 追加ここまで -->
<form action="<?php /* @escapeNotVerified */ echo $block...
...
*作成したテーマへ変更する [#c54f8192]
管理画面にて CONTENT - Configuration から Edit をたどり、...
キャッシュをクリアしてフロント画面にてロゴが変わっている...
終了行:
[[Magentoめも]]
*Magento2 themeの作成 [#f0312ccc]
見た目を変更するにはテーマを作成します。
管理画面は app/design/adminhtml 以下に~
フロント画面は app/design/frontend 以下に作成することでテ...
管理画面側のテーマは[[Magento2 管理画面themeの作成]]を参...
*設定ファイルの作成 [#r93bbd04]
app/design/frontend/VendorName/ThemeName/ の構成になりま...
VendorName = Yassujp~
ThemeName = blank とします。
app/design/frontend/Yassujp/blank/theme.xml
parent は引き継ぐテーマを指定~
Magento/blank であれば vendor/magento/theme-frontend-blank/
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-insta...
<title>Yassu Blank</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
app/design/frontend/Yassujp/blank/media/preview.jpg にテ...
app/design/frontend/Yassujp/blank/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THE...
'frontend/Yassujp/blank',
__DIR__
);
*画像の設定 [#e54e916f]
画像についての設定を定義します。
app/design/frontend/Yassujp/blank/etc/view.xml
*静的ファイルを設置するフォルダを作成する [#vd283df1]
cssなどの静的ファイルを置くフォルダを含めた構成は以下のよ...
app/design/frontend/VendorName/
└──ThemeName/
├── etc/
│ └── view.xml
├── media/
│ └── preview.jpg
├── web/
│ ├── css/
│ │ └ source/
│ ├── fonts/
│ ├── images/
│ │ └ logo.png
│ └── js/
├── registration.php
└── theme.xml
*ロゴを変更する [#f8f94f78]
Magento_Theme/layout/default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instan...
<body>
<referenceContainer name="header.panel">
<block class="Magento\Framework\View\Element...
<arguments>
<argument name="css_class" xsi:type=...
</arguments>
</block>
</referenceContainer>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="str...
<argument name="logo_img_width" xsi:type...
<argument name="logo_img_height" xsi:typ...
</arguments>
</referenceBlock>
<referenceContainer name="footer">
<block class="Magento\Store\Block\Switcher" ...
</referenceContainer>
<referenceBlock name="report.bugs" remove="true"/>
<move element="copyright" destination="before.bo...
</body>
</page>
images/ 以下に logo.png を設置します。
*レビューフォームに文言を追加する [#uf6f097d]
以下からテンプレートをコピーしてきます。~
vendor/magento/module-review/view/frontend/templates/form...
コピー先は以下。~
app/design/frontend/Yassujp/blank/Magento_Review/template...
<div class="block review-add">
<div class="block-title"><strong><?php /* @escapeNot...
<div class="block-content">
<?php if ($block->getAllowWriteReviewFlag()): ?>
<!-- 追加ここから -->
<p>レビュー投稿お待ちしております。</p>
<!-- 追加ここまで -->
<form action="<?php /* @escapeNotVerified */ echo $block...
...
*作成したテーマへ変更する [#c54f8192]
管理画面にて CONTENT - Configuration から Edit をたどり、...
キャッシュをクリアしてフロント画面にてロゴが変わっている...
ページ名: