Storefront Child Theme erstellen

Storefront Child Theme erstellen

Ein Storefront Child Theme zu erstellen ist ganz einfach. Keine Angst, Sie machen sich Ihre WordPress – WooCommerce Installation dadurch nicht kaputt. Durch die folgende „7 Schritte Anleitung“ werden Sie das Storefront Child Theme problemlos erstellen.

Welche Vorteile haben Sie durch das Storefront Child Theme?

  • Automattic veröffentlicht in kurzen Abständen neue Versionen vom Storefront Theme. Durch das Storefront Child Theme sind Sie sicher, dass solch ein Update Ihre Installation nicht zerstört.
  • Jede WooCommerce Installation wird mit der Zeit individuell angepasst. Durch das Storefront Child Theme haben Sie die Gewissheit, dass Ihre Anpassungen erhalten bleiben.
  • Nachteile sehe ich durch das Child Theme nicht.

Schritt 1 – wo wird das Storefront Child Theme auf dem Webspace gespeichert?

Starten Sie Ihr FTP-Programm und verbinden Sie sich mit Ihrem Webspace. Rufen Sie dort folgendes Verzeichnis auf: IHR WORDPRESS VERZEICHNS/wp-content/themes. In diesem Verzeichnis muss das Verzeichnis storefront für das von Ihnen installierte Storefront Theme vorhanden sein. Ihr zukünftiges Storefront Child Theme Verzeichnis wird ebenfalls im IHR WORDPRESS VERZEICHNS/wp-content/themes Verzeichnis gespeichert.

Themeverzeichnis von WordPress

Das Storefront Child Theme wird im themes-Verzeichnis gespeichert.

Schritt 2 – erstellen Sie das Child Theme Verzeichnis auf Ihrem PC

Achten Sie beim Erstellen des Verzeichnisses storefront-child bitte auf die Kleinschreibung und den Bindestrich im Verzeichnisnamen. Die benötigten Dateien für das Storefront Child Theme werden Sie in diesem Verzeichnis anlegen.

Ein Child Theme besteht am Anfang aus drei Dateien:

Schritt 3 – styles.css erstellen

Öffnen Sie einen sogenannten ASCII-Editor. Unter Windows zum Beispiel Notepad++, unter macOS Textedit. Ich benutze den kostenlosen Microsoft „Visual Studio Code“ Editor für macOS. Den gibt es auch für Windows und Debian. Microsoft stellt diesen wirklich guten und kostenlosen Code-Editor übergreifend, für alle aktuellen Betriebssysteme zur Verfügung.

https://code.visualstudio.com/

Kopieren Sie den folgenden Code und fügen Sie ihn in Ihrem Editor ein. Dann speichern Sie die Datei unter dem Dateinamen styles.css im „storefront-child“ Verzeichnis.

/*
  Theme Name:   Storefront Child Theme
  Description:  My Child of Storefront
  Author:       Frank Kunert
  Author URI:   https://tekki-tipps.de
  Template:     storefront
  Version:      1.0
  Text Domain:  storefront-child
*/

/*
 * Add your own custom css below this text.
 */

Der „Theme Name“ wird im Dashboard als Themename angezeigt. Die „Description” sehen Sie im Dashboard wenn Sie für das Theme “Details” anklicken. Dort wird auch der Autorname mit der „Author URI“ verlinkt und die Versionsnummer angezeigt.

Die Zeile „Template“ sagt WordPress welches Theme das Parent Theme ist. In unserem Fall storefront. Unterhalb von „Add your own custom css below this text“ können Sie Ihre eigenen CSS-Angaben einfügen. Das zeige ich weiter unten genauer.

Schritt 4 – functions.php erstellen

Beim Erstellen der functions.php gehen Sie genauso vor. Neue Datei, kopieren des folgenden Codes, einfügen und speichern.

<?php

/**
 * functions.php - Child Theme from Storefront Theme
 */

if ( ! function_exists( 'storefront_child_enqueue_styles' ) ) :
  /**
   * Load parent and child theme styles
   *
   * @author Frank Kunert
   * @since 1.0.0
   */
  function storefront_child_enqueue_styles() {
  
      // enqueue parent styles
      wp_enqueue_style('storefront-style', get_template_directory_uri() .'/style.css');
  
      // enqueue child styles
      wp_enqueue_style('storefront-child', get_stylesheet_directory_uri() .'/style.css', array('storefront-style'));
  
  }
  add_action('wp_enqueue_scripts', 'storefront_child_enqueue_styles');
endif;

/* You can add your own php functions and code snippets below */

Achten Sie bitte auch zukünftig darauf, dass innerhalb der functions.php die öffnende <?php Klammer nicht geschlossen wird. Das ist WordPress spezifisch und eine Regel an die man sich halten muss, sonst geht es daneben.

In Zeile 8 wird sichergestellt, dass die nachfolgende function nur einmal geladen wird. Danach wird die styles.css vom Parent Theme geladen und danach die styles.css des Storefront Child Themes. Die CSS-Anweisungen vom Parent Theme werden durch die Child Themes CSS-Anweisungen überladen. Dadurch können Sie eine gleichnamige CSS-Klasse durch Ihre Anweisung im Child Theme überschreiben. Der letzte gewinnt das Spielchen. Mehr möchte ich an dieser Stelle darüber nicht schreiben. Ich werde in späteren Blogbeiträgen näher auf Erweiterungen der functions.php eingehen.

Schritt 5 – screenshot.png

Dieser Screenshot wird im Dashboard unter Design | Themes angezeigt. Am Anfang haben Sie ja noch kein fertiges Design, aus diesem Grund kann die Datei auch später erstellt werden. Die Größe des Screenshots sollte 1200px breit und 900px hoch sein. Das Fileformat muss png sein. Siehe dazu auch:

https://codex.wordpress.org/Theme_Development#Screenshot

Schritt 6 – Kopieren Sie das lokale Verzeichnis „storefront-child“ auf Ihren Webspace

Nach dem Kopieren wird das Verzeichnis unterhalb des „storefront“ Verzeichnis im Pfad IHR WORDPRESS VERZEICHNS/wp-content/themes angezeigt.

Schritt 7 – Aktivieren des Storefront Child Theme

Aktivieren Sie im Dashboard unter Design | Themes Ihr neu erstelltes Storefront Child Theme. Lassen Sie das Browserfenster mit der Themes Seite auf und rufen Sie in einem neuen Tab die Website auf.

Storefront Child Theme aktivieren

Das Storefront Child Theme wurde aktiviert.

Tadaa – Sie haben Ihr erstes Child Theme erstellt.

Sollten Sie einen Fehler bei dem Erstellen gemacht haben und im Browser nur eine weiße Seite sehen, öffnen Sie den Tab in dem Sie Ihr Child Theme aktiviert haben. Dort aktivieren Sie jetzt wieder das Storefront Theme. Nun sollte die Seite mit dem Storefront Theme wieder wie vorher im Browser zu sehen sein.

Fehlersuche

Kontrollieren Sie die Angaben in der styles.css und functions.php. Sind die Dateinamen alle klein geschrieben? Stimmt der Pfad? Haben Sie den Browsercache geleert und die Seite neu aufgerufen? Achtung, danach sind Sie im anderen Tab automatisch abgemeldet. Öffnen Sie lieber einen anderen Browser.

Einstellungen aus dem Storefront Theme werden zum Teil nicht übernommen

Wenn Sie zum Beispiel im Customizer des Storefront Theme, dass allgemeine Layout auf “linke Sidebar” eingestellt hatten, wird dies durch das Storefront Child Theme nicht übernommen. Das müssen Sie erneut einstellen. Da ich gleich mit dem Storefront Child Theme beginne, kann ich keine genaue Aussage darüber treffen, inwieweit die Übernahme der Customizer Daten umfangreich ist oder nicht.

Wenn Sie viel im Storefront Customizer geändert haben und diese Änderungen im Storefront Child Theme nicht angezeigt werden, müssen Sie diese Einstellungen auch für das Child Theme durchführen. Sie können für die Übernahme dieser Einstellungen ein Plugin benutzen, welches diese Daten exportiert und im Child Theme importiert. Das Plugin heißt „Customizer Export/Import“ – https://wordpress.org/plugins/customizer-export-import/. Getestet habe ich dieses Plugin nicht.

Zitat des Plugin-Autors von Customizer Export/Import

Der Export Ihrer Customizer-Einstellungen ist denkbar einfach. Klicken Sie im Customizer einfach auf die Export-Schaltfläche und die Datei wird automatisch mit Ihren Einstellungen heruntergeladen. Exportdateien werden nach Ihrem Design benannt und können nur zum Importieren von Einstellungen für das Design oder das Child Theme verwendet werden, von dem sie stammen.

Der Import Ihrer Customizer-Einstellungen ist genauso einfach. Wählen Sie die Exportdatei aus, die Sie importieren möchten, wählen Sie aus, ob Sie auch Bilder herunterladen und importieren möchten und klicken Sie anschließend auf die Schaltfläche Importieren. Nachdem Ihre Einstellungen importiert wurden, wird die Seite aktualisiert und Ihr neues Design wird angezeigt.

Kontrolle ob das Storefront Child Theme auch Änderungen akzeptiert

Zur Kontrolle ob Anweisungen in der styles.css auch verarbeitet werden, zeige ich jetzt wie der „Erstellt mit Storefront & WooCommerce“ Link im Footer des Child Themes, unsichtbar gemacht bzw. überschrieben werden kann.

Dazu müssen Sie auf Ihrem PC im Verzeichnis „storefront-child“ die Datei styles.css öffnen und den unterhalb von Zeile 16 angezeigten CSS-Code einfügen, speichern und die Datei per FTP auf Ihren Webspace übertragen.

/*
  Theme Name:   Storefront Child Theme
  Description:  My Child of Storefront
  Author:       Frank Kunert
  Author URI:   https://tekki-tipps.de
  Template:     storefront
  Version:      1.0
  Text Domain:  storefront-child
*/

/*
 * Add your own custom css below this text.
 */

.site-info a {
  display: none;
}
.site-info::after {
  content: ". Ihre Textanpassungen";
}

Kontrollieren Sie danach ob der Eintrag im Footer überschrieben wurde. Eventuell müssen Sie den Browsercache leeren.

Fazit

Wenn keine Schreibfehler vorhanden sind, ist die Installation eines Storefront Child Themes einfach und problemlos. Bei umfangreichen Customizer Änderungen hilft das Plugin „Customizer Export/Import“ den Aufwand so klein wie möglich zu halten.

Kontrolle des SEO Fokus-Keyword: Storefront Child Theme erstellen

Das Fokus-Keyword dieser Seite ist Storefront Child Theme erstellen, daraus wird folgende SEO-Kontroll-Suche:

Google Kontrollsuche

In dem Beitrag WordPress Plugin – Yoast SEO beschreibe ich die Kontroll- und Op­ti­mie­rungs­mög­lich­kei­ten von dem auch für diesen Beitrag benutzten SEO Plugin. Dieser Beitrag wird vom Yoast Seo Plugin mit Lesbarkeit: Verbesserung nötig und SEO: Gut, bewertet.

Wie bewerten Sie diesen Beitrag?

Eine schnelle Klick-Bewertung - möglichst mit 5 Sternen - wäre nett. Ein Kommentar mit Ihren Erfahrungen zu diesem Thema würde mich noch mehr freuen. Beides zusammen ...

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (Bis jetzt keine Bewertung)
Loading...

Ihr Kommentar fehlt hier

Ihre E-Mailadresse wird nicht öffentlich angezeigt. Erforderliche Felder sind mit * markiert.

Wenn im Kommentar ein Link vorhanden ist, muss der Kommentar von mir freigeschaltet werden. Dies kann manchmal etwas dauern. Sie erhalten eine E-Mail wenn der Kommentar freigeschaltet wurde.

Ihre E-Mailadresse wird wegen der Avatar-Integration mit gravatar.com abgeglichen. Nähere Informationen entnehmen Sie bitte meiner Datenschutzerklärung.

Durch die wei­te­re Nut­zung der Web­site stim­men Sie der Ver­wen­dung von Cookies zu. Wei­te­re In­for­ma­tio­nen er­hal­ten Sie unter Cookies und in mei­ner Da­ten­schutz­er­klä­rung.

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen