it-swarm.com.de

Überschreiben von Stilen in der Warteschlange mithilfe eines untergeordneten Themas

Ich erstelle ein untergeordnetes Thema (mein erstes in über 3 Jahren) eines WooCommerce-Themas und habe einige Probleme mit der Tatsache, dass einige der Layoutstile im übergeordneten Thema enthalten sind und ich !important hinzufügen muss Alle Stile, die ich überschreiben möchte.

Dies ist der aktuelle Enqueue-Code in der Datei functions.php des übergeordneten Themes.

if ( ! is_admin() ) { add_action( 'wp_enqueue_scripts', 'woo_load_frontend_css', 20 ); }

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
function woo_load_frontend_css () {
    wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );
    wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' );
    wp_enqueue_style( 'theme-stylesheet' );
    wp_enqueue_style( 'woo-layout' );
} // End woo_load_frontend_css()
}

Was ich tun muss, ist das untergeordnete Thema CSS nach der vom übergeordneten Thema geladenen layout.css-Datei zu laden.

2
Poisontonomes

Ich hatte das gleiche Problem und die Antwort von epilektric brachte mich auf den richtigen Weg.

Ich verwende "function" wootheme und es muss das übergeordnete style.css geladen werden, bevor ein anderes übergeordnetes css layout.css aufgerufen wird. Diese Reihenfolge muss also beim Laden der style.css des untergeordneten Themas beibehalten werden.

Um zu vermeiden, dass !important zum Überschreiben aller Stile verwendet wird, müssen die Stildateien in der folgenden Reihenfolge geladen werden:

  1. Übergeordnetes Thema style.css
  2. Übergeordnetes Thema layout.css
  3. Style.css des Kinderthemas

Um dies zu erreichen, müssen wir Folgendes ändern:

  1. Style.css des Kinderthemas
  2. Funktionen des Kinderthemas.php

Style.css des Kinderthemas

Ändern Sie diese Datei, um die CSS-Dateien beider übergeordneten Themen in der richtigen Reihenfolge zu importieren:

@import url("../function/style.css");
@import url("../function/css/layout.css");

Funktionen des Kinderthemas.php

Fügen Sie dies dann Ihrer functions.php hinzu, um zu vermeiden, dass layout.css (woo-layout) erneut geladen wird, und um zu vermeiden, dass das CSS des untergeordneten Themas (style.css) geladen wird:

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
    function woo_load_frontend_css () {
        // comment this, as we will be loading this css with a different priority
        //wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );

        // we can register the style here for future manipulation...
        wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' );

        // comment this, as we will be loading this css with a different priority
        //wp_enqueue_style( 'theme-stylesheet' );

        // ... but we will not be enqueuing it, instead we will import it in the child theme's style.css
        //wp_enqueue_style( 'woo-layout' );
    } // End woo_load_frontend_css()
}

Sie können auch eine leere Funktion wie diese laden, um den gleichen Effekt zu erzielen:

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
    function woo_load_frontend_css () {

    } // End woo_load_frontend_css()
}

Dann registriere dich und füge die CSS deines Kinderthemas hinzu, indem du diese Datei direkt nach dem vorherigen function woo_load_frontend_css zu der Datei functions.php deines Kinderthemas hinzufügst:

function cherrypick_child_enqueue_css()
{
    wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );
    wp_enqueue_style( 'theme-stylesheet' );
}
add_action( 'wp_enqueue_scripts', 'cherrypick_child_enqueue_css', 99 ); // using priority 99 we make sure the child theme style.css will be loaded after all other css

Jetzt werden alle Stylesheet-Dateien in der richtigen Reihenfolge geladen.

3
estepix

Da die Woo-Funktion in if( ! function_exists('function_name') ) eingeschlossen ist, können Sie die Funktion in der functions.php-Datei Ihres untergeordneten Themas überschreiben.

Fügen Sie die Funktion der Datei hinzu und passen Sie die Warteschlangenreihenfolge an, um style.css nach layout.css zu laden.

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
    function woo_load_frontend_css () {
        wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );
        wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' );

        wp_enqueue_style( 'woo-layout' );

        //load stylesheet after layout.
        wp_enqueue_style( 'theme-stylesheet' );

    } // End woo_load_frontend_css()
}
1
epilektric