so geht´s
Hier ist das neueste Child-Theme vom Oktober 2024. Es beinhaltet alle notwendigen Dateien und darüber hinaus mehrere css-Dateien.
Zur besseren Übersichtlichkeit habe ich im Child-Theme die css-Dateien in mehrere aufgeteilt.
Es gibt standardmäßig die style.css, darüber hinaus die meine-schrift.css, hier ist als Beispiel schon der Schrifttyp „Michroma“ integriert, die spaltenstyle.css, hier ist festgelegt, dass bei Bedarf, die Rows ihre Spaltigkeit bei Mobile-Geräten wie Handy und Tablet ihre Spalten behalten.
Die functions.php
Es erwies sich als aufwendig der functions.php beizubringen, dass sie auf mehrere verschiedene css-Dateien zugreifen kann. Um das zu erreichen, muss folgende Code-Zeile pro css-Datei eingefügt werden.
Das ist die Zeile...
// Zusätzliche CSS-Dateien einbinden
wp_enqueue_style( 'meine-schrift', get_stylesheet_directory_uri() . '/meine-schrift.css', array( 'child-style' ), '1.0.0' );
wp_enqueue_style( 'spaltenstyle', get_stylesheet_directory_uri() . '/spaltenstyle.css', array( 'child-style' ), '1.0.0' );function.php
<?php
function divi_child_enqueue_assets() {
// Parent-Theme CSS einbinden
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// Child-Theme Haupt-CSS einbinden
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ), wp_get_theme()->get( 'Version' ) );
// Zusätzliche CSS-Dateien einbinden
wp_enqueue_style( 'meine-schrift', get_stylesheet_directory_uri() . '/meine-schrift.css', array( 'child-style' ), '1.0.0' );
wp_enqueue_style( 'spaltenstyle', get_stylesheet_directory_uri() . '/spaltenstyle.css', array( 'child-style' ), '1.0.0' );
// JavaScript-Datei einbinden (im Footer)
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/script.js', array( 'jquery' ), '1.0.0', true );
}
// Action Hook, um CSS und JS zu laden
add_action( 'wp_enqueue_scripts', 'divi_child_enqueue_assets' );
// Parent Theme entfernen
add_filter( 'wp_prepare_themes_for_js', 'kill_themes' );
function kill_themes( $themes ) {
unset( $themes[ 'Divi' ] );
return $themes;
}
?>Das ist ein Beispiel für eine functions.php
Zeile 6 darf nicht verändert werden!
In Zeile 7, 8 und 9 stehen die weiteren ausgelagerten css bzw. js Dateien.
Das kann man beliebig erweitern, dabei ist unbedingt auf korrekte Schreibweise zu achten.
