Child Theme

Warum ein Child-Theme nutzen?

Child Themes erlauben es Ihnen in WordPress ein vorhandenes Theme zu erweitern und stärker an Ihre Bedürfnisse anzupassen.

Idealerweise beinhaltet es nur Änderungen gegenüber dem Original, so dass bei Updates der Prüfaufwand gering gehalten wird.

Ein Child-Theme verhält sich im Ursprungszustand zunächst genauso, wie das Original-Theme – einzig die von Ihnen vorgenommenen Veränderungen machen dann den Unterschied.

Sie können also bei einem neuen Projekt auch direkt das Parent-Theme sowie das Child-Theme installieren oder dies zu beliebiger Zeit nachholen.

Separation of Concerns

Theme- und Plugin Property

Das SV100 Theme folgt den Best Practices und bildet daher keine Plugin-Funktionalität ab. Dies sollten Sie auch bei einem Child-Theme beibehalten. Lesen Sie mehr zu den Aufgaben eines WordPress-Themes.

Erste Schritte

Installation

Download SV100 Child-Theme

Installation

Laden Sie sich das zip-Archiv herunter und entpacken Sie es.
Sie finden darin das Verzeichnis sv100_child und eine style.css.
Laden Sie das Verzeichnis zusammen mit der style.css in den Ordner /wp-content/themes/ Ihrer WordPress Installation hoch.
Aktivieren Sie das Child-Theme.

Tipp

Alternativ können Sie das Child-Theme als zip-Archiv auch über WP-Admin unter „Themes“ hochladen

Grundlagen

Struktur

Bei Anpassungen über das Child-Theme werden Sie vor allem die Module des Themes erweitern. Hierbei sollten Sie den Aufbau des Themes und der Theme Module kennen.

Theme Struktur

Theme Modul Struktur

Minimum Viable Theme Modul

Modul im Child Theme registrieren

Erstellen Sie im Child-Theme in der gleichen Verzeichnis-Hierarchie, wie im Eltern-Theme ein Verzeichnis mit dem Namen des Moduls, das Sie verändern möchten, also beispielsweise:

/sv100_child/lib/modules/sv_common/

Darin erstellen Sie eine PHP-Datei mit dem Namen des Moduls und nutzen das Modul-Snippet. Passen Sie es ggf. an, damit die Klassennamen mit dem Modul übereinstimmen:

<?php
namespace sv100_child;

class sv_common extends \sv100\sv_common {
	
}Code-Sprache: PHP (php)

Damit ist die Vorbereitung abgeschlossen und in den nächsten Punkten erfahren Sie die verschiedenen Möglichkeiten, ein Modul zu erweitern.

Theme Dateien ersetzen

Ersetzen von CSS und JS

Wenn Sie CSS- oder JS-Dateien vollständig durch eigene Versionen ersetzen möchten, dann müssen Sie die neuen Versionen nur noch in der gleichen Verzeichnis-Hierarchie im Child-Theme-Modul speichern.

/wp-content/themes/sv100_child/lib/modules/sv_common/lib/css/common/common.css

Das SV100-Theme erkennt automatisch, dass im Child-Theme Dateien an der gleichen Stelle, wie im Eltern-Theme sind und lädt somit die Child-Theme-Dateien anstelle der Originaldateien.

Zusätzliche Scripts registrieren

CSS und JS hinzufügen

<?php
namespace sv100_child;

class sv_common extends \sv100\sv_common {
	protected function register_scripts(): \sv100\sv_common {
		parent::register_scripts();

		$this->get_script( 'common_child' )
			->set_is_gutenberg()
			->set_path( 'lib/css/common/common_child.css' );

		return $this;
	}
}Code-Sprache: PHP (php)

In diesem Code-Snippet wird gezeigt, wie die ursprüngliche Methode register_scripts erweitert wird, um zusätzliche Scripts zu laden.

In manchen Modulen müssen die Script zusätzlich enqueued werden.

Zusätzliche Scripts registrieren

Block Styles hinzufügen

<?php
namespace sv100_child;

class sv_common extends \sv100\sv_common {
	public function init(): \sv100\sv_common {
		parent::init();

		$this->block_styles();
		
		return $this;
	}
	
	protected function register_scripts(): \sv100\sv_common {
		parent::register_scripts();

		$this->get_script( 'gutenslider_box_shadow' )
			->set_is_gutenberg()
			->set_path( 'lib/css/common/style_gutenslider_box_shadow.css' );

		return $this;
	}
	
	public function enqueue_scripts(): \sv100\sv_common {
		parent::enqueue_scripts();

		if($this->has_block_frontend('eedee-block-gutenslider')){
			$this->get_script( 'gutenslider_box_shadow' )->set_is_enqueued();
		}
		
		return $this;
	}
	protected function block_styles(): \sv100\sv_common {
		$this->get_script('block_child')
			->set_path('lib/js/backend/block_extra_styles_child.js')
			->set_type('js')
			->set_is_gutenberg()
			->set_is_backend()
			->set_deps(array('wp-blocks', 'wp-dom'))
			->set_is_enqueued();

		return $this;
	}
}Code-Sprache: PHP (php)

Hier wird die init Methode erweitert, um zusätzliche Block Styles hinzuzufügen.

Best Practice ist es, wenn für einen Gutenberg-Block bereits ein Theme-Modul existiert, dieses im Child-Theme zu erweitern.

Bei Drittanbieter-Plugins bietet sich aber auch das common-Modul an. In diesem Beispiel wird der Gutenslider-Block um einen eigenen Style erweitert.

Damit dieser nur ausgegeben wird, wenn der Block auf der jeweiligen Seite aktiv ist, gibt es hier über die has_block_frontend-Methode eine entsprechende Abfrage.

wp.blocks.registerBlockStyle( 'eedee/block-gutenslider', {
	name: 'sv-box-shadow',
	label: 'Box Shadow'
} );Code-Sprache: JavaScript (javascript)

Zusätzlich muss via Javascript der neue Block-Style registriert werden. Hierzu wurde bereits im Child-Modul die nötige JS-Datei registriert:

lib/js/backend/block_extra_styles_child.js

.wp-block-eedee-block-gutenslider.is-style-sv-box-shadow .swiper-slide.swiper-slide-active .slide-content > * {
	box-shadow: 0 1px 16px 0 rgba(0, 0, 0, 0.3);
}Code-Sprache: CSS (css)

Hier die ebenfalls im Child-Module bereits registrierte CSS-Datei für den Style.

lib/css/common/style_gutenslider_box_shadow.css

Nicht vergessen

Theme Cache erneuern

In vielen Modulen ist ein Cache aktiv, so dass die CSS-Generierung zwischengespeichert wird. Passen Sie etwas an der common.css oder default.css an, denken Sie daran danach den Theme-Cache zu erneuern.