Untergeordnetes css von Childtheme wird nicht eingebunden

  • Hallo zusammen,
    ich habe ein Child-Theme vom Theme Twenty Twelve erstellt inkl. eigener css-Datei, functions.php. Bislang funktioniert alles.
    Das Original-WP-Theme hat eine weitere untergeordnete css-Datei, die in einem Unterordner vom Theme "css" liegt. Dieses möchte ich überschreiben.
    Meine functions.php vom Child-Theme habe ich mit folgendem Code ergänzt:

    function block_style() {
    wp_enqueue_style('block-styles', get_template_directory_uri().'/css/blocks.css');
    }
    add_action('wp_enqueue_scripts', 'block_style');

    Die zu überschreibende Datei blocks.css liegt im Unterordner meines Child-Themes.
    Dennoch wird das css nicht "gezogen".
    Habe ich einen Fehler im Code?
    Kann mir jemand einen Tipp geben?

    Vielen Dank vorab
    Flo

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • 1. [FONT=Courier New]get_template_directory_uri()[/FONT] zeigt auf den Parent Theme Ordner, [FONT=Courier New]get_stylesheet_directory_uri()[/FONT] würde auf den Child Theme Ordner zeigen
    2. Das korrekte Handle zum Überschreiben wäre [FONT=Courier New]twentytwelve-block-style[/FONT] nicht wie in Deinem Code[FONT=Courier New] block-styles[/FONT]
    3. Die Dependency wäre [FONT=Courier New]twentytwelve-style[/FONT] damit die Reihenfolge des Ladens passt, fehlt in Deinem Code

    Versuche es z.B. damit:

    Code
    function block_style() {
        wp_enqueue_style( 'twentytwelve-block-style', get_stylesheet_directory_uri() . '/css/blocks.css', array( 'twentytwelve-style' ) );
    }
    add_action( 'wp_enqueue_scripts', 'block_style' );

    Wichtig: Das macht man aber nur so, wenn man die [FONT=Courier New]blocks.css[/FONT] des Parent Themes wirklich komplett weg haben bzw. überlagern will. Üblicherweise ergänzt man eigenes CSS dazu über eine zusätzliche Datei im Child Theme, das nur als Anmerkung.

  • Herzlichen Dank, das habe ich nun verstanden und es funktioniert auch.

    Gerne würde ich so verfahren, wie Du angemerkt hast, über ein zusätzliches CSS im Child-Theme.
    Hatte das auch schon vorher ausprobiert, doch alles wurde von der Original blocks.css überschrieben.

    Ich hatte in der Child-functions.php folgenden Code eingefügt:

    function add_css() {
    wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri().'/style.css' );
    wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/css/custom.css' );
    }
    add_action( 'wp_enqueue_scripts', 'add_css' );

    Die custom.css wird gezogen, jedoch von der blocks.css überschrieben, da sie als letzte in der Reihenfolge ist.

    Was kann ich tun, damit die custom.css nicht überschrieben wird?

  • Wenn Du Dein [FONT=Courier New]custom.css[/FONT] nach der [FONT=Courier New]blocks.css[/FONT] des Parent Theme laden willst, musst Du das Handle [FONT=Courier New]twentytwelve-block-style[/FONT] der Datei aus dem Parent Theme in Deinem Code als Dependency = Abhängigkeit mit angeben, z.B. so:

    Code
    function add_css() {
        wp_enqueue_style( 'custom-child', get_stylesheet_directory_uri() . '/css/custom.css', array( 'twentytwelve-block-style' ) );
    }
    add_action( 'wp_enqueue_scripts', 'add_css' );


    Siehe auch [FONT=Courier New]wp_enqueue_style()[/FONT] Dokumentation.

  • Ui, die Dokumentation und die Skriptabhängigkeiten sind im Prinzip verständlich, da ich aber kein Programmierer bin, hätte ich das auch mit dieser Dokumentation bestimmt nicht erfolgreich und wenn doch, vor allem nicht so schnell umsetzen können. Ich bin deshalb sehr froh über Deine Anleitung. Vielen Dank.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!