WordPressテーマをスクラッチでつくる際には、単純にコーディングだけじゃなくて、CSSやJavaScriptのminifyとか画像の最適化とか、細かい作業もいっぱいあります。
で、最悪なのは一度 minify とかに手を染めるとファイルを修正するたびにこれらの作業が必要で、ムキーってなります。
あと開発を始める前に、JavaScriptのライブラリやCSSのフレームワークなどをかき集めたりするのもめんどくさい！
というわけでテーマを開発する際のいろんなことを一気に自動化してくれちゃう Grunt を使って、WordPressのスターターテーマ Underscoresからスクラッチでテーマを作っちゃいましょう！
環境の構築
対象はMacです！
homebrewをインストール
以下のサイトを参考にしてちゃちゃっと。
ここで拒否反応の人は、ここから先はとても無理ですw
すでにインストール済みの人は brew update して brew upgrade しておきましょう。
node.jsをインストール
Gruntを使用するにはnode.jsの npm コマンドが必要です。
$ brew install node
以上が終わったら、~/.bash_profile の行末あたりに以下の行を追加しましょう。
export PATH="/usr/local/share/npm/bin:$PATH"
以上を ~/.bash_profile に記述したら、ターミナルを再起動するか以下のコマンドを実行しましょう。
$ source .bash_profile
終わったら以下のコマンドを入力してエラーが出なければオッケーです。
$ npm --version
Gruntをインストール
次は Grunt をインストールします。
sudo npm install -g grunt-cli
次に grunt-init をインストールします。
sudo npm install -g grunt-init
以上が終わったら以下のコマンドを入力して確認。
$ grunt-init --version
以下のような感じで出力されたらオッケーです。
grunt-init v0.2.1 grunt v0.4.1
さっそくテーマを作ってみよう！
今回は、Automatticさん謹製のスターターテーマ Underscoresを使ってテーマを作ります。
Underscores | A Starter Theme for WordPress
Underscoresはスクラッチでテーマをつくる際のテンプレートみたいなもので、超便利なんですが詳しいことは適当にググってください。
適当なディレクトリをつくる
WordPressのwp-content/themes以下に適当なディレクトリを作ってください。
以下流れ的にコマンドラインのほうが便利なのでターミナルで。
$ cd /path/to/wp/wp-content/themes $ mkdir my-theme
以上のコマンドで wp-content/themes ディレクトリ以下に my-theme というディレクトリを作りました。
つぎに以下のコマンドで my-theme ディレクトリに移動。
$ cd my-theme
さあ、いよいよこの中にテーマを作っちゃうよ！
underscoresを取得
まずGitを使ってUnderscoresをローカルにcloneしましょう。
https://github.com/ericmann/grunt-wp-underscores
$ git clone git@github.com:ericmann/grunt-wp-underscores.git ~/.grunt-init/wp-underscores
ここまでの作業は次回以降は不要です。ただし、たまに git pull して underscores を最新版にしておきましょう。
あとは以下のコマンドを入力してください。
$ grunt-init wp-underscores
以上を入力すると以下のような感じでテーマ名とかいろいろ聞いてきます。
[miya@localhost my-theme]$ grunt-init wp-underscores (中略) Please answer the following: [?] Project title (WP Underscores) My Theme [?] PHP function prefix (alpha and underscore characters only) (wpunderscores) mytheme [?] Description (The best WordPress theme ever made!) My First Theme [?] Project homepage (http://wordpress.org/themes) https://firegoby.jp/ [?] Author name (miya) [?] Author email (miya@example.com) [?] Author url (none) https://firegoby.jp/ [?] Do you need to make any changes to the above before continuing? (y/N) (中略) Initialized from template "wp-underscores". Done, without errors.
この過程の中でいろいろ聞かれますので適当に。
ほとんどの部分は後からでも修正できますが、PHP function prefix は後から修正するのは大変なので、よく考えて入力しましょう。(半角英数)
以上を完了すればテーマに必要なPHPファイルがだだーっと設置されています。
さらに style.css を見ると以下の様な感じで、必要な内容が自動的に記述されています。
さらに先ほど入力したprefixが関数名やテキストドメイン名などに反映されています。
npm installで開発に必要なプラグインを一発インストール
Gruntを使用するにはminifyとかいろいろやってくれるプラグインを好みに応じてインストールする必要があります。
どのプラグインをインストールするかはpackage.jsonの devDependencies に記述してあるので、あとは以下のコマンドを叩くだけです。
npm install
これらはGitHubにはコミットされないように、ignoreされてますので、Gitからチェックアウトした時など必要に応じて、このコマンドを実行してください。
CSSやJavaScriptを作ってみよう！
この Grunt + Underscores では、assets/ 以下にCSSやJavaScriptを設置することになっています。
そのため以下のコマンドで必要なディレクトリを作ってください。
$ mkdir assets $ mkdir assets/js $ mkdir assets/js/src $ mkdir assets/css $ mkdir assets/css/src
つぎにCSSとJavaScriptのソースファイルを設置します。
この時ファイル名は テーマ名を小文字にして空白をアンダースコアに変換したファイル名にしてください。
たとえば、テーマ名が My Theme なら my_theme.css とか my_theme.js とするべきです。
(うう、このへんの作業はやや煩雑っすね。自動化してほしいな。。。)
$ touch assets/js/src/my_theme.js $ touch assets/css/src/my_theme.css
あとは、これらのファイルをサクサク修正してテーマ開発に励み、随時以下のコマンドを実行して動作確認をするという作業を繰り返します。
$ grunt
grunt コマンドを実行することで、src ディレクトリ内の CSS や JavaScript が minify されます。
minify されたファイルは functions.php で wp_enqueue_*() されてますので、 grunt を実行するだけですぐに反映されます。
もちろん Compassとか Sassとかも使えますので、そのへんはいろいろ試してみてください。
これフォークして自社用にやりやすくしたほうがいいかな。。。