Magento2 themeの作成
の編集
https://yassu.jp/pukiwiki/?Magento2+theme%A4%CE%BA%EE%C0%AE
[
トップ
] [
編集
|
差分
|
バックアップ
|
添付
|
リロード
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
-- 雛形とするページ --
(no template pages)
[[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-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <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::THEME, '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-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="header.panel"> <block class="Magento\Framework\View\Element\Html\Links" name="header.links"> <arguments> <argument name="css_class" xsi:type="string">header links</argument> </arguments> </block> </referenceContainer> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/logo.png</argument> <argument name="logo_img_width" xsi:type="number">148</argument> <argument name="logo_img_height" xsi:type="number">43</argument> </arguments> </referenceBlock> <referenceContainer name="footer"> <block class="Magento\Store\Block\Switcher" name="store_switcher" as="store_switcher" after="footer_links" template="switch/stores.phtml"/> </referenceContainer> <referenceBlock name="report.bugs" remove="true"/> <move element="copyright" destination="before.body.end"/> </body> </page> images/ 以下に logo.png を設置します。 *レビューフォームに文言を追加する [#uf6f097d] 以下からテンプレートをコピーしてきます。~ vendor/magento/module-review/view/frontend/templates/form.phtml コピー先は以下。~ app/design/frontend/Yassujp/blank/Magento_Review/templates/form.phtml <div class="block review-add"> <div class="block-title"><strong><?php /* @escapeNotVerified */ echo __('Write Your Own Review') ?></strong></div> <div class="block-content"> <?php if ($block->getAllowWriteReviewFlag()): ?> <!-- 追加ここから --> <p>レビュー投稿お待ちしております。</p> <!-- 追加ここまで --> <form action="<?php /* @escapeNotVerified */ echo $block->getAction() ?>" class="review-form" method="post" id="review-form" data-role="product-review-form" data-bind="scope: 'review-form'"> ... *作成したテーマへ変更する [#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-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd"> <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::THEME, '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-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="header.panel"> <block class="Magento\Framework\View\Element\Html\Links" name="header.links"> <arguments> <argument name="css_class" xsi:type="string">header links</argument> </arguments> </block> </referenceContainer> <referenceBlock name="logo"> <arguments> <argument name="logo_file" xsi:type="string">images/logo.png</argument> <argument name="logo_img_width" xsi:type="number">148</argument> <argument name="logo_img_height" xsi:type="number">43</argument> </arguments> </referenceBlock> <referenceContainer name="footer"> <block class="Magento\Store\Block\Switcher" name="store_switcher" as="store_switcher" after="footer_links" template="switch/stores.phtml"/> </referenceContainer> <referenceBlock name="report.bugs" remove="true"/> <move element="copyright" destination="before.body.end"/> </body> </page> images/ 以下に logo.png を設置します。 *レビューフォームに文言を追加する [#uf6f097d] 以下からテンプレートをコピーしてきます。~ vendor/magento/module-review/view/frontend/templates/form.phtml コピー先は以下。~ app/design/frontend/Yassujp/blank/Magento_Review/templates/form.phtml <div class="block review-add"> <div class="block-title"><strong><?php /* @escapeNotVerified */ echo __('Write Your Own Review') ?></strong></div> <div class="block-content"> <?php if ($block->getAllowWriteReviewFlag()): ?> <!-- 追加ここから --> <p>レビュー投稿お待ちしております。</p> <!-- 追加ここまで --> <form action="<?php /* @escapeNotVerified */ echo $block->getAction() ?>" class="review-form" method="post" id="review-form" data-role="product-review-form" data-bind="scope: 'review-form'"> ... *作成したテーマへ変更する [#c54f8192] 管理画面にて CONTENT - Configuration から Edit をたどり、新しく作成したテーマを選択します。 キャッシュをクリアしてフロント画面にてロゴが変わっていることと、レビュー投稿画面で追加した文言が表示されていることを確認します。
テキスト整形のルールを表示する