So erstellen Sie ein untergeordnetes Thema in Magento 2

18

Ich möchte bestimmte Aspekte des vorgefertigten Luma-Themas ändern, aber ich möchte dies tun, indem ich die Originaldatei (en) behalte und außerdem sicherstelle, dass ich meine Änderungen auch behalte, wenn ich Magento aktualisiere.

Ich möchte dies anhand eines Kinderthemas tun.

Unterstützt Magento 2 untergeordnete Themen und wenn ja, wie strukturiere ich meinen Verzeichnispfad, um dies zu ermöglichen?

magento2 parent-child-theme H. Ferrence
quelle
1
Ich bin dankbar, dass Sie diese Frage gestellt haben. Ich habe mich das Gleiche gefragt!
Camdixon

Antworten:

26

Lässt uns ein untergeordnetes Thema erstellen, sodass alle benutzerdefinierten Themen in Magento 2 hier aufgeführt sind:

app / design / frontend / firmenname / themenname

Nehmen wir an, unser Firmenname ist mycompany und unser Themenname ist basic. Wir müssen folgende Verzeichnisstruktur für unser Thema erstellen:

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

meine Firma :-

Der Name des Themenpakets

Grundlegend: - Der Name des Themas. Der Ordner mycompany kann mehrere benannte Themen enthalten.

etc / view.xml: -

Diese Datei wird verwendet, um Produktabbildungen, Miniaturansichten usw. festzulegen.

Magento_Theme: - In diesem Verzeichnis werden vorhandene Magento- Themendateien überschrieben.

Magento_Theme / layout / default.xml: - Standardmäßig geht Magento2 davon aus, dass das Logo Ihres Themas wie folgt aussehen soll: /web/media/logo.svg Wenn Sie eine andere Datei für das Logo möchten, müssen Sie diese in default.xmlfile deklarieren .

Diese Datei wird auch verwendet, um die Standardeinstellungen des Themas zu überschreiben.

media / preview.png: - Die Vorschau des aktuellen Themas.

Web: - Dieses Verzeichnis enthält alle statischen Daten des Themas wie Bilder, Stile, Javascript, Schriftarten usw.

registration.php: - Diese Datei wird benötigt, um unser Theme im Magento2 System zu registrieren.

theme.xml: - Dies ist eine obligatorische Datei, in der der Name des Themas, sein übergeordnetes Element und optional das Vorschaubild des Themas definiert werden.

Themendateien erstellen

Lassen Sie uns nun nacheinander unsere Dateien erstellen.

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>

An diesem Punkt ist unser Thema fertig. Leere deinen Cache und wir werden nun unser neues Thema von admin auswählen.

Melden Sie sich jetzt bei admin an und wechseln Sie zu folgendem Pfad:

Content -> Design -> Themes

Sie sollten Ihr Thema aufgelistet sehen.

Gehen Sie jetzt zu:

Stores -> Configuration -> Design

Wählen Sie die Hauptwebsite vor der Store-Ansicht oben links. Klicken Sie jetzt auf

Desgin -> Design Theme

Deaktivieren Sie das Kontrollkästchen Use Default (Standard verwenden) und wählen Sie Ihr Thema aus. Klicken Sie auf Save Config (Konfiguration speichern), leeren Sie den Cache und Ihr neues Design ist fertig. Überprüfen Sie Ihre Homepage.

Weitere Details finden Sie hier.

Arunendra
quelle
Vielen Dank für die ausführliche Schritt-für-Schritt-Anleitung @Arunendra. Ich werde es in Kürze versuchen und zurückschicken.
H. Ferrence
Das ist exzellent @Arunendra. Hat perfekt funktioniert. Sie müssen es nur vollständig befolgen, ohne irgendwelche Schritte zu überspringen.
H. Ferrence
1
Toll, Schritt für Schritt @Arunendra. Nur für den Fall, dass jemand auf die gleichen Probleme stößt wie ich, hat sich der Ort, an dem Sie Ihr registriertes Thema anwenden, von Design -> Design Themenach geändert Content/Design/Configuration.
Kedmasterk
Wichtiger Hinweis: Die Datei media/preview.pngmuss vorhanden sein, sonst löst Magento eine Ausnahme aus.
Salman von Abbas
5

Verzeichnisse erstellen:

Gehen Sie zum Stammverzeichnis und navigieren Sie zu app / design / frontend . Erstellen Sie das Verzeichnis Demo .

Erstellen Sie nun das Mytheme- Verzeichnis in app / design / frontend / Demo.

Erstelle ein Mangento_Theme- Verzeichnis in app / design / frontend / Demo / Mytheme.

Erstellen Sie ein Layoutverzeichnis in app / design / frontend / Demo / Mytheme / Magento_Theme.

Erstellen Sie ein Medienverzeichnis in app / design / frontend / Demo / Mytheme.

Erstellen Sie ein Webverzeichnis in app / design / frontend / Demo / Mytheme.

Erstellen Sie ein Bilderverzeichnis in app / design / frontend / Demo / Mytheme / web.

Deklaration des Themas

Erstellen Sie die Datei theme.xml in app / design / frontend / Demo / Mytheme und fügen Sie den folgenden Code ein:

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

Registrierung des Themas

Erstellen Sie nun die Datei registration.php in app / design / frontend / Demo / Mytheme und fügen Sie den folgenden Code ein:

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

Theme Vorschaubild hochladen

Gehen Sie zu app / design / frontend / Demo / Mytheme / media und laden Sie hier Ihr Vorschaubild (preview.jpg) hoch.

Logo für Deklaration des Themas

Gehen Sie zu app / design / frontend / Demo / Mytheme / Magento_Theme / layout und erstellen Sie eine default.xml-Datei. Fügen Sie den folgenden Code ein:

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

Theme Logo hochladen

Gehen Sie zu app / design / frontend / Demo / Mytheme / web / images und laden Sie Ihr Logo (mytheme-logo.png) hier hoch.

Übernehmen Sie Ihr Thema

  • Öffnen Sie das Admin-Panel Ihres Magento 2 und gehen Sie zu Inhalt → Konfiguration.

  • Klicken Sie auf die Option Bearbeiten.

  • Wählen Sie Mytheme aus dem Dropdown-Menü Applied Theme und klicken Sie auf
    Save Configuration.

Befehle ausführen

Öffnen Sie das SSH-Terminal und wechseln Sie in das Stammverzeichnis Ihres Magento 2. Führen Sie nun alle diese Befehle nacheinander aus:

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
quelle