Magento-Entwicklung spielt eine unbestreitbar entscheidende Rolle bei der Erstellung einer E-Commerce-Website.
Um Ihren Online-Shop wirklich aufzuwerten, sollten Unternehmen eine gute Investition in Magento Theme Entwicklung
Lassen Sie TECHVIFY Ihnen eine Schritt-für-Schritt-Anleitung zur Magento Theme Entwicklung vorstellen. Wenn Sie diese Schritte vollständig verstehen, können Sie den gesamten Prozess besser nachvollziehen.
Erfahren Sie mehr: Top 7 Magento Development Best Practices
Schritt #1: Erstellen Sie ein Verzeichnis, das das Theme enthält Gehen Sie zu: /app/design/frontend und erstellen Sie ein neues Verzeichnis mit dem gewünschten Vendor-Namen für das Theme-Paket: /app/design/frontend/. Erstellen Sie im Vendor-Verzeichnis ein Verzeichnis mit dem Namen Ihres Themes. app/design/frontend/
├ ── /
│ │ ├ ── …/
│ │ │ ├ ── …
│ │ │ ├ ── …
Nachdem Sie diese Struktur erstellt haben, müssen Sie Ihr Theme deklarieren, damit Magento weiß, dass es existiert. Sie können Ihr Theme im Magento-Backend als aktuelles Theme festlegen.
Schritt #2: Deklarieren Sie Ihr Theme Sie müssen eine theme.xml-Datei erstellen, die den Namen des Themes enthält, um Ihr Theme zu deklarieren. Wenn das Theme von einem übergeordneten Theme erbt, sollte die .xml-Datei auch den Namen des übergeordneten Themes enthalten. Ein Vorschaubild des Themes ist ebenfalls erforderlich, falls notwendig.
Fügen Sie eine theme.xml-Datei hinzu oder kopieren Sie sie aus einem bestehenden Theme in Ihr Theme-Verzeichnis app/design/frontend//. Konfigurieren Sie sie anhand des folgenden Beispiels: m2-theme
Magento/
media/m2-theme-image.jpg
Fügen Sie im
-Tag den Namen Ihres Themes ein. Im <parent>-Tag können Sie das übergeordnete Theme für Fallback-Zwecke angeben.</p><p>Das Theme-Bild im <preview_image>-Tag ist ein Vorschaubild, das die Theme-Seite zur Vorschau anzeigt. Das Vorschaubild befindet sich in <em>app/design/frontend/<theme>/m2-theme/media/m2-theme-image.jpg.</em></p><p>Wenn Sie den Theme-Titel oder die Informationen zum übergeordneten Theme in theme.xml ändern, nachdem ein Theme bereits registriert wurde, müssen Sie das Magento-Admin-Panel öffnen oder neu laden, um die Änderungen in der Datenbank zu speichern.</p><h2>Schritt #3: Erstellen Sie ein Composer-Paket</h2><p>Magento 2 Themes werden als Composer-Pakete verteilt, damit sie als Paket auf dem Server registriert werden. Fügen Sie eine Datei composer.json hinzu, die optional ist.</p><p>Die composer.json-Datei enthält Informationen zu den Abhängigkeiten des Themes. Orientieren Sie sich an einer aktuellen theme.xml-Datei für die korrekten Abhängigkeiten und deren Versionen.</p><p>Beispiel einer composer.json-Datei für ein Theme:</p><pre><code>{
"name": "<vendor>/m2-theme",
"description": "Magento 2 Theme Customization",
"require": {
"php": "~5.6|~7.0|~7.1|~7.2|~7.3|~7.4",
"<vendor>/m2-theme": "100.0.*",
"magento/framework": "100.0.*"
},
"type": "magento2-theme",
"version": "100.0.1",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"Registration.php"
]
}
}</code></pre><h2>Schritt #4: Registrierung.php hinzufügen</h2><p>Um Ihr Theme im System zu registrieren, fügen Sie eine Datei registration.php in Ihrem Theme-Verzeichnis mit folgendem Inhalt hinzu:</p><pre><code><?php
/**
Copyright © Magento, Inc. Alle Rechte vorbehalten.
Siehe COPYING.txt für Lizenzdetails.
*/
\Magento\Framework\Component\ComponentRegistrar:: register;
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/<Vendor>/<theme>',
__DIR__
);</code></pre><p><Vendor> ist Ihr Vendor-Name und <theme> der Theme-Code.</p><h2>Schritt #5: Erstellen der Verzeichnisstruktur für statische Dateien</h2><p>Das Theme-Paket besteht aus vielen Dateitypen: Styles, Fonts, JavaScript und Bildern. Jeder Typ sollte in einem eigenen Unterverzeichnis von web in Ihrem Theme-Verzeichnis gespeichert werden:</p><p><em>app/design/<area>/<Vendor>/<theme>/</em></p><p><em>├</em><em>──</em><em> web/</em></p><p><em>│ </em><em>├</em><em>──</em><em> css/</em></p><p><em>│ │ </em><em>├</em><em>──</em><em> source/</em><em></em></p><p><em>│ </em><em>├</em><em>──</em><em> fonts/</em></p><p><em>│ </em><em>├</em><em>──</em><em> images/</em></p><p><em>│ </em><em>├</em><em>──</em><em> js/</em></p><p>Im Verzeichnis …/<theme>/web/images speichern Sie allgemeine, themenbezogene statische Dateien.</p><h2>Schritt #6: Bilder konfigurieren</h2><p>Produktbildgrößen und andere Eigenschaften, die in einem Theme verwendet werden, werden in einer view.xml-Konfigurationsdatei festgelegt. Sie ist für ein Theme erforderlich, aber optional, wenn sie im übergeordneten Theme vorhanden ist.</p><p>Wenn sich die Produktbildgrößen Ihres Themes von denen des übergeordneten Themes unterscheiden oder wenn Ihr Theme von keinem Theme erbt, müssen Sie view.xml hinzufügen.</p><p>Kopieren Sie die view.xml-Datei aus dem etc.-Verzeichnis des übergeordneten Themes oder aus dem Blank-Theme. Konfigurieren Sie alle Produktbildgrößen im Storefront in der view.xml-Datei.</p><pre><code><image id="category_page_grid" type="small_image">
<width>250</width>
<height>250</height>
</image></code></pre><h2>Schritt #7: Theme-Logo deklarieren</h2><p>Im Magento-System ist das Standardformat und der Standardname eines Logo-Bildes logo.svg. Sie können eine Logo-Datei mit einem anderen Namen und Format verwenden, müssen diese jedoch möglicherweise deklarieren.</p><p>Um ein Theme-Logo zu deklarieren, erstellen Sie die Verzeichnisse Magento_Theme/layout und fügen den folgenden Code in eine default.xml-Datei ein. Der Pfad der default.xml-Datei lautet <em>/app/design/frontend/<theme>/m2-theme/Magento_Theme/layout/default.xml.</em></p><pre><code><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/m2-logo.png</argument>
<argument name="logo_img_width" xsi:type="number">350</argument>
<argument name="logo_img_height" xsi:type="number">350</argument>
</arguments>
</referenceBlock>
</body>
</page></code></pre><h2>Schritt #8: Theme-Layout anpassen</h2><p>Sobald Ihre grundlegende Theme-Struktur erstellt ist, können Sie nun jedes Layout anpassen oder überschreiben und ein neues Design-Layout für Ihr neues Theme einrichten.</p><p>Um das Theme-Layout zu überschreiben, müssen Sie die Layout-Datei mit demselben Namen an folgendem Ort ablegen: <em>/app/design/frontend/Magento/<theme>/Magento_Theme/layout/default.xml</em></p><p>Diese Dateien überschreiben die folgenden Layouts: <em>/<vendor>/m2-theme/Magento_Theme/layout/default.xml</em></p><h2>Schritt #9: Theme im Magento Admin Panel konfigurieren</h2><p>Der nächste Schritt ist, das von Ihnen erstellte benutzerdefinierte Theme im Magento-Admin auf Ihrer Website anzuwenden: Gehen Sie zu Admin->Content->Design->Configuration</p><p>Klicken Sie auf Bearbeiten für Ihre Store-Ansicht, Sie sehen eine Seite mit einer Design-Konfiguration. Wählen Sie auf der Registerkarte Default Theme Ihr neu erstelltes Theme im Dropdown Applied Theme aus und klicken Sie auf Save Configuration, um das Theme anzuwenden.</p><h2>Schritt #10: Abschließende Bereitstellung</h2><p>Um das Theme im Magento-Frontend sichtbar zu machen, müssen wir einen Befehl ausführen, um die Dateien bereitzustellen:</p><ol><li>Melden Sie sich bei Ihrem Magento-Store-SSH-Konto an</li><li>Wechseln Sie in das Magento-Stammverzeichnis und führen Sie den folgenden Befehl aus:</li></ol><pre><code><em>php bin/magento setup:upgrade</em></code></pre><ol start="3"><li>Führen Sie einen weiteren Befehl aus, um die Theme-Dateien bereitzustellen:</li></ol><pre><code><em>php bin/magento setup:static-content:deploy</em></code></pre><p>Jetzt ist Ihr Theme einsatzbereit.</p><p>Das ist alles, was Sie über den <strong>Magento Theme Entwicklungsprozess</strong> wissen müssen. Stellen Sie sicher, dass Sie jeden Schritt kennen, um alle besten Funktionen der Magento-Entwicklung optimal zu nutzen.</p><figure><img decoding="async" class="aligncenter" src="https://static-cdn.techvify.com/strapi-uploads/uploads/0505_magentotheme_2_927bfdbaeb.jpg" alt="Magento Development vietnam" /></figure><p>Oder wenn Ihnen dieser Prozess zu kompliziert erscheint, sollten Sie ein vertrauenswürdiges Webentwicklungsteam wählen. TECHVIFY Software ist ein <a title="Magento development services" href="https://techvify-software.com/all-you-need-to-know-about-magento-development/" rel="nofollow noopener" target="_blank">Magento-Entwicklung</a> Spezialist, dessen oberstes Ziel es ist, die beste E-Commerce-Website zu erstellen, die alle Anforderungen des Kunden erfüllt. Mit TECHVIFY können Sie sicher sein, dass Ihr Online-Shop in guten Händen ist.</p><div class="tvf-box-cta"><p id="title">TECHVIFY – Globales AI- & Software-Lösungsunternehmen</p><p>Von Startups bis zu Branchenführern: TECHVIFY setzt auf Ergebnisse, nicht nur auf Lieferungen. Beschleunigen Sie Ihre Markteinführung und sehen Sie frühzeitig ROI mit leistungsstarken Teams, AI (einschließlich GenAI) Softwarelösungen und ODC (Offshore Development Center) Services.</p><ul><li><strong>E-Mail:</strong><a href="mailto:contact@techvify.com.vn">contact@techvify.com.vn</a></li><li><strong>Telefon:</strong><a href="tel:+842477762666">(+84)24.77762.666</a></li></ul><div><a href="#tvf-contact"><button class="tvf-cta-btn" type="button">Kontaktieren Sie uns</button></a></div></div></div><div class="mb-16 pt-8 border-t border-white/10"><h3 class="text-white font-medium text-lg mb-4">Categories & Tags</h3><div class="flex flex-wrap gap-3"><template id="P:a"></template><template id="P:b"></template></div></div></div></article></div></div><div hidden id="S:5"><a class="w-20 h-20 rounded-lg overflow-hidden bg-white/5 hover:opacity-80 transition-opacity relative flex items-center justify-center" href="/de/authors/TECHVIFY%20Team"><img alt="TECHVIFY Team" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="object-contain" style="color:transparent" src="https://static-cdn.techvify.com/strapi-uploads/uploads/techvify_logo_143a94117f.jpeg"/></a></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"><a class="hover:text-white/80 transition-colors" href="/de/authors/TECHVIFY%20Team"><h4 class="text-white font-semibold text-lg mb-1">TECHVIFY Team</h4></a></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"><a target="_blank" rel="noopener noreferrer" class="w-6 h-6 hover:opacity-80 transition-opacity" href="https://twitter.com/intent/tweet?text=Check%20out%20this%20article%3A%20Magento%20Theme-Entwicklung%20Tutorial%3A%20Ein%20Leitfaden%20f%C3%BCr%20Anf%C3%A4nger&url=https%3A%2F%2Ftechvify.com%2Fmagento-theme-development-tutorial"><div class="w-6 h-6 bg-white/20 rounded flex items-center justify-center"><span class="text-xs">𝕏</span></div></a></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"><a target="_blank" rel="noopener noreferrer" class="w-6 h-6 hover:opacity-80 transition-opacity" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Ftechvify.com%2Fmagento-theme-development-tutorial"><div class="w-6 h-6 bg-white/20 rounded flex items-center justify-center"><span class="text-xs">in</span></div></a></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"><a target="_blank" rel="noopener noreferrer" class="w-6 h-6 hover:opacity-80 transition-opacity" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ftechvify.com%2Fmagento-theme-development-tutorial"><div class="w-6 h-6 bg-white/20 rounded flex items-center justify-center"><span class="text-xs">f</span></div></a></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"><a class="px-4 py-1.5 rounded-full text-sm font-semibold text-white hover:opacity-90 transition-opacity" style="background-color:#ebdc0c" href="/de/archive?category=knowledge">Wissen</a></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"><a class="px-4 py-1.5 rounded-full text-sm font-semibold text-white hover:opacity-90 transition-opacity" style="background-color:#eb690c" href="/de/archive?category=guides">Leitfäden</a></div><script>$RS("S:b","P:b")</script><script>$RC("B:4","S:4")</script></body></html></body></html> 
