27

Einige von Ihnen haben dieses Thema wahrscheinlich in Bezug auf Theming von Grund auf für Magento 1 gelesen: Theming - von Grund auf neu

Ich habe mich gefragt, was die beste Vorgehensweise wäre, um ein Theme von Grund auf für Magento 2 zu entwickeln.

Bauen Sie mit dem Muttersprachler lumaoder blankThema? Oder sonst noch etwas?
Verwenden Sie eine Erweiterung, um Ihr Thema zu entwickeln?
Welche Schritte befolgen Sie, wenn Sie ein Thema von Grund auf neu entwickeln?

magento2 theme template magento-2.0 design Raphael beim digitalen Pianismus
quelle

In meiner Antwort stelle ich einige Links zur Verfügung. Bitte gehen Sie diese durch. Sie werden etwas über die Frontend-Architektur und die Entwicklung von Magento 2.0 erfahren.

Asheem Patro

Befolgen Sie die Schritte von Magento docs devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/… , um das Thema für das Frontend zu erstellen.

Rishabh Rk Rai

45

TL: DR

Bauen Sie mit dem nativen Luma oder Blanko-Thema? Oder sonst noch etwas?

Es liegt an Ihnen, ein übergeordnetes Thema als optional zu deklarieren. Wenn Sie kein übergeordnetes Element deklarieren, greifen Sie dennoch auf die Module (z. B. Magento_Catalog) zurück, die XML- und Vorlagendateien, jedoch kein Styling bereitstellen.

Verwenden Sie eine Erweiterung, um Ihr Thema zu entwickeln?

Da ich lieber mit SCSS und GULP arbeite, verwende ich jetzt Frontools und das SCSS-Blanko-Theme . Dadurch wird die Belastung durch den Standard-Grunt / LESS-Workflow erheblich verringert.

Welche Schritte befolgen Sie, wenn Sie ein Thema von Grund auf neu entwickeln?

Deklarieren Sie das Thema
CSS des übergeordneten Themas entfernen (falls erforderlich)
Fügen Sie Ihr eigenes CSS / WENIGER / SCSS hinzu

Meiner persönlichen Meinung nach ist es am besten, ein eigenes "leeres Thema" von Grund auf zu erstellen, da Sie dies so anpassen können, dass es genau Ihren Anforderungen entspricht.

So würde ich ein Thema von Grund auf neu erstellen. Ich habe NewStore / default als meinen Lieferanten- und Themennamen verwendet.

Nun zur detaillierteren Antwort ...

Erstellen Sie das Thema (gemäß den offiziellen Dokumenten)

Erstellen Sie das Thema gemäß den offiziellen Dokumenten

Optionales Deklarieren eines übergeordneten Elements

Innerhalb app/design/frontend/NewStore/default/theme.xmlSie die Wahl zur Vereinbarkeit einer Mutter Themas haben oder nicht, für dieses Beispiel habe ich weggelassen Linie 3 ( <parent>Vendor/theme</parent>) , so gibt es kein übergeordnetes Thema . Dies bedeutet, dass alle Vorlagen / Layout-Dateien von den Modulen selbst stammen und nicht von Blank oder Luma, und dass keine Themengestaltung erfolgt, da dies dem leeren Thema hinzugefügt wird.

Meine theme.xml sieht so aus:

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>NewStore default</title>
    <media>
        <preview_image>media/preview.jpg</preview_image>
    </media>
</theme>

Entfernen Sie das Styling (wenn Sie ein übergeordnetes Thema festlegen) und fügen Sie Ihr eigenes CSS hinzu

Wenn Sie "leer" oder "Luma" als übergeordnetes Element festlegen, müssen Sie verhindern, dass die CSS-Dateien geladen werden. Erstellen app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmlSie dazu folgendes XML und fügen Sie es hinzu:

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>

        <!-- Remove blank/luma theme styling if you declared a parent -->
        <remove src="css/styles-m.css" />
        <remove src="css/styles-l.css" />
        <remove src="css/print.css" />

        <!-- Add your own CSS files -->
        <css src="css/styles.css" />
    </head>
</page>

Dies entfernt styles-m.css, styles-l.cssund print.cssdurch das leere Thema hinzugefügt. Es fügt auch styles.css als Basis für Ihr eigenes CSS hinzu.

Wenn Sie kein übergeordnetes Element angegeben haben, können Sie die 3 <remove />Tags im obigen Code entfernen .

Fügen Sie Ihr eigenes CSS hinzu

Sie können Ihr Thema jetzt nach Belieben stylen. Ich bin eher ein Fan von Sass als von LESS. Deshalb habe ich diese Datei hinzugefügt. app/design/frontend/NewStore/default/web/css/styles.scss

Ich habe die Hintergrundfarbe hier geändert, um zu beweisen, dass dies funktioniert. Idealerweise würden Sie diese Datei nur zum Importieren anderer Sass / Less-Dateien verwenden.

Ergebnis

Das Ergebnis dessen, was ich gerade getan habe, ist ein Thema ohne Stil (abgesehen von meinem wunderschönen grünen Hintergrund), mit dem Sie Ihr Thema stylen können, ohne mit Magentos Stil (manchmal schwierig zu bearbeiten) zu arbeiten.

Tipps

Wenn Sie lieber mit SCSS arbeiten und keine Zeit haben, ein neues Design zu erstellen, empfehlen wir die Verwendung von Frontools und dem SCSS-Blanko- Design, beide von Snowdog Apps .
Ich finde, der frustrierendste Aspekt bei der Arbeit mit Magentos Front-End-Code ist, wie spezifisch das Styling ist. Um dies zu vermeiden, empfehle ich die Verwendung der BEM-Namenskonvention, wenn Sie Ihr eigenes Styling schreiben.
Auch hilfreiche Kommentare sind wichtig, wenn ein Entwickler, der mit Luma / Blank gearbeitet hat, an einem von Grund auf neu erstellten Thema arbeitete, würde er wahrscheinlich feststellen, dass die Dinge ganz anders funktionieren als erwartet.

Ben Crook
quelle

Ich habe anhand Ihrer Anweisungen ein eigenes leeres Design erstellt, ohne dass ein übergeordnetes Design in der Tabelle definiert ist theme.xml. Es sind jedoch immer noch alle Arten von Stilen im Frontend sichtbar. Die Magento-Installation ist im developerModus und alle Caches wurden gelöscht. Ich weiß nicht, woher all diese Stile kommen - hast du eine Idee?

Freitag,

Haben Sie Erweiterungen / Plugins installiert? Es könnte auch Varnish sein, wenn es installiert ist. Um dies auszuschließen, fügen Sie nach der URL ein Fragezeichen und eine zufällige Zeichenfolge ein, z. B.?=123

Ben Crook,

Ja, ich habe Lack (oder ähnliches) ausgeschlossen. Es sind keine Erweiterungen oder Plugins installiert.

Freitag,

Ist es das vollständige Thema Styling oder nur Teile davon? Es fällt mir schwer zu sagen, ohne die Site und die Codebasis zu sehen. Vielleicht eine neue Frage stellen und dort ein paar Details posten? Wenn Sie mich markieren, werde ich sehen, ob ich es schaffen kann.

Ben Crook

Soweit ich sehen kann, ist es das volle Thema. Plus die mitgelieferte CSS-Datei aus meinem eigenen Theme. Ja, es ist wahrscheinlich besser, eine neue Frage zu diesem

Thema

8

Es gibt eine Menge Tutorials zum Starten eines Themas in Magento 2.0. Ich stelle einige Videolinks und einige normale Links zur Verfügung, über die Sie sich über die Themenentwicklung in Magento 2.0 informieren können. Klicken Sie hier für ein Video

Verweise auch auf diese Links

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html

http://blog.magestore.com/wie-zum-Create-Custom-theme-on-magento-2-part-1/

Über diesen Link erfahren Sie mehr über die Frontend-Architektur von Magento 2.0

http://inchoo.net/magento-2/frontend-theme-architecture/

Überprüfen Sie auch diese beiden Links

http://www.webmull.com/magento-2-create-new-custom-theme/

http://www.slideshare.net/Magestorecom/how-to-create-theme-in-magento-2-part-1

Asheem Patro
quelle

5

Ich übernehme von blank, versuche aber schnell, ein leichteres Basisthema mit einer viel weniger komplexen CSS-Struktur zu erstellen.

Es ist erwähnenswert, dass Magento im Jahr 2015 herausgekommen ist und gesagt hat, dass es nicht empfohlen wird, von Luma zu erben, da sie sich das Recht vorbehalten , unangekündigte Änderungen für ihre eigenen Marketing- und Demozwecke vorzunehmen. Sie überarbeiteten diese Aussage später, indem sie sagten, es sei ihr Ziel, das Erben zuzulassen .

Lawrence
quelle

3

Der beste Weg, ein Thema zu entwickeln, besteht darin, entweder von lumaoder zu erben blank. Der Grund dafür ist, dass sie so konzipiert sind, dass sie reagieren (dh für mehrere Auflösungen geeignet sind). Dies reduziert auch den Arbeitsaufwand beim Erstellen der verschiedenen Vorlagendateien und JS / CSS-Definitionen. Alles, was Sie tun müssen, ist, nur die Teile zu überschreiben, die Sie mit Ihren eigenen anpassen möchten. Unter den folgenden Links finden Sie verschiedene Anweisungen zum Entwickeln eines Themas.

Magento-Dokumentationslinks:

James Calcaben
quelle

Die Vorlagendateien stammen jetzt aus den Modulen und sind nicht leer / luma. Sie können sie also effektiv umgehen, wenn Sie das Styling / die Änderungen nicht benötigen. Wenn Sie sich zum Beispiel app / design / frontend / Magento / blank / Magento_Catalog ansehen, müssen Sie nur ein Element verschieben und ein Styling hinzufügen. Die Vorlagen stammen aus app / code / Magento / Catalog / view / frontend / templates und App / Code / Magento / Katalog / Ansicht / Basis / Vorlagen