WordPressで子テーマを作る時はGulpでまとめて置換すると便利

WordPressで子テーマを作る時に背景色とかの色を変えたいことはよくあるんですが、手作業でひとつずつやってるとモグラ叩きになってしまって大変ですよね。

そういう時は以下のようにGulpで一括で置換してしまうと便利。

'use strict';

var gulp = require( 'gulp' );
var replace = require('gulp-replace');
var rename = require('gulp-rename')

gulp.task( 'twentythirteen_style', function () {
    return gulp.src( [
            '../twentythirteen/style.css'
        ] )
        .pipe( replace( '#f7f5e7', '#fafafa' ) )
        .pipe( rename( {
            basename: 'twentythirteen',
            extname: '.css'
        } ) )
        .pipe( gulp.dest( 'css' ) );
});

gulp.task( 'default', [ 'twentythirteen_style' ], function () {
    // その他のタスク
} );

上の例では、Twenty ThirteenのCSSの#f7f5e7#fafafaにまとめて置換して、子テーマのcss/twentythirteen.cssとして設置しています。

あとは子テーマのfunctions.phpに以下のように記述すればオッケー。

add_action( 'wp_enqueue_scripts', 'twentythirteen_parent_theme_enqueue_styles' );

function twentythirteen_parent_theme_enqueue_styles() {
    wp_enqueue_style( 'twentythirteen-style',
        get_stylesheet_directory_uri() . '/css/twentythirteen.css',
        array(),
        '1.0.0'
    );

    wp_enqueue_style( 'xxxx-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('twentythirteen-style'),
        '1.0.0'
    );
}

他にも横幅を変えるとかはこのやり方が確実かもです。

そして、それ以外の作業は子テーマ側のCSSで上書きしていった方が平和です。

 

あっ、なぜこうしたほうがいいかというと親テーマのバージョンアップに対応するためですね。

何がどう変わるか予測することは不可能なので。

 

追記

特定のセレクタに対して親テーマのスタイルを全面的に否定したい時はこんな風にハックするといいかも。賛否両論ありそうだけど。笑

.pipe( replace( 'input', '__' ) )

要はセレクタを存在しないもの置換してしまうということ。

ブラウザのインスペクタとかではエラーは出ませんでした。