web-dev-qa-db-ja.com

子テーマスタイルシートを優先する

私は子テーマを作成しました、そしてメインのstyle.cssは完璧に動作します。しかし、親テーマには別のスタイルシートがあり、これをインポートして子テーマにも作成して代わりに使用したいと思います。

親テーマの構造 - ./woocommerce/woo.css
子テーマの構造 - ./woocommerce/woo.css（手動で作成）

今、私は以下のように子テーマのfunction.phpの両方のスタイルシートをエンキューしました。

function fruitful_load_parent_stylesheets() {
    wp_enqueue_style( 'layout', get_template_directory_uri() . '/woocommerce/woo.css' );
}
add_action( 'wp_enqueue_scripts', 'fruitful_load_parent_stylesheets' );

function fruitful_load_child_stylesheets(){
    wp_enqueue_style( 'woo', get_stylesheet_directory_uri() . '/woocommerce/woo.css');
}
add_action('wp_enqueue_scripts', 'fruitful_load_child_stylesheets');

さて、子テーマのwoo.cssにスタイルを追加したとしても、それがI ！important itになるまではうまくいきません。

です

child-themewp-enqueue-stylestylesheet
1
Nimsrules

あなたの子供のテーマのstylesheetは通常自動的にロードされます。そうでない場合は、それをenqueueする必要があります。依存関係として 'parent-style'を設定すると、子テーマstylesheetがそれの後にロードされるようになります。

/**
 * Enqueue theme styles (parent first, child second)
 * 
 */
function wpse218610_theme_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/woocommerce/woo.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/woocommerce/woo.css', array( $parent_style ) );
}
add_action( 'wp_enqueue_scripts', 'wpse218610_theme_styles' );

注：追加情報については、 テーマ開発者ハンドブック を参照してください。

2
Charles

おそらく、それぞれのadd_actionに優先順位の値を追加して、一方が他方の前に実行されるようにすることができます。

add_action( 'wp_enqueue_scripts', 'fruitful_load_parent_stylesheets', 10 );
add_action('wp_enqueue_scripts', 'fruitful_load_child_stylesheets', 20 );

WordPressコーデックスadd_action（）

4
goalsquid

私は子供のテーマを後でロードするようになりました。親スタイルをデキューして登録解除してから、親スタイルと子スタイルをエンキューする必要がありました。お役に立てれば

親functions.phpは持っています

add_action('wp_enqueue_scripts', 'load_parent_style', 10);
function load_parent_style() {
    wp_enqueue_style('parent-theme-style'); // parent theme code
}

子functions.phpは持っています

add_action('wp_enqueue_scripts', 'load_child_style', 20);
function load_child_style() {
  //register & enqueue parent with new name 
  wp_register_style('parent-style', $url, array($deps));
  wp_enqueue_style('parent-style'); 

  // dequeue & deregister parent's theme handle
  wp_dequeue_style('parent-theme-style'); // from parent theme
  wp_deregister_style('parent-theme-style'); 

  // register & enqueue child style
  wp_register_style('child-style', get_stylesheet_uri(), array('parent-style'));
  wp_enqueue_style('child-style');
}
1
Vemman