親テーマの後に子テーマのスタイルシートを読み込ませる

OnePressの子テーマをカスタマイズする際に、
子テーマのstyle.cssを親テーマより後に読み込ませるための方法に苦労したのでメモしておきます。

子テーマのstyle.cssは、親テーマのfunctions.phpでwp_enqueue_styleにより読み込まれている。

子テーマのfunctions.phpは親テーマのfunctions.phpより先に実行されるため、親テーマのstyle.cssが後に読み込まれてしまいます。
通常のwp_enqueue_style(‘child-style’,子テーマのcss, array(‘親テーマのhandle’))では、子テーマを後に読み込ませることはできない。

そこでいくつかの参考サイトを調べた結果、親テーマの後に実行する’after_setup_theme’というhookと使って解決した。

通常は、以下の方法でキューにスタイルシートをキューに入れるが、

function child_themes_style() {
	// 子テーマcssの読込み
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
// スタイルシートをキューに追加
add_action( 'wp_enqueue_scripts', 'child_themes_style' );

親テーマで、wp_enqueue_styleを使ってスタイルシートを読み込ませている場合は、

function child_themes_style() {
	// 子テーマcssの読込み
	wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}

function after_parent_enqueue_styles() {
	// スタイルシートをキューに追加
	add_action( 'wp_enqueue_scripts', 'child_themes_style' );
}

// 親テーマの後に実行
add_action( 'after_setup_theme', 'after_parent_enqueue_styles' );

とりあえず、親テーマの後に子テーマのスタイルシートを読み込ませることに成功はした。
子テーマのwp_enqueue_styleで親テーマのハンドルの後に読み込むコードは書いていないが、必要かは不明です。


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す