Leitfaden zum Erstellen eines Designs in Magento 2

Veröffentlicht: 2015-11-20

Hallo! Sind Sie neugierig auf Magento 2.0 mit vielen Updates und Änderungen? Heute möchten wir mit Ihnen einen Blog-Beitrag über den Leitfaden zum Erstellen eines Designs in Magento 2 teilen. Bleiben Sie immer auf dem neuesten Stand, indem Sie jeden Tag üben.

Letztes Update: Wir haben gerade Version 2.0 von Claue Multipurpose Magento 2 Theme mit einer Reihe von Leistungsverbesserungen und exklusiven Funktionen veröffentlicht. Probieren Sie dieses Thema jetzt aus: Claue Magento Theme 2. 0

claue2_bearbeitet (1)

Live-Demo

Claue – Clean, Minimal Magento 2&1 Theme ist eine hervorragende Vorlage für einen modernen und sauberen E-Commerce-Shop mit über 40 Homepage-Layouts und unzähligen Optionen für Shop, Blog, Portfolio, Store-Locator-Layouts und andere nützliche Seiten. Claue Version 2. 0 kommt mit einer Reihe exklusiver Funktionen, darunter:

  • Basierend auf dem Luma-Thema.
  • Erfüllen Sie alle Standards von Magento Theme
  • Deutliche Leistungssteigerung
  • Kompatibel mit den meisten Erweiterungen von Drittanbietern.
  • Voll kompatibel mit Magento 2.4.x

Diese zweite erweiterte Version unterscheidet sich vollständig von ihrer vorherigen. Wenn Sie also Claue Version 1 verwenden und auf Claue Version 2 aktualisieren möchten, können Sie nur eine neue Website erstellen, anstatt von der alten Version zu aktualisieren. Kommen wir nun zurück zum Hauptthema.

Das Theme-System hat sich in Magento 2 etwas geändert, aber es gibt Ähnlichkeiten. In diesem Thema wird erläutert, wie Sie die Dateien erstellen, aus denen ein Design besteht, wie Sie einem Design ein Logo hinzufügen und wie Sie die Größe von Bildern ändern.

Erstellen Sie ein Themenverzeichnis

So erstellen Sie das Verzeichnis für Ihr Design:

  1. Gehen Sie zu <your Magento install dir>/app/design/frontend .
  2. Erstellen Sie ein neues Verzeichnis mit dem Namen Ihres Anbieters: /app/design/frontend/<Vendor> .
  3. Erstellen Sie unter dem Anbieterverzeichnis ein Verzeichnis mit dem Namen Ihres Themas.
 App/Design/Frontend/
├── <Lieferant>/
│ │ ├──...<Thema>/
│ │ │ ├── ...
│ │ │ ├── ...

Der Ordnername stimmt normalerweise mit der Benennung überein, die im Designcode verwendet wird: Jeder alphanumerische Zeichensatz, wie der Anbieter es für richtig hält, ist akzeptabel. Diese Konvention ist lediglich eine Empfehlung, es spricht also nichts gegen eine andere Benennung dieses Verzeichnisses.

Deklarieren Sie Ihr Thema

Nachdem Sie ein Verzeichnis für Ihr Design erstellt haben, müssen Sie theme.xml erstellen, das mindestens den Namen des Designs und den Namen des übergeordneten Designs enthält (falls das Design von einem erbt). Optional können Sie angeben, wo das Theme-Vorschaubild gespeichert wird.

  1. Hinzufügen oder Kopieren einer bestehenden theme.xml in Ihr Theme-Verzeichnis app/design/frontend/<Vendor>/<theme>
  2. Konfigurieren Sie es anhand des folgenden Beispiels:
 <theme xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "urn:magento:framework:Config/etc/theme.xsd" > <title> New theme </title> <!-- your theme's name --> <parent> Magento/blank </parent> <!-- the parent theme, in case your theme inherits from an existing theme --> <media> <preview_image> media/preview.jpg </preview_image> <!-- the path to your theme's preview image --> </media> </theme>

Machen Sie Ihr Design zu einem Composer-Paket (optional)

gento-Standarddesigns werden als Composer-Pakete verteilt.

Um Ihr Design als Paket zu verteilen, fügen Sie eine composer.json -Datei zum Designverzeichnis hinzu und registrieren Sie das Paket auf einem Verpackungsserver. Ein standardmäßiger öffentlicher Verpackungsserver ist https://packagist.org/.

composer.json stellt Informationen zur Designabhängigkeit bereit.

Beispiel für ein Thema composer.json :

 { "name" : "magento/theme-frontend-luma" , "description" : "N/A" , "require" : { "php" : "~5.5.0|~5.6.0|~7.0.0" , "magento/theme-frontend-blank" : "100.0.*" , "magento/framework" : "100.0.*" }, "type" : "magento2-theme" , "version" : "100.0.1" , "license" : [ "OSL-3.0" , "AFL-3.0" ], "autoload" : { "files" : [ "registration.php" ] } }

Details zur Composer-Integration im Magento-System finden Sie unter Composer-Integration.

Registrierung.php hinzufügen

Um Ihr Design im System zu registrieren, fügen Sie in Ihrem Designverzeichnis eine Datei registration.php mit folgendem Inhalt hinzu:

 <?php /** * Copyright 2015 Magento. All rights reserved. * See COPYING.txt for license details. */ \Magento\Framework\Component\ComponentRegistrar :: register ( \Magento\Framework\Component\ComponentRegistrar :: THEME , 'frontend/<Vendor>/<theme>' , __DIR__ );

Dabei ist <Vendor> Ihr Anbietername, <theme> ist der Themencode.

Zur Veranschaulichung siehe die Datei registration.php des Magento Luma-Themes.

Bilder konfigurieren

Produktbildgrößen und andere Eigenschaften, die auf der Storefront verwendet werden, werden in einer view.xml -Konfigurationsdatei konfiguriert. Es ist für ein Design erforderlich, aber optional, wenn es im übergeordneten Design vorhanden ist.

Wenn sich die Produktbildgrößen Ihres Designs von denen des übergeordneten Designs unterscheiden oder wenn Ihr Design von keinem Design erbt, fügen view.xml hinzu, indem Sie die folgenden Schritte ausführen:

  1. Melden Sie sich bei Ihrem Magento-Server als Benutzer mit Berechtigungen zum Erstellen von Verzeichnissen und Dateien im Magento-Installationsverzeichnis an. (Normalerweise ist dies der Eigentümer des Magento-Dateisystems.)
  2. Erstellen Sie das etc -Verzeichnis in Ihrem Themenordner
  3. Kopieren view.xml aus dem etc -Verzeichnis eines vorhandenen Designs (z. B. aus dem Blank-Design) in das etc -Verzeichnis Ihres Designs.
  4. Konfigurieren Sie alle Storefront-Produktbildgrößen in view.xml . Beispielsweise können Sie die Produktbilder der Kategorie Rasteransicht quadratisch gestalten, indem Sie eine Größe von 250 x 250 Pixel angeben, so würde die entsprechende Konfiguration aussehen:
 ... <image id= "category_page_grid" type= "small_image" > <width> 250 </width> <height> 250 </height> </image> ...

Einzelheiten zur Bildkonfiguration in view.xml finden Sie im Thema Bildeigenschaften für ein Design konfigurieren.

Erstellen Sie Verzeichnisse für statische Dateien

Ihr Design enthält wahrscheinlich mehrere Arten von statischen Dateien: Stile, Schriftarten, JavaScript und Bilder. Jeder Typ sollte in einem separaten Unterverzeichnis von web in Ihrem Themenordner gespeichert werden:

 app/design/<Bereich>/<Anbieter>/<Design>/
├── Internet/
│ ├── CSS/
│ │ ├── Quelle/ 
│ ├── Schriftarten/
│ ├── Bilder/
│ ├── js/

Im .../<theme>/web/images speichern Sie die allgemeinen themenbezogenen statischen Dateien. Beispielsweise wird ein Themenlogo in ...<theme>/web/images gespeichert. Es ist wahrscheinlich, dass Ihr Design auch modulspezifische Dateien enthält, die in den entsprechenden Unterverzeichnissen gespeichert sind, wie .../<theme>/<Namespace_Module>/web/css und ähnliches. Die Verwaltung der modulspezifischen Themendateien wird in den folgenden Abschnitten dieses Handbuchs erläutert.

Ihre Theme-Verzeichnisstruktur jetzt

Zu diesem Zeitpunkt sieht Ihre Themendateistruktur wie folgt aus:

 app/design/frontend/<Anbieter>/
├── <Thema>/
│ ├── etc/
│ │ ├── view.xml
│ ├── Internet/
│ │ ├── Bilder
│ │ │ ├── logo.svg
│ ├── theme.xml
│ ├── komponist.json

Theme-Logo

In der Magento-Anwendung ist das Standardformat und der Standardname eines logo.svg . Wenn Sie ein logo.svg -Bild an einem herkömmlichen Speicherort ablegen, also im <theme_dir>/web/images , wird es automatisch als Designlogo erkannt. Es wird in der Kopfzeile Ihrer Store-Seite angezeigt, sobald das Design angewendet wurde.

In Ihrem benutzerdefinierten Design können Sie eine Logodatei mit einem anderen Namen und Format verwenden, aber Sie müssen sie möglicherweise deklarieren.

Die Notwendigkeit der Deklaration hängt davon ab, ob Ihr Theme ein Parent-Theme und dessen Logo-Bild hat. Folgende Fälle sind möglich:

  • Dein Theme hat kein übergeordnetes Theme:
    • Wenn der Name und das Format Ihres Logobilds standardmäßig logo.svg ist, müssen Sie es nicht deklarieren.
    • Wenn Ihr Logo-Bildname oder -Format nicht standardmäßig ist, müssen Sie es im Layout deklarieren.
  • Dein Theme hat ein Parent-Theme:
    • Wenn Ihr Themenlogo den gleichen Namen und das gleiche Format wie das übergeordnete Themenlogo hat, muss es nicht deklariert werden.
    • Wenn Ihr Logobild einen anderen Namen oder ein anderes Format hat, deklarieren Sie es im Layout.

Design-Logo deklarieren

Um ein Design-Logo zu deklarieren, fügen Sie ein erweitertes <theme_dir>/Magento_Theme/layout/default.xml .

Wenn Ihre Logodatei beispielsweise my_logo.png mit einer Größe von 300 x 300 Pixel hat, müssen Sie sie wie folgt deklarieren:

 <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" > 300 </argument> <argument name= "logo_img_height" xsi:type= "number" > 300 </argument> </arguments> </referenceBlock> </body> </page>

Die Angabe der Logogröße ist optional.

Besuchen Sie den Magesolution-Blog, um das vollständige Magento 2-Tutorial zu lesen und die neuesten Tutorials zu Magento 2 zu aktualisieren.

Quelle: magento.com