開発版テーマのセットアップ

Amethyst の開発は gulp を使って行っています。開発版のソースコードを編集する場合は以下の手順でプロジェクトのセットアップをしてください。

必要なもの

Node.js、npm が事前にインストールされているかどうかを確認してください。

• Node.js
• npm

テーマのセットアップ

1. cd コマンドで WordPress の themes/ ディレクトリに移動し、テーマを clone してください。

$ cd path/to/wp-content/themes/
$ git clone [email protected]:featherplain/amethyst.git amethyst

1. $ git clone が終わったら、 themes/ から amethyst/ ディレクトリに移動し、必要なパッケージをインストールします。

    $ cd amethyst/; npm install
   

2. gulp をプロキシモードで実行する場合、ホスト名は amethyst.dev に設定されています。任意のホスト名にするには gulpfile.js 内の18行目を編集してください。

    'vhost'          : 'amethyst.dev'
   

3. gulp はグローバルにインストールする必要はありません。そのまま gulp を実行します。

    // プロキシモード
    $ npm run gulp
   
    // 静的ファイルの監視を行うサーバーモード
    $ npm run gulp-server
   

配布用のビルドタスク

必要なテーマファイルのみを zip 化するコマンドです。

  $ npm run gulp-zip

圧縮後のディレクトリ構造は下記のようになります。

v1.0.4 のディレクトリ構成

.
├── 404.php
├── archive.php
├── assets
│   ├── css
│   │   └── editor-style.css
│   ├── genericons
│   │   ├── COPYING.txt
│   │   ├── LICENSE.txt
│   │   ├── genericons
│   │   │   ├── Genericons.eot
│   │   │   ├── Genericons.svg
│   │   │   ├── Genericons.ttf
│   │   │   ├── Genericons.woff
│   │   │   └── genericons.css
│   │   └── genericons.css
│   ├── images
│   │   ├── icon_search.png
│   │   └── icon_search_2x.png
│   └── js
│       ├── customizer.min.js
│       ├── foundation.min.js
│       ├── html5shiv.min.js
│       └── script.min.js
├── comments.php
├── footer.php
├── functions.php
├── header.php
├── inc
│   ├── custom-header.php
│   └── customizer.php
├── index.php
├── languages
│   ├── amethyst.pot
│   ├── ja.mo
│   ├── ja.po
│   └── readme.txt
├── license.txt
├── page.php
├── readme.txt
├── screenshot.png
├── search.php
├── sidebar.php
├── single.php
├── src
│   ├── js
│   │   ├── customizer.js
│   │   ├── foundation.js
│   │   ├── html5shiv.js
│   │   └── script.js
│   └── scss
│       ├── components
│       │   ├── _buttons.scss
│       │   ├── _comments.scss
│       │   ├── _default.scss
│       │   ├── _footer.scss
│       │   ├── _forms.scss
│       │   ├── _header.scss
│       │   ├── _layout.scss
│       │   ├── _post-editor.scss
│       │   ├── _post-navigation.scss
│       │   ├── _post.scss
│       │   ├── _widgets.scss
│       │   ├── _wp-classes.scss
│       │   └── core
│       │       ├── _config.scss
│       │       ├── _foundation.scss
│       │       ├── _mixins.scss
│       │       ├── _placeholder.scss
│       │       ├── _settings.scss
│       │       └── foundation
│       │           ├── _functions.scss
│       │           ├── _settings.scss
│       │           └── components
│       └── style.scss
├── style.css
└── template-parts
    ├── content-none.php
    ├── content-page.php
    ├── content-search.php
    ├── content-single.php
    ├── content.php
    └── single-column.php