Jak stworzyć motyw podrzędny w Magento 2

Chcę zmodyfikować niektóre aspekty gotowego motywu Luma, ale chciałbym to zrobić, zachowując oryginalne pliki, a także upewniając się, że przy każdej aktualizacji Magento zachowuję moje zmiany.

Chcę to zrobić za pomocą motywu podrzędnego.

Czy Magento 2 obsługuje motywy potomne, a jeśli tak, to w jaki sposób mogę ustrukturyzować ścieżkę katalogu, aby tak się stało?

magento2 parent-child-theme H. Ferrence
źródło

Jestem wdzięczny, że zadałeś to pytanie. Zastanawiałem się nad tym samym!

camdixon

Odpowiedzi:

Pozwala nam stworzyć motyw potomny, więc nasze wszystkie niestandardowe motywy w Magento 2 znajdują się tutaj:

app / design / frontend / company_name / theme_name

Załóżmy, że nazwa naszej firmy to mojafirma, a nazwa naszego motywu jest podstawowa. Musimy utworzyć następującą strukturę katalogów dla naszego motywu:

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

moja spółka :-

Nazwa pakietu motywu

podstawowe: - nazwa motywu. Możemy mieć wiele nazwanych motywów w folderze mojafirma.

etc / view.xml: -

Ten plik służy do określenia wymiarów obrazu produktu, miniatur itp.

Magento_Theme: - Ten katalog służy do nadpisywania istniejących plików motywów Magento.

Magento_Theme / layout / default.xml: - Domyślnie Magento2 zakłada, że plik logo twojego motywu powinien być: /web/media/logo.svg Jeśli chcesz mieć inny plik na logo, musisz zadeklarować go w default.xmlpliku.

Ten plik służy również do zastąpienia domyślnych ustawień motywu.

media / Preview.png: - Podgląd bieżącego motywu.

web: - Ten katalog zawiera wszystkie statyczne dane motywu, takie jak obrazy, style, javascript, czcionki itp.

theme.xml: - Jest to plik obowiązkowy, który określa nazwę naszego motywu, jego nadrzędny i opcjonalnie obraz podglądu motywu.

Tworzenie plików motywów

Stwórzmy teraz nasze pliki jeden po drugim.

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>

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

W tym momencie nasz motyw jest gotowy. Wyczyść pamięć podręczną, a teraz wybierzemy nowy motyw od administratora.

Teraz zaloguj się do administratora i przejdź do następującej ścieżki:

Content -> Design -> Themes

Powinieneś zobaczyć swój motyw na liście.

Teraz przejdź do:

Stores -> Configuration -> Design

Wybierz stronę główną przed Widok sklepu w lewym górnym rogu. Teraz kliknij

Desgin -> Design Theme

Odznacz pole wyboru Użyj domyślnego i wybierz motyw. Kliknij Zapisz konfigurację, wyczyść pamięć podręczną i nowy motyw jest gotowy. Sprawdź swoją stronę główną.

Aby uzyskać więcej informacji, zobacz tutaj.

Arunendra
źródło

Dziękujemy za obszerny przewodnik krok po kroku @Arunendra. Spróbuję wkrótce i odeśle z powrotem.

H. Ferrence

To jest doskonałe @Arunendra. Działał idealnie. Wystarczy postępować zgodnie z nim całkowicie, nie pomijając żadnych kroków.

H. Ferrence

Świetny krok po kroku @Arunendra. Na wypadek, gdyby ktoś napotkał takie same problemy jak ja, lokalizacja, w której zastosujesz zarejestrowany motyw, zmieniła się z Design -> Design Themena Content/Design/Configuration.

Kedmasterk

Ważna uwaga: Plik media/preview.pngmusi istnieć, w przeciwnym razie Magento zgłosi wyjątek.

Salman von Abbas,

Utwórz katalogi:

Przejdź do katalogu głównego do katalogu głównego i przejdź do app / design / frontend , utwórz katalog Demo .

Teraz utwórz katalog Mytheme w aplikacji / design / frontend / Demo.

Utwórz katalog Mangento_Theme w app / design / frontend / Demo / Mytheme.

Utwórz katalog układu w app / design / frontend / Demo / Mytheme / Magento_Theme.

Utwórz katalog multimediów w app / design / frontend / Demo / Mytheme.

Utwórz katalog internetowy w app / design / frontend / Demo / Mytheme.

Utwórz katalog obrazów w aplikacji / design / frontend / Demo / Mytheme / web.

Deklaracja tematu

Utwórz plik theme.xml w app / design / frontend / Demo / Mytheme i wklej w nim następujący kod:

<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>

Rejestracja tematu

Teraz stwórz plik register.php w app / design / frontend / Demo / Mytheme i wklej w nim następujący kod:

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

Prześlij motyw Podgląd obrazu

Przejdź do app / design / frontend / Demo / Mytheme / media i prześlij tutaj swój podgląd obrazu (Preview.jpg).

Deklaracja logo motywu

Przejdź do app / design / frontend / Demo / Mytheme / Magento_Theme / layout i utwórz plik default.xml. Wklej w nim następujący kod:

<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>

Załaduj logo motywu

Przejdź do app / design / frontend / Demo / Mytheme / web / images i prześlij swoje logo (mytheme-logo.png) tutaj.

Zastosuj swój motyw

Otwórz panel administracyjny swojego Magento 2 i przejdź do Treść → Konfiguracja.
Kliknij opcję Edytuj.
Wybierz Mytheme z menu rozwijanego Zastosowany motyw i kliknij
Zapisz konfigurację.

Uruchom polecenia

Otwórz terminal SSH i przejdź do katalogu głównego swojego Magento 2. Teraz uruchom kolejno wszystkie te polecenia:

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

Syed Muneeb Ul Hasan
źródło