WordPressの子テーマで親テーマのstyle.cssを@importじゃなく読み込みたい
Posted by admin at 12:02 日時 2014/05/07
WordPressで子テーマを作る際、Codexには親テーマのスタイルシートを @import で読み込めばいいよともう何年も書いてあるんですが、@importを使うのは表示速度の問題などでやっぱり抵抗がある。
Codexに記載されている子テーマのstyle.cssの作成例:
/* Theme Name: Twenty Fourteen Child Theme URI: http://example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fourteen-child */ @import url("../twentyfourteen/style.css"); /* =Theme customization starts here -------------------------------------------------------------- */
そこで、このブログではこんな風にしてみました。
子テーマのstyle.css
/* Theme Name: notnil creation weblog Theme URI: http://notnil-creative.com/ Version: 1.0 Author: Takuro Hishikawa (@HissyNC) Template: match */
子テーマのfunctions.php
<?php function child_theme_styles() { // 親テーマのスタイルシートを削除 wp_dequeue_style( 'match-style' ); // 親テーマのスタイルシートを別名で再登録 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); // 親テーマを依存CSSとして登録した上で、子テーマのスタイルシートを登録 // (こうしないと、子テーマの方が先に読み込まれたりする) wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style'), '1.0.1' ); } // アクションフックに登録。親テーマより後で起動するため、第3引数を指定 add_action( 'wp_enqueue_scripts', 'child_theme_styles', 20 );
そんだけ。