_s 公式でも2014年8月に sass 対応となったのですが、その以前から grunt-init テンプレートの「Iemoto」を使ってテーマ作成しています。
今回は Iemoto を使った WordPress テーマの作成についてご紹介します。
目次
Iemoto とは
Iemoto は WordPressテーマ用の grunt-init テンプレートです。
_s をベースにテンプレートファイルにはアクションフックの追加がされています。
css は Sass（Compass）で作成され、style.css コンパイル時に editor-style.css も作成されます。
また、Sass（Compass）のコンパイルや JavaScript 構文チェック、これらのファイルの圧縮などを Grunt あるいは gulp.js で行います。そしてそのための設定ファイルも含まれています。
このように、grunt-init のテンプレートとなることで、一旦ローカル環境で設定してしまえば、_s 公式サイトより毎回テーマを作成するよりも簡単にテーマのひな形を量産することが可能です。
特にお仕事でテーマを量産するような方には非常に便利なテンプレートです。
Iemoto を使うための準備
VCCW を利用していればプリインストールされていますので、これらの設定は不要です。
ローカルでIemoto を利用するためには単に GitHub からデータを落としただけでは使えません。
grunt-init を使うため、まずは Node.js、Gruntなどのインストールが必要です。
node.js、Node Packaged Modules（grunt, grunt-cli, grunt-init, gulp） のインストール
Grunt 0.4.x を使いますので、Node.js は 0.8.0以上が必要です。
公式サイトからバイナリデータをダウンロードしてインストールするか、Homebrew などのパッケージ管理ツールを使って Node.js をインストールしておきます。
Homebrew の場合は
$ brew install node
でOKです。
続いて、Node Packaged Modules（grunt-cli, grunt-init, gulp） をインストールします。
$ npm install --global grunt-cli $ npm install --global grunt-init $ npm install --global gulp
必要に応じてパッケージはアップデートしてください。
また、css は Sass および Compass で作成していますので、これらもインストールしてください。
$ gem install sass $ gem install compass
Sourcemap を使いますので、Sass は 3.3.0 以降が必要です。
執筆時点で Compass も 1.0.0 がリリースされています。
インストールしているバージョンが古かったらアップデートしておきましょう。
参照
Iemoto のインストール
まず、ユーザーのホームに ~/.grunt-init ディレクトリを作成します。
（他の grunt-init テンプレートを使ったことがあれば不要です。）
$mkdir ~/.grunt-init
次に Iemoto を git から取得します。
$ git clone git@github.com:megumiteam/iemoto.git ~/.grunt-init/iemoto # あるいは $ git clone https://github.com/megumiteam/iemoto.git ~/.grunt-init/iemoto
以上で、必要なパッケージなどのインストールは完了です。
Iemoto の使い方
詳しくは公式の README.md をご覧ください。
ここではざっと手順だけ書きます。
# テーマディレクトリに「my-theme」作成 $ mkdir wp-content/themes/my-theme # 「my-theme」に移動 $ cd wp-content/themes/my-theme # iemoto からテーマ作成 $ grunt-init iemoto # 途中質問に答えると、その内容に合わせてPHPファイルなどがコピーされます # コピーが終わったら必要なパッケージのインストール $ npm install # インストールされたsassを元にコンパイル $ grunt # もしくは $ gulp
以上で オリジナルのテーマのひな形が作成されます。
Iemoto の PHP
Iemoto で作られてるテーマのPHPファイル（テンプレートファイル、モジュールテンプレートファイル）は _s をベースとしています。ファイルの構成は変わりませんが、中身において手を加えています。
テキストドメインや関数・変数のプレフィックス
grunt-init の入力内容によってテキストドメインや関数のプレフィックスは自動で置き換えられます。
アクションフックの追加
大枠のHTML要素の前後や投稿タイトルの前後などにアクションフック do_action() を追加しています。
functions.php などで add_action() で処理を追加することが出来ます。
add_editor_style() のサポート
投稿画面で editor-style.css を使える様、あらかじめ functions.php に add_editor_style() を記述しています。
（editor-style.cssについては後述します）
デバッグモードでの css 切り替え
WordPressがデバックモードの場合、通常の style.css ではなく、 css/style.css を参照するように functions.php に記述しています（詳しくは後述します）。
wp_enqueue_style() および wp_enqueue_script のバージョン引数
functions.php の wp_enqueue_style() や wp_enqueue_script() ではバージョン引数に style.css に記載されてるバージョン番号を利用します。
このバージョン番号は package.json で管理していて、grunt あるいは gulp 実行時に書き換わります。
変更する場合は package.json の
"version": "0.1.0",
の部分を変更してください。
Iemoto の Javascript
grunt-init 実行時に、js/iemoto.js が作成されます（ファイル名は grunt-init 実行時の入力内容による）。
functions.php ではこれを圧縮した js/iemoto.min.js を wp_enqueue_script() で読み込んでいます。
iemoto.js の中身は jQueryで使用することを前提として、カプセル化された
(function($){})(jQuery)
のみが記述されています。
適宜中身を変更した後、 grunt もしくは gulp を実行することで圧縮された iemoto.min.js ファイルが生成されます。
Iemoto の style.css と editor-style.css
Iemoto のスタイルシートは全て Sass+Conpass で構成されています。
これらを使用しないで style.css を編集してもかまいませんが、非効率ですのでおすすめしません。
また、_s との違いとして、Iemoto では Sass コンパイル時に editor-style.css が自動で生成されるようになっています。
Sassのコンパイルは grunt または gulp あるいは gulp compass で行えます。
もちろんアプリケーションなどでコンパイルも可能ですが、設定ファイルなどは付属していませんので、その場合は調整してください。
Sass ファイルの構成
Iemoto の Sassファイルの構成は以下のようになっていて、_s の構成と異なっています。
構成は異なりますが、初期の状態でコンパイルされる css は _s のものとほとんど変わりありません。
もちろん、WordPressとして必要なクラスについても記載済みです。
Iemoto の .scss ファイルをそのまま利用してもかまいませんが、 _s に慣れた方は、_sass の中身を _s の sass ディレクトリの中身と置き換えてもいいでしょう（ただし editor-style.css のコンパイルが行われないなどのデメリットもあります）。
_sass
├ _variables.scss
├ editor-style.scss
├ style.scss
├ common
│ ├ _accessibility.scss
│ ├ _alignments.scss
│ ├ _clearings.scss
│ ├ _elements.scss
│ ├ _forms.scss
│ ├ _infinitescroll.scss
│ ├ _reset.scss
│ └ _typography.scss
├ content
│ ├ _aside.scss
│ ├ _comment.scss
│ └ _content.scss
├ functions
│ └ _functions.scss
├ header_footer
│ ├ _footer.scss
│ └ _header.scss
├ layout
│ ├ _layout.scss
│ └ _media-queries.scss
├ media
│ ├ _captions.scss
│ ├ _galleries.scss
│ └ _media.scss
├ navigation
│ ├ _link.scss
│ ├ _main-navigation.scss
│ └ _paging.scss
└ widgets
└ _widgets.scss
共通で使用する色やフォントの設定などは _variables.scss にまとめてあるので、このファイルを修正するだけである程度の装飾は可能です。
またレイアウトについてデフォルトで2カラムになるようになっています。ただし、モバイルファーストになるような記述をしてますので、古いIE8などでは手を加える必要があります。
（とはいえ _s 自体が IE8 をサポートしていないので、Iemotoもそれに習っています）
他に注意すべき点として、画像の参照は url() では無く Compass の image-url() を使用してください。この記述を行うことでコンパイル時に画像パスの調整を行います。
基準となる画像ディレクトリは images なので、このディレクトリ内の画像ファイルを参照にする場合は image-url('example.png') となります。
中身について詳しく書くと長編になってしまうので、別の機会にご紹介したいと思います。
Debug モードと Sourcemap
Sass（Compass）ファイルのコンパイル時、cssは一旦 css/style.css に書き出されます。このとき css/style.css に対して Sourcemap を作成します。
前述しましたが、WordPress をデバッグモードにしていると、テーマは css/style.css を読み込みますので、テーマ開発時の css のデバッグに便利です。
Chrome や FireFox の最新版など Sourcemap に対応したブラウザの開発者ツールと併用することで、css ではなく sass ファイルのどの部分に記述があるのかを確認できます。
また、css/style.css では debug-info を出力していますので、Sourcemap に対応していないブラウザでもアドオンなどで対応出来るかもしれません。
参照
コンパイルのタスク
基本的に grunt あるいは gulp で Sass(Compass) のコンパイル、JavaScript の構文チェック、css、js の minify を行います。
gulp であれば、css のタスクは gulp compass、JavaScript のタスクは gulp js で部分的に行うことも出来ます。
また、grunt watch あるいは gulp watch を使えば、ファイルの更新を grunt(gulp) が監視し、自動的に全てのタスクが実行されます。
公式ディレクトリに登録するテーマにするには
Iemoto で作成したテーマを公式ディレクトリで配布するテーマにするためにはいくつかの注意が必要です。
- node_modules ディレクトリを含めない
- style.css や .js ファイルは圧縮しない（Gruntfile.js または gulpfile.js のタスクを書き換えてください）
いかがでしょうか。
基本的に「_s を使うときにいつもやってるあの処理」を含めたのが Iemoto だと思っていただいても大丈夫です。
まずは使ってみてください。
特にクライアントワークなどでテーマを作ることが多い方には強力な味方になるはずです。
タスクツールとして Grunt を使っていますが、個人的には gulp の方が速い気がします。
（grunt-init 実行時にオプションで選べます）
また、Iemoto ではフィードバックやプルリクエストを受け付けていますので、是非参加してみてくださいね。