Как создать детскую тему в Magento 2

18

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

Я хочу сделать это с помощью детской темы.

Поддерживает ли Magento 2 дочерние темы и, если да, как мне структурировать путь к каталогу, чтобы это произошло?

magento2 parent-child-theme Г. Ферренс
источник
1
Я благодарен, что вы задали этот вопрос. Я думал о том же самом!
Camdixon

Ответы:

26

Позволяет нам создать дочернюю тему, поэтому все наши пользовательские темы в Magento 2 находятся здесь:

приложение / дизайн / интерфейс / company_name / THEME_NAME

Предположим, что наша компания называется mycompany, а наша тема - базовая. Нам нужно создать следующую структуру каталогов для нашей темы:

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

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

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

Основное: - Название темы. Мы можем иметь несколько именованных тем в папке mycompany.

etc / 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 (app / design / 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 (app / design / frontend / mycompany / basic / registration.php)

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

default.xml (app / design / 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>

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

Теперь войдите в систему admin и перейдите по следующему пути:

Content -> Design -> Themes

Вы должны увидеть свою тему в списке.

Теперь перейдите к:

Stores -> Configuration -> Design

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

Desgin -> Design Theme

Снимите флажок Использовать по умолчанию и выберите свою тему. Нажмите Save Config, очистите кеш, и ваша новая тема готова. Проверьте свою домашнюю страницу.

Для более подробной информации смотрите здесь.

Arunendra
источник
Спасибо за обширное пошаговое руководство @Arunendra. Я скоро попробую и отправлю ответ.
Х. Ферренс
Это превосходно @Arunendra. Работал отлично. Просто нужно полностью следовать ей, не пропуская ни одного шага.
Х. Ферренс
1
Отличный шаг за шагом @Arunendra. На случай, если у кого-то возникнут те же проблемы, что и у меня, место, где вы применяете вашу зарегистрированную тему, изменилось с Design -> Design Themeна Content/Design/Configuration.
Kedmasterk
Важное примечание: файл media/preview.pngдолжен существовать, иначе Magento выдаст исключение.
Салман фон Аббас
5

Создать каталоги:

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

Теперь создайте каталог Mytheme в app / design / frontend / Demo.

Создайте каталог Mangento_Theme в приложении / design / frontend / Demo / Mytheme.

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

Создайте медиа каталог в app / design / frontend / Demo / Mytheme.

Создайте веб- каталог в приложении / design / frontend / Demo / Mytheme.

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

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

Создайте файл theme.xml в app / 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 в app / design / frontend / Demo / Mytheme и вставьте в него следующий код:

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

Загрузить тему Предварительный просмотр изображения

Перейдите в app / design / frontend / Demo / Mytheme / media и загрузите изображение для предварительного просмотра (preview.jpg) здесь.

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

Перейдите в app / design / 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>

Загрузить тему логотип

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

Примени свою тему

  • Откройте панель администратора вашего Magento 2 и перейдите в «Содержимое» → «Конфигурация».

  • Нажмите на кнопку Изменить.

  • Выберите Mytheme в раскрывающемся меню Applied Theme и нажмите
    Save Configuration.

Команды запуска

Откройте терминал 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
Сайед Муниб Уль Хасан
источник