So erstellen Sie ein WooCommerce Storefront Child Theme [Vollständige Anleitung]

Veröffentlicht: 2022-01-05

So erstellen Sie ein untergeordnetes WooCommerce Storefront-Theme In diesem Artikel werden wir uns ansehen, wie Sie ein Child-Theme für WooCommerce Storefront in nur vier einfachen Schritten erstellen können. Storefront WooCommerce-Thema ist einer der Hauptgründe, warum WooCommerce erfolgreich ist, da es kostenlos und einfach zu verwenden ist, um mit minimalem Aufwand einen einzigartigen Shop zu erstellen.

Darüber hinaus bietet WooCommerce nahezu unbegrenzte Anpassungsmöglichkeiten, was ein weiterer großer Faktor ist, der zum Erfolg von WooCommerce beiträgt. Dies bedeutet, dass es Ihnen in Kombination mit dem richtigen Thema viel Gestaltungsspielraum bietet.

WooCommerce Storefront Child Theme

Für einen professionellen Look ist das Storefront-Thema eine gute Wahl. Jetzt, da Ihr WooCommerce-Shop eingerichtet ist und läuft, möchten Sie vielleicht noch das Erscheinungsbild Ihres Shops so anpassen, dass es genau Ihren Vorstellungen entspricht.

Nachdem Sie das WooCommerce Storefront-Design installiert haben, müssen Sie im nächsten Schritt ein untergeordnetes WooCommerce Storefront-Design erstellen, mit dem Sie Änderungen an Ihrem Storefront-Elterndesign-Design vornehmen können, ohne den Code des übergeordneten Designs direkt zu bearbeiten.

Dies macht es einfach, das Erscheinungsbild Ihres Shops anzupassen, und eliminiert das potenzielle Risiko für Ihr Design und speichert insbesondere das Risiko, dass die von Ihnen hinzugefügte Anpassung verloren geht, wenn das WooCommerce Storefront-Design aktualisiert wird.

Erstellen Sie ein Child-Theme für WooCommerce Storefront

Warum WooCommerce Storefront Child Theme erstellen?

Wenn Sie viel Zeit mit dem Lesen von WordPress verbracht haben, sind Sie vielleicht schon einmal auf untergeordnete Themen gestoßen. Einfach ausgedrückt ist das Child-Theme eine Kopie eines anderen Themes, das oft als „Eltern-Theme“ bezeichnet wird.

Das bedeutet, dass Sie Änderungen am Child-Theme vornehmen und testen können, ohne das Parent-Theme direkt zu bearbeiten. Das Vornehmen der Änderungen am untergeordneten Thema ist wichtig, da das Ändern des ursprünglichen Themas zu irreversiblen Fehlern und sogar zu Schäden an Ihrer Website führen kann.

Darüber hinaus möchten Sie vielleicht ein untergeordnetes Thema erstellen, weil Sie ein anderes Thema als Grundlage verwenden möchten. Dadurch sparen Sie Zeit und müssen kein neues Thema komplett von Grund auf neu erstellen.

Darüber hinaus möchten Sie möglicherweise einige geringfügige Änderungen am Branding oder der Gesamtästhetik eines Themas vornehmen. Die Verwendung eines untergeordneten Themas eröffnet viele Möglichkeiten, je nachdem, wie viel Zeit Sie bereit sind, dem laufenden Projekt zu widmen.

Sie können jedoch mehrere Optionen aus dem offiziellen WooCommerce-Shop oder anderen Websites wie ThemeForest herunterladen, aber keines der vorhandenen untergeordneten Themen, die angeboten werden, entspricht möglicherweise Ihren Anforderungen. Darüber hinaus möchten Sie vielleicht einen einzigartigen Look kreieren. Das Storefront-Child-Theme zielt darauf ab, ein Shop-Erlebnis zu bieten, das perfekt zu Ihrer Nische passt.

Erwähnenswert ist auch, dass der eigentliche Prozess der Erstellung eines Child-Themes für WooCommerce oder eine allgemeinere WordPress-Seite gleich ist. Trotz dieser Tatsache müssen Sie den Zweck Ihres Shops im Hinterkopf behalten, wenn Sie Ihr Child-Theme anpassen.

So erstellen Sie ein untergeordnetes WooCommerce Storefront-Theme

In diesem Tutorial erstellen wir ein Design, das Storefront als übergeordnetes Element verwendet. Sie können jedes Thema als Basis verwenden. Es ist auch wichtig, dass Sie eine Sicherungskopie Ihrer Website erstellen, bevor Sie fortfahren, da dies Ihren Shop schützt, falls während des Entwicklungsprozesses etwas kaputt geht.

Darüber hinaus ist es auch klug, eine Staging-Umgebung zum Erstellen und Optimieren Ihres untergeordneten Themas zu verwenden. Um das Child-Theme zu erstellen, brauchen wir zu Beginn nur drei Dinge: das Child-Theme-Verzeichnis, die style.css-Datei und die functions.php-Datei.

Hier sind die Schritte, die Sie befolgen müssen, um ein untergeordnetes WooCommerce-Theme zu erstellen.

1. Erstellen des Themenordners

Dieser Themenordner enthält Ihre Stylesheet- und Funktionsdateien. Aus Expertensicht ist es ideal, den Namen deines übergeordneten Themes als Ordnernamen zu verwenden und ihn mit „-child“ anzuhängen. In diesem Tutorial habe ich mein Verzeichnis „Storefront-child“ genannt. Es ist auch wichtig zu überprüfen, dass der Verzeichnisname deines untergeordneten Designs keine Leerzeichen enthält, um mögliche Fehler zu vermeiden.

Erstellen Sie ein Child-Theme für WooCommerce Storefront

2. Stilvorlage für untergeordnete Themen

Nachdem Sie den Ordner erstellt haben, müssen Sie ein Stylesheet für das untergeordnete Thema erstellen. Das Stylesheet muss so eingestellt werden, dass es die Styles von deinem Parent-Theme erbt.

Dazu müssen Sie den folgenden Stylesheet-Header einfügen und durch relevante Details ersetzen. Es ist auch erwähnenswert, dass die hier vorgenommenen Anpassungen die übergeordneten Designstile überschreiben.

 /*

 Name des Themas: Schaufensterkind

 Design-URI: http://sitename.com/storefront/

 Beschreibung: Storefront Child Theme

 Autor: Ihr Name

 Autor-URI: http://sitename.com

 Vorlage: Schaufenster /*Groß-/Kleinschreibung beachten*/

 Version: 1.0.0

 Lizenz: GNU General Public License v2 oder höher

 Lizenz-URI: http://www.gnu.org/licenses/gpl-2.0.html

 Tags: hell, dunkel, volle Breite, responsives Layout, barrierefrei

 Textdomäne: storefront-child

*/

/*Designanpassungen beginnen hier*/

In diesem Tutorial werde ich Ihnen jedoch nicht die Verwendung von CSS beibringen, da dies in diesem Artikel nicht behandelt werden kann. Sie müssen CSS lernen oder einen Entwickler beauftragen, um die CSS-Optimierungen auf Ihrer Website vorzunehmen.

3. Child-Theme-Funktion

In den vorherigen Methoden schlagen sie vor, dass Sie „@import“ in Ihrem Stylesheet verwenden, um Ihr untergeordnetes Thema zu laden. Es ist wichtig zu beachten, dass dies nicht mehr als Best Practice gilt. Sie müssen jedoch nur das Stylesheet Ihres übergeordneten Designs in die Datei functions.php Ihres untergeordneten Designs „einreihen“.

Um dies zu ermöglichen, können Sie „wp_enqueue_scripts action“ und „wp_enqueue_style()“ verwenden. Erwähnenswert ist auch, dass das Stylesheet für dein Child-Theme in der Regel automatisch geladen wird.

Sie müssen es gut in die Warteschlange einreihen, damit es geladen wird, und Sie müssen sicherstellen, dass das untergeordnete Stylesheet Priorität erhält. Zur Vereinfachung habe ich den folgenden Code erstellt, der „parent-style“ als Abhängigkeit festlegt, damit Ihr Child-Theme-Stylesheet danach geladen wird.

 <?php

Funktion theme_enqueue_styles() {

$parent_style = 'Elternstil';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

?>

4. Aktivierung

Nachdem der Child-Theme-Ordner nun vollständig ist, müssen Sie eine .zip-Datei Ihres Child-Theme-Ordners erstellen, damit Sie ihn zu Ihren WordPress-Themes hinzufügen können.

Sie können dies tun, indem Sie 7-Zip oder Winrar verwenden. Es ist auch wichtig sicherzustellen, dass du deine style.css und functions.php in deinem Child-Theme-Ordner hast.

Darüber hinaus ist es wichtig, andere Plugin-Einstellungen zu notieren und aufzubewahren, bevor Sie Ihr untergeordnetes Thema aktivieren. Danach können Sie dies in Ihrem WordPress über Darstellung > Themen hinzufügen hochladen. Hochladen des Themes Create WooCommerce Storefront Child Theme

WordPress installiert es wie jedes Design und sobald es installiert ist, müssen Sie es aktivieren, indem Sie auf „Aktivieren“ klicken, indem Sie zu Darstellung > Designs gehen, wie unten gezeigt: Erstellen Sie ein Child-Theme für WooCommerce Storefront

Nach der Aktivierung sieht es genauso aus wie das ursprüngliche Thema. Das Child-Theme zieht die Styles aus deinem Parent-Theme. Dann müssen Sie kreativ werden und das Erscheinungsbild im Stylesheet anpassen.

Darüber hinaus können Sie Änderungen an den Vorlagendateien Ihres Themes vornehmen, indem Sie die Vorlagendatei, die Sie ändern möchten, wie etwa header.php, von Ihrem übergeordneten in Ihren untergeordneten Theme-Ordner kopieren.

Darüber hinaus müssen Sie auch einige Änderungen vornehmen, um anzugeben, welche Funktion WordPress verwendet, um auf die Vorlagendateien zu verweisen. Das bedeutet, dass Sie das get_stylesheet_directory(); Funktion anstelle von get_template_directory(), um auf Ihre Vorlagen zu verweisen.

Fazit

An diesem Punkt bin ich mir sicher, dass Sie ein WooCommerce Storefront Child Theme erstellen können. Ich empfehle dringend, dass Sie Ihr CSS auffrischen, um das Beste aus Ihrem Styling herauszuholen, und lesen Sie unseren anderen Leitfaden zum Erstellen von untergeordneten Themen, um noch mehr Ratschläge zu erhalten.

Sie können ein Child-Theme auch bei einem Drittanbieter erwerben, müssen sich aber nicht auf die Kreativität anderer verlassen. Das liegt daran, dass das Erstellen von WooCommerce Storefront Child Themes nicht so schwierig ist, wie Sie vielleicht denken.

Darüber hinaus gibt es Ihnen nahezu die vollständige Kontrolle über das Aussehen und die Funktionalität Ihres Shops. Daher müssen Sie eine erstellen, da dies als bewährte Methode bei der Entwicklungsarbeit auf Ihrer WooCommerce-Site gilt.

Darüber hinaus besteht beim direkten Ändern eines Designs die Gefahr, dass die Änderungen während des Updates verloren gehen. Das untergeordnete Thema stellt sicher, dass die Änderungen intakt bleiben.