webdevqa.jp.net

子供をテーマにしたスタイルシートの順序

親テーマにはスタイルを含めるための次のコードがあります。

function blue_planet_scripts() {
    wp_enqueue_style( 'blue-planet-style', get_stylesheet_uri() );
    wp_enqueue_style( 'blue-planet-style-bootstrap', get_template_directory_uri().'/css/bootstrap.min.css', false ,'3.0.0' );
    wp_enqueue_style( 'blue-planet-style-responsive', get_template_directory_uri().'/css/responsive.css', false ,'' ); 
}
add_action( 'wp_enqueue_scripts', 'blue_planet_scripts' );

子テーマでは、親テーマのスタイルをインポートしたところです。

@import url("../blue-planet/style.css");

しかし、スタイルシートの順序は次のとおりです。

  • style.css(子テーマ)
  • bootstrap.min.css
  • respond.css

最後に子テーマのstyle.cssを順番に含めるには、親関数にどのような変更が必要ですか?私は欲しい:

  • bootstrap.min.css
  • respond.css
  • style.css(子テーマ)
1
Nilambar

関数wp_enqueue_styleにはdependsのパラメータ$depsがあります。

$ deps(array)(オプション)このスタイルシートが依存しているスタイルシートのハンドルの配列。このスタイルシートの前にロードする必要があるスタイルシート。依存関係がない場合はfalseです。デフォルト:array()

このパラメータを使用して依存関係を定義すると、順序が決まります。

function blue_planet_scripts() {
    wp_enqueue_style( 'blue-planet-style', get_stylesheet_uri() );
    wp_enqueue_style( 'blue-planet-style-bootstrap', get_template_directory_uri().'/css/bootstrap.min.css', 'blue-planet-style' ,'3.0.0' );
    wp_enqueue_style( 'blue-planet-style-responsive', get_template_directory_uri().'/css/responsive.css', 'blue-planet-style-bootstrap','' ); 
}
add_action( 'wp_enqueue_scripts', 'blue_planet_scripts' );
1
bueltge