wordpressのブランクテーマ「sage」のセットアップ

wordpressのテーマ開発用のブランクテーマ「sage」のセットアップ方法のメモ。

環境

• mac osx
• MAMPのhtdocsにsampleディレクトリを作成しwordpressをインストールセットアップ済み
• bower、node.js、npmのインストールは済み

sageとは？

sageはwordpressのテーマ開発用のブランクテーマ。ブランクテーマについてはこちらをどうぞ。
sageでは、

• Twitter Bootstrapのサポート
• HTML5でのコーディング
• sassの利用
• gulpでタスクの自動化
  がされておりwordpressのテーマ開発が非常にやりやすくなっています。

sageのダウンロード

GitHubよりthemesディレクトリにクローン

//MAMP/sample/wp-content/themes/
$ git clone https://github.com/roots/sage.git

npmパケージのインストール

クローンしたsageディレクトリに移動しnpmパッケージのインストール
package.jsonがあるので下記でOKです。

//MAMP/sample/wp-content/themes/sage/
$ npm i

これでgulpfile.jsに記載されているタスクが実行可能となります。

bowerパッケージのインストール

さらにbowerでbootstrap,jQueryのインストール
こちらもbower.jsonがあるので下記でOK。

//MAMP/sample/wp-content/themes/sage/
$ bower install

これでbootstrap-scssが利用可能となります。

browser-syncのプロキシ設定（MAMP利用の場合）

browser-syncのために、MAMPなどローカルサーバーを利用の場合はプロキシ設定が必要。
sage/assets/manifest.jsonにアクセスし、プロキシの設定を行います。
下部に記載されている"devUrl"の "http://example.dev"を下記に変更。/sample/の部分は任意のディレクトリ名に。

manifest.json

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "customizer.js": {
      "files": [
        "scripts/customizer.js"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    }
  },
  "config": {
    "devUrl": "http://localhost:8888/sample/"
  }
}

これでbrowser-syncの利用が可能です。

jsライブラリーの追加

テーマ開発の中で追加のjsライブラリーが必要な際はbowerで可能。

$ bower install パッケージ名 --save

その後に追加されたパッケージの結合、圧縮を行う。

$ gulp build

これで追加ライブラリーがdist/main.jsに結合します。

この挙動がわかるまで半日を消費。。
manifest.jsonやらbower.jsonのoverrideやら追記まったく必要ないのね。。

※追記
レスポンシブスライドショーのflickityを追加しようとしたところ上記の方法では、うまく動かなかった。
sageのフォーラムを調べたところ、buildの他にbower.jsonのoverridesに下記を追加すると動くとのこと。

  "flickity": {
    "main": [
      "./dist/flickity.pkgd.js",
      "./dist/flickity.min.css"
    ],
    "dependencies": {}
  }

追加したところ無事実装完了。
overridesが必要なのは、パッケージ自体が他のパッケージに依存している場合。パッケージ自体のbower.jsonのmainはdist/を指していない。
そのようなパッケージではoverridesが必要。
mainにdist内必要ファイルのパスを記載する。
追加で

"dependencies": {}

を記載しておいたほうが無難かも。pkgdファイルに既に含まれている。いらないパッケージもまとめられてしまうことがあるので。

gulpコマンド解説

sageでデフォルトで使えるgulpコマンド。

scssのコンパイル

assets/styles/内のscssの変更後下記コマンドを実行するとscssのコンパイルに加えcssの圧縮、bower管理のbootstrapのscssとの結合まで行ってくれます。コンパイル後のcssファイルは、dist/styles/main.cssです。

$ gulp styles

画像のロスレス圧縮

assets/images/内の画像ファイルをロスレス圧縮します。
圧縮後のファイルはdist/images/に格納されます。

$ gulp images

javascriptの結合、圧縮

bowerの追加パッケージ、assets/scripts/main.jsの追記をdist/scripts/main.jsに結合、圧縮します。
bowerで追加パッケージを入れた際は必須。

$ gulp scripts

変更の監視、プラウザのオートロード

browser-syncを利用し、プラウザのオートロードが可能です。
templateフォルダ内のphp、scssの変更でオートロードします。
さらに画像の追加でも自動的にimagesタスクを実行します。

$ gulp watch

自動的にプラウザが立ち上がり、変更に応じてリロードされます。
ターミナルに表示されるExternalのURLにスマホ等、別のデバイスでアクセスすることでそちらでも確認が可能です。