web-dev-qa-db-ja.com

woocommerce.cssをオーバーライドする最良の方法

Woocommerce.cssをオーバーライドする最良の方法は何ですか？私のstyle.cssでは、それらをオーバーライドするためにそれらのCSSを再度記述し、各CSSの後に！重要を置く必要があります。これはそうするためのベストプラクティスではないと思います。誰かがより良いアイデアを持っていますか？

wordpresswoocommerce
11
user3390591

WooCommerceはデフォルトで3つのスタイルシートをエンキューします。あなたはそれらをすべて無効にすることができます：

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

個々のWooCommerceスタイルシートを無効にする方法の詳細については、それらの デフォルトのスタイルシートを無効にする の記事を参照してください。

16
henrywright

デフォルトのwordpressテーマまたは子テーマ）にあるcustom.cssファイルでwoocommerce.cssをオーバーライドできます。カスタムで何かが発生した場合は、デフォルトのwoocommerce.cssにフォールバックすることもできます。 .cssファイル。

add_action('wp_enqueue_scripts', 'override_woo_frontend_styles');
function override_woo_frontend_styles(){
    $file_general = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/twentyfifteen/css/custom.css';
    if( file_exists($file_general) ){
        wp_dequeue_style('woocommerce-general');
        wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/css/custom.css');
    }
}

同じことが他のwoocommerceフロントエンドスタイル（woocommerce-layoutおよびwoocommerce-smallscreen）にも当てはまります。

子テーマでこれを行う場合は、get_template_directory_uri（）の代わりにget_stylesheet_directory_uri（）を使用し、子テーマ名に従ってファイルパスを変更します。

4
sherfa

Carrie Dillsによる 記事 には別のアプローチがあります。彼女は創世記のテーマを使用していますが、私が思う他のテーマのために作り直すことができます。

本質的に、彼女が推奨するのは、スタイルのロード順序を変更して、テーマのスタイルシートがWooCommerceスタイルシートのロード後になるようにすることです。つまり、より高い優先度でキューに入れられます。

ジェネシスの場合は以下のようになります。同様のフックを使用してフレームワーク/テーマのスタイルシートの読み込みにアクセスできる場合は、同じことを行うことができます。

/**
 * Remove Genesis child theme style sheet
 * @uses  genesis_meta  <genesis/lib/css/load-styles.php>
*/ 
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );

/**
 * Enqueue Genesis child theme style sheet at higher priority
 * @uses wp_enqueue_scripts <http://codex.wordpress.org/Function_Reference/wp_enqueue_style>
 */
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 15 );
3
Pat Gilmour

私のアプローチは、CSSの原則cascadeに従うことです。したがって、！importantが定義されていない場合、基本的に、最後にロードするものが以前のルールをオーバーライドします。

ここをチェックしてください：

//This is the order the css load by default, at leat on the sites I have worked!!!
<link rel="stylesheet" href="http:/css/custom_styles.css" type="text/css" media="all">
<link rel="stylesheet" href="http:/css/woocomerce.css" type="text/css" media="all">

では、woocommerceが読み込まれた後にカスタムCSSを読み込むというアイデアは何ですか。

方法1：スタイルの[add_action]に低優先度を追加 add_action のように：

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE);
}
// (the higher the number the lowest Priority)
add_action('wp_enqueue_scripts', 'load_my_css', 5000);

方法2：woocommerceスタイルを削除して、独自のスタイルを作成します

// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

方法3：カスタムスタイルに依存関係配列を追加します

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE, array(DEPENDECIES HERE));
}

メソッドの1つが役立つことを願っています。

1
T04435