, ,

[WP Theme Dev] Iemoto で WordPress theme の作成を始めるまでの手順を確認する

公開日: 2017/05/16
更新日: 2018/10/04

Iemoto は _s を利用したスターターキットです。

「WordPress 独習の今後の課題とソース」という記事を書いた後、すっかり放置していました。
プロジェクトを進めながらこのあたりをまとめてみます。

Contents

インストール

バージョン番号がないので明記できないのですが、以下、Commits on Feb 18, 2017 (7375d1d44b9d91a8944a112e9432484ecde2f648) を利用しています。

grunt-init テンプレートの形式になっているので、これを git clone しておきます。

% npm install -g grunt-init
% mkdir ~/.grunt-init
% git clone git@github.com:megumiteam/iemoto.git ~/.grunt-init/iemoto

プロジェクトファイルの生成

詳細な README があるのでそのまま進められますね。
テンプレートを生成します。

% mkdir wp-content/themes/my-theme
% cd mkdir wp-content/themes/my-theme
% grunt-init iemoto
Running "init:iemoto" (init) task
This task will create one or more files in the current directory, based on the
environment and the answers to a few questions. Note that answering "?" to any
question will show question-specific help and answering "none" to most questions
will leave its value blank.
Please answer the following:
[?] Project title (Iemoto) Sample project
[?] PHP function prefix (alpha and underscore characters only) (iemoto)
[?] Description (Megumi theme based on Underscores)
[?] Project homepage (https://www.digitalcube.jp/)
[?] Author name (DigitalCube Co.,Ltd)
[?] Author url (https://www.digitalcube.jp/)
[?] Use gulp? (y/N) n
[?] Do you need to make any changes to the above before continuing? (y/N) n

と、ここまでで git commit しておくと良さそうですね。

テンプレート作成時の初期値

grunt-init iemoto した際に聞かれる設問のディフォルト値は、defaults.json で設定できるそうです。

デフォルト値を設定するには以下のように、defaults.json を設置し、そのファイルを編集してください。

% cp ~/.grunt-init/iemoto/defaults.json.sample ~/.grunt-init/defaults.json

設定

package.json と Gruntfile.js が生成されているので、必要があれば調整します。
npm パッケージをインストールします。

% npm install

以上で、セットアップ完了です。

開発

grunt の task が下記のように設定されていました。

Available tasks
       compass  Compile Sass to CSS using Compass *
        jshint  Validate files with JSHint. *
         watch  Run predefined tasks whenever watched files change.
       replace  General purpose text replacement for grunt. Allows you to
                replace text in files using strings, regexs or functions. *
       default  Alias for "jshint", "compass", "replace" tasks.

grunt で Sass ファイルが Compile されます。
JavaScript は jshint が実行されるようです。
また minify はされませんでした。
開発中は grunt watch が利用できそうです。

所感

grunt/gulp task の書き換えが必要

開発進めるにあたっては、テンプレート生成後に grunt/gulp task の調整や npm の追加が必要になりそうです。
folk して大幅に書き換えるか、ごっそり置き換えるか等の検討。

Compass に依存している

どうもテンプレートが Compass に依存しているようです。
Compass は Deprecated しているので、注意が必要そう。

style.css および editor-style.css の作成に Sass および Compass を利用していますので、事前にインストールしておいてください。

ソースを見ると、たしかに compass が import されているようですが、元の _s は依存していないように見えます。
このあたりは探ってみる必要がありそう。

Iemoto と _s テンプレートの違い

詳細が分かっていないので、差分を調べてみるかも。