Як створити тему для дитини в Magento 2


18

Я хочу змінити певні аспекти випущеної теми Luma, але я хотів би це зробити, зберігаючи оригінальний файл (и), а також гарантуючи, що кожного разу, коли я оновлюю Magento, я також зберігаю свої зміни.

Я хочу це зробити за допомогою Дитячої теми.

Чи підтримує Magento 2 дочірні теми, і якщо так, то як я структурую шлях до каталогу, щоб це відбулося?


1
Я вдячний, що ви задали це запитання. Мені було цікаво те саме!
camdixon

Відповіді:


26

Дозволяє нам створити дочірню тему, щоб усі наші спеціальні теми в Magento 2 перейшли сюди:

додаток / дизайн / frontend / ім'я компанії / тема_назви

Припустимо, назва нашої компанії - моя компанія, а назва нашої теми - основна. Нам потрібно створити таку структуру каталогів для нашої теми:

app
└────design
     └──────frontend
            └──mycompany
               └───basic
                   └──etc
                   └──Magento_Theme
                          └─layout
                                default.xml
                   └──media
                          preview.png
                   └──web
                     └─css
                     └─fonts
                     └─images
                     └─js
                    theme.xml
                    registration.php

моя компанія :-

Назва тематичного пакету

основні: - Назва теми. У папці mycompany ми можемо мати кілька найменувань тем.

тощо / view.xml: -

Цей файл використовується для визначення розмірів зображення продукту, ескізів тощо.

Magento_Theme: - Цей каталог використовується для заміни існуючих файлів тем Magento.

Magento_Theme / layout / default.xml: - За замовчуванням Magento2 припускає, що файл логотипу вашої теми повинен бути: /web/media/logo.svg Якщо ви хочете якийсь інший файл для логотипу, ви повинні оголосити його у default.xmlфайлі.

Цей файл також використовується для зміни параметрів теми за замовчуванням.

media / preview.png: - Попередній перегляд поточної теми.

web: - Цей каталог містить всі статичні дані теми, такі як зображення, стилі, javascript, шрифти тощо.

registration.php: - Цей файл необхідний для реєстрації нашої теми в системі Magento2.

theme.xml: - Це обов'язковий файл, який визначає назву теми, її батьківський та необов'язково попередній образ теми.

Створення файлів тем

Давайте тепер створимо наші файли по черзі.

theme.xml (додаток / дизайн / frontend / mycompany / basic / theme.xml)

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
   <title>Basic</title> <!-- your theme's name -->
   <parent>Magento/blank</parent> <!-- the parent theme -->
   <media>
        <preview_image>media/preview.jpg</preview_image> <!-- theme's preview image -->
   </media>
</theme>

registration.php (додаток / дизайн / frontend / mycompany / basic / registration.php)

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/mycompany/basic',
    __DIR__
);

default.xml (додаток / дизайн / frontend / mycompany / basic / Magento_Theme / layout / default.xml)

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="logo">
           <arguments>
              <argument name="logo_file" xsi:type="string">images/my_logo.png</argument>
              <argument name="logo_img_width" xsi:type="number">200</argument>
              <argument name="logo_img_height" xsi:type="number">200</argument>
           </arguments>
        </referenceBlock>
    </body>
</page>

На даний момент наша тема готова. Очистіть кеш, і тепер ми виберемо нову тему від адміністратора.

Тепер увійдіть до адміністратора та перейдіть до наступного шляху:

Content -> Design -> Themes

Ви повинні побачити свою тему в списку.

Тепер перейдіть до:

Stores -> Configuration -> Design

Виберіть Головний веб-сайт перед переглядом магазину вгорі зліва. Тепер натисніть

Desgin -> Design Theme

Зніміть прапорець Поставте прапорець За замовчуванням і виберіть свою тему. Клацніть Зберегти конфігурацію, очистіть кеш і ваша нова тема готова. Перевірте свою домашню сторінку.

Детальніше дивіться тут.


Дякуємо за обширний покроковий посібник @Arunendra. Я спробую це спробувати незабаром і відправлю назад.
Х. Ферренс

Це чудово @Arunendra. Працювали чудово. Просто потрібно дотримуватися його повністю, не пропускаючи жодних кроків.
Х. Ферренс

1
Чудовий крок за кроком @Arunendra. На всякий випадок, якщо хтось зіткнеться з тими ж проблемами, що і я, місце розташування, де ви застосовуєте зареєстровану тему, змінилося з Design -> Design Themeна Content/Design/Configuration.
Kedmasterk

Важлива примітка: файл media/preview.pngповинен існувати, інакше Magento видасть виняток.
Салман фон Аббас

5

Створення каталогів:

Перейдіть на корінь до кореневого каталогу та перейдіть до app / design / frontend , створіть демонстраційний каталог .

Тепер створіть каталог Mytheme в додатку / дизайні / frontend / Demo.

Створіть каталог Mangento_Theme в додатку / дизайні / frontend / Demo / Mytheme.

Створіть каталог макетів у програмі / дизайн / frontend / Demo / Mytheme / Magento_Theme.

Створіть медіа- каталог у програмі / дизайні / фронтені / Демо / Мітемі.

Створіть веб- каталог у програмі / design / frontend / Demo / Mytheme.

Створіть каталог зображень у додатку / дизайн / frontend / Demo / Mytheme / web.

Декларація теми

Створіть файл topic.xml у програмі / design / frontend / Demo / Mytheme та вставте у нього такий код:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Mytheme</title>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

Реєстрація теми

Тепер створіть файл registration.php в додатку / дизайні / frontend / Demo / Mytheme та вставте в нього наступний код:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME, 'frontend/Demo/Mytheme', __DIR__
);

Завантажити попереднє зображення теми

Перейдіть у додаток / дизайн / frontend / Demo / Mytheme / media та завантажте тут своє попереднє зображення (preview.jpg).

Декларація логотипу теми

Перейдіть у додаток / дизайн / frontend / Demo / Mytheme / Magento_Theme / layout та створіть файл default.xml. Вставте в нього такий код:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/mytheme-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">200</argument>
<argument name="logo_img_height" xsi:type="number">200</argument>
</arguments>
</referenceBlock>
</body>
</page>

Завантажити логотип теми

Перейдіть у додаток / дизайн / frontend / Demo / Mytheme / web / images та завантажте тут свій логотип (mytheme-logo.png).

Застосуйте свою тему

  • Відкрийте панель адміністратора Magento 2 та перейдіть до Зміст → Конфігурація.

  • Клацніть на опцію Редагувати.

  • Виберіть Mytheme у спадному меню застосованої теми та натисніть кнопку
    Зберегти конфігурацію.

Виконайте команди

Відкрийте SSH-термінал і перейдіть до кореневого каталогу вашого Magento 2. Тепер виконайте всі ці команди по черзі:

rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/*
php bin/magento setup:upgrade
php bin/magento setup:db-schema:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento indexer:reindex
php bin/magento cache:clean
php bin/magento cache:flush
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.