Skip to content

Instantly share code, notes, and snippets.

@Nerdies24
Created January 17, 2023 08:22
Show Gist options
  • Save Nerdies24/65c5e4c38f0e32afa352253b7cc91cb3 to your computer and use it in GitHub Desktop.
Save Nerdies24/65c5e4c38f0e32afa352253b7cc91cb3 to your computer and use it in GitHub Desktop.
Zusätzliche CSS Datei in einem Child Theme laden

1. Eine zusätzliche CSS Datei in einem Child Theme laden

Dieser Code fügt eine neue Aktion namens "wp_enqueue_scripts" hinzu, die beim Laden einer Seite ausgeführt wird und die CSS-Datei "styles.css" aus dem Unterverzeichnis "css" im Verzeichnis des Child-Themes hinzufügt.

function child_theme_styles() {
    wp_enqueue_style( 'child-theme-styles', get_stylesheet_directory_uri() . '/css/styles.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );

2. Eine zusätzliche CSS Datei für nur eine bestimmte ID in einem Child Theme laden

Dieser Code fügt eine neue Aktion namens "wp_enqueue_scripts" hinzu, die beim Laden einer Seite ausgeführt wird. Die Bedingung is_page(123) überprüft, ob die aktuelle Seite die ID 123 hat, und wenn dies der Fall ist, wird die CSS-Datei "specific-page.css" aus dem Unterverzeichnis "css" im Verzeichnis des Child-Themes hinzugefügt.

function child_theme_specific_page_styles() {
    if( is_page(123) ) {
        wp_enqueue_style( 'child-theme-specific-page-styles', get_stylesheet_directory_uri() . '/css/specific-page.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'child_theme_specific_page_styles' );

3. Eine zusätzliche CSS Datei für mehrere bestimmte ID`s in einem Child Theme laden

Dieser Code fügt eine neue Aktion namens "wp_enqueue_scripts" hinzu, die beim Laden einer Seite ausgeführt wird. Die Bedingung is_page( array(123,456) ) überprüft, ob die aktuelle Seite eine der ID's 123 oder 456 hat, und wenn dies der Fall ist, wird die CSS-Datei "specific-pages.css" aus dem Unterverzeichnis "css" im Verzeichnis des Child-Themes hinzugefügt.

function child_theme_specific_pages_styles() {
    if( is_page( array(123,456) ) ) {
        wp_enqueue_style( 'child-theme-specific-pages-styles', get_stylesheet_directory_uri() . '/css/specific-pages.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'child_theme_specific_pages_styles' );

4. Mehrere zusätzliche CSS Dateien in einem Child Theme laden

In diesem Beispiel werden drei CSS-Dateien namens "style1.css", "style2.css" und "style3.css" aus dem Unterordner "css" geladen. Sie können so viele Dateien hinzufügen oder entfernen, wie Sie möchten, indem Sie oder entfernen Sie die entsprechenden Zeilen.

function child_theme_styles() {
   wp_enqueue_style( 'style1', get_stylesheet_directory_uri() . '/css/style1.css' );
   wp_enqueue_style( 'style2', get_stylesheet_directory_uri() . '/css/style2.css' );
   wp_enqueue_style( 'style3', get_stylesheet_directory_uri() . '/css/style3.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment