Magento 2: Entwicklung eines eigenen Themes

Magento 2: Entwicklung eines eigenen Themes

Die richtige Analyse und Strategie

Wie kann ich mir ein eigenes Theme in Magento 2 erstellen? Das war auch meine erste Frage nach erfolgreicher Installation von Magento. Als aller erstes habe ich den Developer Mode aktiviert. Dieser lässt sich einfach mit einem Befehl im Terminal aktivieren.

	php bin/magento deploy:mode:set developer

In Magento 2 werden Themes, wie schon von der Vorgängerverison bekannt, folgendermaßen angelegt:

app/design/frontend/<vendor>/<theme>/

Wir erstellen ein Theme, das vom Blank-Theme erbt. Dafür legen wir im Verzeichnis unseres Themes folgende Dateien an:

registraion.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/<vendor>/<theme>',
    __DIR__
);

theme.xml

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

Für statische Dateien wie css, js usw. wird folgende Struktur angelegt:

app/design/frontend/<vendor>/<theme>/
├── web/
│ ├── css/
│ │ ├── source/ 
│ ├── fonts/
│ ├── images/
│ ├── js/

Im Backend wählen wir dann das von uns erstelle Theme aus:
Content > (Design) Configuration > Edit the last record > Applied Theme

Jetzt nehmen wir noch eine Änderung in der _theme.less vor und fügen dafür folgenden Code hinzu. Damit wird dem Page-Header ein schwarzer Hintergrund verleihen.

    .page-header .panel.wrapper {
        background: #000;
    }

Jetzt noch less mit folgendem Befehl übers Terminal kompilieren und die Seite im Browser aktualisieren.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy --language de_DE

Facebook Posts auf der eigenen Website
Shopware 5: Eigenen Tab in der Artikeldetail Ansicht