WordPressの(子)テーマをストレスフリーで開発する環境の構築

ここのテーマをいじるのにあたって、快適な環境じゃないと嫌だというワガママな僕が、自分のために理想環境を構築したので記しておきます。
ちなみに、僕はここを解説するまでWordPressは完全未経験エリアでした。子テーマっていうものがあるなんて昨日知ったぐらいです。
Webサイトの開発を最近も何度かしていた僕は、WordPress界隈は時代から置いて行かれているのではないかと思いました。まるで5年かもう少し前に開発をしているような感覚に襲われました。ビルド環境も、パッケージ管理も、僕の知っているやりやすいツールは当たり前のように使われていない感じだったからです。本屋に赴いても、そもそもここ1年に出たWordPressの開発本がありませんでした。もう十分に枯れて止まっているということなのかもしれませんね。僕が特に欲しかったのは、以下のものです。

Sassに代表されるCSSプリプロセッサ
ファイル変更時のブラウザオートリロード
Gulp

ここでは、僕が一からテーマを作るのにかかる時間を考えたら気分が落ちたので、ひとまず子テーマを上のツールを使った上で開発する環境を構築した手順を書きます。
親テーマの作成にも殆どそのまま使えます。尚、ローカルでWordPressが動くところまでは割と書かれている記事が多いので、ここではカバーしません（僕は無駄なこだわりでMAMPではなくnginxをローカルでも使うようにしたので微妙に手間がかかりましたｗ）

本題

まずテーマの作成場所を作る

僕がかなりマイノリティなのかもしれませんが、テーマの編集の仕方を教えているものはたくさんあるのに、編集の前にまずはじめ方が分からずつまずいたので僕はこうやったというものを書いておきます。

まず、開発したいディレクトリを作成して、たいていの場合、そこをバージョンシステム管理下に置きます。

mkdir theme_dir && cd $_
git init

次に、WordPressがインストールしてあるディレクトリ下、wp-content/themesに移動します。まず初心者すぎた僕は、ここにテーマが入るということすら知りませんでした。ここから、先ほどのディレクトリにsymlinkを貼ることで、テーマを認識させます。

ln -s path_to_dir_we_just_created theme_name

これでテーマを作成する準備ができました。

wordpress-gulp-bower-sassという神

こいつです
まあ結論から言うと運が非常によろしくて、できる人が殆どそのまま使えるものを作ってくれていました。GulpとBowerとSassを使ってテーマの開発ができると。もうまんまですね。ひとまずこいつをCloneするなりDownloadするなりしましょう。そしてREADMEに書いてあるとおり、gulpconfig.jsをちょこっとお好みに合わせていじります。
こんな感じです。

--- a/gulpconfig.js
+++ b/gulpconfig.js
@@ -1,9 +1,9 @@
 // ==== CONFIGURATION ==== //
 
 // Project paths
-var project     = 'voidx'
-  , src         = './src/'
-  , build       = './build/'
+var project     = 'wekidsblog'
+  , src         = '../wekidsblog/src/'
+  , build       = '../wekidsblog/build/'
   , dist        = './dist/'+project+'/'
   , bower       = './bower_components/'
   , composer    = './vendor/'
@@ -79,7 +79,7 @@ module.exports = {
   styles: {
     build: {
       src: [src+'scss/*.scss', '!'+src+'scss/_*.scss'] // Ignore partials
-    , dest: build
+    , dest: build+'/css'
     }
   , dist: {
       src: [dist+'**/*.css', '!'+dist+'**/*.min.css']
@@ -128,6 +128,6 @@ module.exports = {
     , theme:        src+'**/*.php'
     , livereload:   [build+'**/*']
     }
-  , watcher: 'livereload' // Who watches the watcher? Easily switch between BrowserSync ('browsersync') and Livereload ('livereload')
+  , watcher: 'browsersync' // Who watches the watcher? Easily switch between BrowserSync ('browsersync') and Livereload ('livereload')
   }
 }

子テーマ作成時の注意

慣れている人には常識なんだと思うのですが、子テーマに最低限必要なのはstyle.cssです。これに、

/*
  Theme Name: wekidsblog
  Template: twentyfifteen
*/
@import url("../twentyfifteen/style.css");

みたいな記述をすることで、WordPressはこれが(この場合はtwentyfifteenの)子テーマであることを認識します。下の@importはぶっちゃけ最近のWeb的にはバッドプラクティスなので、後で改善する予定ですが、さしあたり簡単に親のCSSを読み込んでいます。
これに加えて、子テーマで書き換えるCSSも読み込んだりするよう、function.phpを作ります。ここでまた常識なのかもしれませんが、function.phpを子テーマに作るということは基本親テーマのそれを上書きするのはなく追記している感じになります。

<?php

function wekidsblog_setup() {

	function wekidsblog_scripts() {
		// Add custom fonts, used in the main stylesheet.
		wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

		// Add Genericons, used in the main stylesheet.
		wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

		// Load style.css
		wp_enqueue_style( 'wekidsblog-style', get_stylesheet_uri());

		// Load main stylesheet
		wp_enqueue_style( 'wekidsblog-main', get_stylesheet_directory_uri() . '/css/main.css', array('wekidsblog-style'));

		// Load the Internet Explorer specific stylesheet.
		wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
		wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

		// Load the Internet Explorer 7 specific stylesheet.
		wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
		wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );

		wp_enqueue_script( 'twentyfifteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20141010', true );

		if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
			wp_enqueue_script( 'comment-reply' );
		}

		if ( is_singular() && wp_attachment_is_image() ) {
			wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' );
		}

		wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true );
		wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
			'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
			'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
		) );
	}
	remove_action('wp_enqueue_scripts', 'twentyfifteen_scripts');
	add_action('wp_enqueue_scripts', 'wekidsblog_scripts');
}
add_action( 'after_setup_theme', 'wekidsblog_setup', 20);

親テーマでのCSS読み込み部分(上ではtwentyfifteen_scripts)をやめさせ、代わりに新しく記述したもの(上ではwekidsblog_scripts)を読むようにここで設定しています。

後はmain.scssを作成し、

a {
	color: red;
}

みたいな分かりやすく動いているかいないか判断できる設定で確認しましょう。

少しでも楽しいWordPress開発がみなさんのものになりますように！
逆におすすめのプラグインややり方あったら教えて下さい！