Blog

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 );

そんだけ。


Share this entry