So erstellen Sie ein WooCommerce Storefront Child Theme

Zuletzt aktualisiert - 5. März 2021

Ein untergeordnetes Thema ist eine Modifikation eines bestehenden Themas, das seinen grundlegenden Stil und seine grundlegenden Funktionen beibehält. Das ursprüngliche Theme wird als Parent-Theme bezeichnet und das neu modifizierte als Child-Theme. Das Erstellen Ihres eigenen untergeordneten WooCommerce Storefront -Themes ist eine gute Möglichkeit, wenn Sie Ihren Shop personalisieren möchten, ohne ein neues Thema zu kaufen.

Holen Sie sich WooCommerce Storefront!

Child-Theme – Ein Überblick

Wie in der Einleitung erwähnt, verwendet ein untergeordnetes Thema das übergeordnete Thema als Basis und verleiht dem Thema zusätzliche Funktionen. Dies ist oft eine gute Option, wenn Sie Variationen für ein Thema erstellen möchten. Im Storefront Child Themes-Verzeichnis finden Sie eine gute Auswahl an erstklassigen Child Themes, die für verschiedene Branchen und Produkttypen geeignet sind. Auf diese Weise können Sie ganz einfach Ihr eigenes Child-Theme für Storefront erstellen.

Vorteile der Verwendung eines Child-Themes

Beim direkten Ändern eines Designs besteht die Gefahr, dass die Änderungen während des Updates verloren gehen. Ein untergeordnetes Thema stellt sicher, dass die Änderungen intakt bleiben. Insgesamt ist die Entwicklung eines untergeordneten Themas ein schnellerer Prozess als die Erstellung eines neuen Themas. Darüber hinaus ist das Erstellen eines untergeordneten Themas für diejenigen, die an der Entwicklung von WordPress-Themes interessiert sind , eine großartige Möglichkeit, zu experimentieren und zu lernen.

Hier sind einige der Vorteile beim Erstellen eines untergeordneten Themas:

• Hilft bei der Erstellung verschiedener Variationen für dasselbe Thema, um für verschiedene Domänen geeignet zu sein.
• Kann die Designanpassungen separat speichern, ohne das übergeordnete Design zu ändern.
• Anpassungen können auch nach der Aktualisierung des übergeordneten Themas oder der Kerndateien von WordPress oder WooCommerce beibehalten werden.

Erstellen eines untergeordneten WooCommerce Storefront-Themes

Es ist ratsam, eine ordnungsgemäße Sicherung Ihrer Website zu erstellen, bevor Sie versuchen, ein Design anzupassen. Sie benötigen einen FTP-Zugang zu Ihrem Host, um das neue Child-Theme hochzuladen.

Um den Vorgang zu starten, erstellen Sie eine style.css-Datei für das untergeordnete Design mit dem folgenden Beispielcode, der in den WooCommerce-Dokumenten angegeben ist.

Ändern Sie als Nächstes das Vorlagenfeld so, dass es auf Storefront zeigt.

Ein Unterschied, der Ihnen hier vielleicht aufgefallen ist, besteht darin, dass Sie mit Storefront den Enqueue-Schritt nicht benötigen, der beim Erstellen eines untergeordneten Designs für das Design 25 ausgeführt wurde. Wenn Sie ein untergeordnetes Design mit Storefront erstellen, benötigen Sie nur eine leere function.php-Datei und eine style.css-Datei, um den Prozess zu starten.

Sie können die Datei einfach in einen untergeordneten Themenordner übertragen, eine ZIP-Datei erstellen und hochladen. Sobald dies erledigt ist, aktivieren Sie das neue Child-Theme über Appearance > Themes .

Sie können das Child-Theme auch über FTP hochladen, wenn Sie Zugriff auf Ihren Hosting-Service haben. Sie können ein FTP-Programm wie FileZilla verwenden.

Die besten FTP-Clients für Mac und Windows.

Jetzt können Sie anpassen, indem Sie Codes zu den Stylesheet- und Vorlagendateien des untergeordneten Designs hinzufügen. Sie können beispielsweise eine beliebige Vorlagendatei aus dem Storefront-Designordner in den untergeordneten Designordner kopieren. Diese Datei im untergeordneten Themenordner kann angepasst werden, indem Sie den Code gemäß Ihren Anforderungen ändern.

Wie kann man das Design und die Funktionalität eines Child-Themes anpassen?

Mit den obigen Einstellungen haben Sie ein untergeordnetes Design für Storefront erstellt. Es gibt jedoch noch keine benutzerdefinierten Eigenschaften für Ihr Design. Sie können Ihrem untergeordneten Design Funktionen und Designanpassungen hinzufügen, ohne das übergeordnete Design zu ändern.

Design-Änderungen

Beispielsweise können Sie im obigen Stylesheet, das Sie für das untergeordnete Thema erstellt haben, die Farbe für den Seitentitel mit dem folgenden Code anpassen:
.site-branding h1 a {
color: red;
}

Vorlagenänderungen

Sie können auch die Vorlagendateien (*.php) im Themenordner ändern. Beispielsweise können Sie einen bestimmten Code ändern, indem Sie die header.php aus dem übergeordneten Theme-Ordner wp-content/themes/storefront/header.php in den untergeordneten Theme-Ordner wp-content/themes/storefront-child/header.php kopieren.

Sobald das Kopieren abgeschlossen ist, können Sie die header.php bearbeiten und jeden Code nach Bedarf anpassen. Die header.php im Child-Theme wird anstelle der header.php des Parent-Themes verwendet.

Auf diese Weise können Sie auch Änderungen an WooCommerce-Vorlagen vornehmen. Erstelle einfach einen neuen Ordner in deinem Child-Theme und nenne ihn „WooCommerce“. Hier können Sie Änderungen an den WooCommerce-Vorlagen vornehmen, um sie an Ihr Website-Design anzupassen.

Diese WooCommerce-Dokumentation hilft Ihnen dabei, mehr über die Struktur von WooCommerce-Vorlagen zu erfahren.

Anpassungsfunktion

Wenn Sie ein untergeordnetes Design erstellen, möchten Sie, dass es auch über benutzerdefinierte Funktionen verfügt. Dazu müssen Sie zunächst sicherstellen, dass Ihre Datei functions.php leer ist und keine Informationen aus der Datei functions.php der übergeordneten Datei enthält. Wenn nun eine bestimmte Funktion in der Funktion des übergeordneten Designs austauschbar ist (in eine bedingte if-Anweisung eingeschlossen), dann können Sie diese in die functions.php des untergeordneten Designs kopieren. Nachdem Sie eine Steckfunktion kopiert haben, können Sie nach Bedarf Änderungen vornehmen. Unten ist ein Beispiel für eine steckbare Funktion:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

Erstellen eines allgemeinen untergeordneten Themas

Der Prozess der Erstellung eines Child-Themes ist bei Storefront anders und einfacher als bei anderen Themes. In diesem Artikel werden wir uns auch die grundlegenden Details der allgemeinen Methode ansehen.

Der erste Schritt besteht darin, ein Themenverzeichnis zu erstellen. Erstellen Sie als Nächstes ein Stylesheet (style.css-Datei) für das untergeordnete Design. WooCommerce empfiehlt die Erstellung einer functions.php-Datei, die nützlich ist, um Stile korrekt in die Warteschlange einzureihen.

Erstellen eines allgemeinen untergeordneten Themas

Der Prozess zum Erstellen eines Child-Themes ist in Storefront anders und einfacher als bei anderen Themes. In diesem Artikel werden wir uns auch die grundlegenden Details der allgemeinen Methode ansehen.

Der erste Schritt besteht darin, ein Themenverzeichnis zu erstellen. Erstellen Sie als Nächstes ein Stylesheet (style.css-Datei) für das untergeordnete Design. WooCommerce empfiehlt die Erstellung einer functions.php-Datei, die nützlich ist, um Stile korrekt in die Warteschlange einzureihen.

Child-Theme-Verzeichnis erstellen

Erstellen und platzieren Sie das untergeordnete Themenverzeichnis in wp-content/themes. Das Anhängen des Namens des Child-Theme-Verzeichnisses mit „-child“ wird empfohlen, ist aber nicht obligatorisch. Es sollte darauf geachtet werden, keine Leerzeichen im Verzeichnisnamen des untergeordneten Designs zu lassen, um Probleme zu vermeiden.

Erstellen des Stylesheets des Child-Themes

Erstellen Sie einen Stylesheet-Header, um den Prozess zu starten. Unten ist ein WordPress-Codex-Beispiel für einen Stylesheet-Header, der für ein untergeordnetes Design basierend auf dem Twenty Fifteen-Design erstellt wurde.

Beim Erstellen eines untergeordneten Designs können Sie diesen Beispieltext als Referenz verwenden und ihn durch Details ersetzen, die für Ihr Design relevant sind. Die Template-Zeile gibt den Verzeichnisnamen des Parent-Themes an. Sie müssen es an das Thema anpassen, mit dem Sie arbeiten.

Einreihen der übergeordneten und untergeordneten Themen in die Warteschlange

Erstellen Sie eine functions.php-Datei im untergeordneten Themenverzeichnis, um die übergeordneten und untergeordneten Themen in die Warteschlange einzureihen. Fügen Sie das Stylesheet des übergeordneten Designs in die Warteschlange ein, indem Sie eine wp_enqueue_scripts-Aktion hinzufügen und indem Sie wp_enqueue_style() in der function.php des untergeordneten Designs verwenden. Öffnen Sie die function.php Ihres Child-Themes mit einem PHP-Tag (<?php). Stellen Sie als Nächstes die Stylesheets des übergeordneten und des untergeordneten Designs in die Warteschlange. Der folgende Screenshot ist ein Beispiel, das nur funktioniert, wenn Ihr übergeordnetes Design eine .css-Datei verwendet, um das CSS zu speichern. Wenn es mehr als eine .css-Datei gibt, wie style.css, main.css, dh.css, stellen Sie sicher, dass alle übergeordneten Themenabhängigkeiten beibehalten werden. Ein gutes Maß an Programmierkenntnissen ist eindeutig ein wichtiger Faktor, um dies gleich beim ersten Mal richtig zu machen.

Sie müssen auch den eigentlichen CSS-Code in Ihr Child-Theme style.css einreihen. Um sicherzustellen, dass das Child-Theme-Stylesheet nach dem Parent-Stylesheet geladen wird, können Sie den Parent-Style als Abhängigkeit festlegen. Geben Sie außerdem die Versionsnummer des untergeordneten Designs an, um sicherzustellen, dass Sie den Cache auch für Ihr untergeordnetes Design knacken können. Das empfohlene Beispiel im Codex ist wie folgt:

Aktivieren Sie Ihr Child-Theme

Erstelle eine ZIP-Datei deines Child-Theme-Ordners und lade sie hoch, indem du zu Appearance → Themes → Add New Theme navigierst.

Jetzt wird das neue Child-Theme in der Liste der Themes angezeigt.

Sie können das neue Child-Theme jetzt aktivieren, indem Sie auf die Schaltfläche Aktivieren klicken.

• Laden Sie das Storefront-Design jetzt herunter.
• Lesen Sie mehr über Child-Themes von WordPress Codex.

Sie können auch ein untergeordnetes Beispielthema von diesem WooCommerce-Link herunterladen, um es besser zu wissen. Oder lesen Sie einige unserer verwandten Artikel:

1. Wie wählt man das richtige Theme für seinen WooCommerce-Shop aus?
2. Wie installiere und konfiguriere ich Storefront?
3. Neueste Trends bei WooCommerce-Themes.