web-dev-qa-db-ja.com

子テーマを使用してキューに入れられたスタイルをオーバーライドする方法

私はWooCommerceテーマの子テーマ（3年以上ぶりに作成）を作成していますが、一部のレイアウトスタイルが親テーマにエンキューされていることに問題があり、!importantを上書きしたいすべてのスタイル。

これは、親テーマのfunctions.phpの現在のエンキューコードです。

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()
}

私がする必要があるのは、親テーマによってロードされたlayout.cssファイルの後に子テーマcssをロードすることです。

functionschild-themewp-enqueue-style
2
Poisontonomes

私は同じ問題を抱えていて、てんかんの答えは私を正しい方向へ導いた。

私は "function" woothemeを使用しており、それはlayout.cssと呼ばれる別の親cssの前に親style.cssをロードする必要があります。そのため、子テーマのstyle.cssをロードするときにはこの順序を守る必要があります。

したがって基本的に、!importantを使用してすべてのスタイルをオーバーライドしないようにするには、次の順序でスタイルファイルを読み込む必要があります。

  1. 親テーマのstyle.css
  2. 親テーマのlayout.css
  3. 子テーマのstyle.css

それを達成するために、我々は変更する必要があります：

  1. 子テーマのstyle.css
  2. 子テーマの機能.php

子テーマのstyle.css

このファイルを変更して、両方の親テーマのcssファイルを正しい順序でインポートします。

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

子テーマの機能.php

それから、これをfunctions.phpに追加して、layout.css（woo-layout）の再読み込みを避け、子テーマのcss（style.css）の読み込みを避けます。

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()
}

同じ効果を得るために、このように空の関数をロードすることもできます。

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

    } // End woo_load_frontend_css()
}

次に、前のfunction woo_load_frontend_cssの直後に、これを子テーマのfunctions.phpファイルに追加して、子テーマのcssを登録して追加します。

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

今すぐすべてのスタイルシートファイルが正しい順序で読み込まれます。

3
estepix

Woo関数はif( ! function_exists('function_name') )でラップされているため、子テーマのfunctions.phpファイルで関数をオーバーライドできます。

関数をファイルに追加してから、キューの順序を調整してstyle.cssの後にlayout.cssをロードします。

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