テーマディレクトリ登録用テーマ開発環境 : WordPress

Tweet

Pocket

公式テーマ開発環境はVCCWを利用している。

ディレクトリ構成

my-theme
|
|-- css
    |-- vendor
        |--bootstrap
        |--..
    |
    |-- my-theme-admin.css // (必要であれば)管理画面用CSS
|
|-- images
    |-- default.png     // header imageのデフォルト画像
|
|-- js  // Gruntでtheme1.js .. theme2.jsを結合しmy-theme/js/theme.jsを作成
    |-- theme1.js
    |-- ..
    |-- themeN.js
|
|-- dev // 開発ディレクトリ(Grunt実行)
    |-- css
        |-- some.scss   // @importでstyle.scssへインポート
        |-- ..          // @importでstyle.scssへインポート
        |-- someN.scss  // @importでstyle.scssへインポート
        |-- ..          // @importでstyle.scssへインポート
        |-- style.scss  // コンパイルしてmy-theme/style.cssを作成
    |
    |-- js
        |-- vendor
                |-- some.js
        |
        |-- theme.js    // Grunt my-theme/dev/js/theme1.js..themeN.jsを結合し作成
    |
    |-- config.rb       // Compass設定ファイル
    |-- Gruntfile.js    // Grunt設定ファイル
    |-- package.json    // Grunt依存関係管理ファイル
|
|-- languages
    |-- default.po      // 配布
    |-- default.pot
    |-- default.mo
    |-- ja.po           // 配布
    |-- ja.mo           // 配布
|
|-- inc
    |-- my-theme-xxx.php
    |-- ...
|
|-- functions.php
|-- ..
|-- index.php
|-- ..
|-- style.css           // Gruntでmy-theme/dev/css/style.scssをコンパイルし作成
|-- readme.txt          // http://test.wordpress.org/plugins/about/validator/でチェック
|-- screenshot.png

ビルド

翻訳

$ cd <my-theme-directory>
$ find . -iname "*.php" > ./languages/tmp/phplist.txt
$ xgettext --language=php --keyword=__ --keyword=_e --keyword=_n:1,2 --keyword=_x -f ./languages/tmp/phplist.txt -o ./languages/default.pot

Poeditを使いja.po, ja.moを作成します。

配布翻訳ファイル

• default.po
• ja.mo
• ja.po

Grunt

$ cd /path/to/my-theme/dev
$ grunt build

1. /dev/buildディレクトリへコピー
2. /dev/buildディレクトリから不必要なファイルを削除

テーマユニットテスト

• テストデータ
  https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml