Gulp4.0+PostCSS+Babel(ES6)でWordPressテーマ開発用テンプレートを作ってみた

WordPressの開発環境を見直すタイミングができたので、ここぞとばかりにごっそりテーマ開発用のテンプレートを作ってみました。

今回は、以前作ったWP-CLIでの開発環境をベースとして作成した、テーマ開発用のテンプレートについてご紹介します。

(以降はWP-CLIやMySQLなどのWordPressのローカル環境を構築している前提で書いていきます。)

GitHub

wp-theme-template – WordPressテーマ開発用テンプレート

したかったこと

今回の環境構築では、以下のようなことをしています。

  • PostCSSを使う
  • Gulp4.0でタスクを書く
  • browser-syncで連携
  • できるだけyarn+yarn start(npm inpm start)だけで完結させる
  • WordPressサーバー+browser-syncをコマンド一つで立ち上げる
  • WP-CLIとMySQLが動かせる環境が整っていれば動作するように設定する

使い方

wordpress/wp-content/themes/に、開発テーマ用のディレクトリを作成し、WordPressテーマ開発用テンプレートをダウンロードやForkなどして、テーマ開発用のファイルを落としてきます。
今回は、「theme-test」というディレクトリ内にテーマを作っていきます。

wordpress/
  ...
  wp-content/
    ...
    themes/
      theme-test/
        _develop/
        style.css
        single.php
        ...

_developディレクトリに移動し、npmパッケージ群をインストールします。

cd wordpress/wp-content/themes/theme-test/_develop/
yarn
# or npm i

あとは同じディレクトリでnpmスクリプト経由でgulpタスクを実行すれば起動します。

yarn start
# or npm start

各タスクについて

_develop/gulpfile.babel.jsにかかれているタスクについて解説していきます。

postcss

PostCSSのタスクです。

「PostCSSを使う」と書いたものの、SCSS記法のほうが学習コストが比較的少なく書けるため、SCSS記法にできるだけ近づけたプラグイン構成になってます。

ざっくりいうと、以下の記事で紹介したものに幾つか追加してつくっています。
詳しくはpackage.jsonを参照ください。

PostCSSをSCSS記法に近づける+便利にするためのプラグイン11選

また、PostCSSについては、以下のスライドが非常に参考になりました。

PostCSS とは何か

補足: baseCSSについて

毎回baseCSSを選ぶ際に迷ってしまいがちな僕は、今回もいろいろ調べて色々迷いました。

結果、このテンプレートでは、記事本文などは素のCSSでも綺麗な段組みが可能になることを加味してnormalize.cssを使っています。

browserify

ES6+browserifyです。
RiotやReact、Vueなどを使う場合は話が変わってきますが、現状だとこれ以外に必要なものは無いと思います。jQueryなどのライブラリもnode_modulesに入れていくスタイルを想定しています。

wp-server

WordPressサーバーは、WP-CLI経由でPHPサーバーを立ち上げます。

node側でWP-CLIコマンドをいい感じのmethodで記述できる wp-cliを使用しています。wp-cliでサーバー立ち上げを書くと以下のように書くことができます。

WP.discover({ path: 'path/to/wordpress/' }, WP => {
  WP.server(null, {
    host: HOST,
    port: PORT,
  }, (err, server) => {
    console.log(err, server);
  });
  done();
});

今回は、以下のようにホストとポートを設定しています。

  • HOST: 0.0.0.0
  • PORT: 8080

WP-CLIの都合上、pathの指定にWordPressのルートを指定しないといけないので、_developからの相対パスをかくというかっこ悪い感じになってます…。

browser-sync

browser-syncでproxyに0.0.0.0:8080を設定しつつ、localhost:3000でbrowser-syncが立ちあがります。

同時にgulp-watchで各ファイルの変更を監視し、対応したタスクを実行するようにしています。
.phpファイルだけは、 そのままテーマディレクトリのルートにあるファイルを編集していく想定になっています。

最後に

gulpでの開発環境の自動化にWP-CLIを突っ込んだことで、サーバー立ち上げからbrowser-syncまでコマンド一発で動くようになってとても便利な環境になりました。

テーマをフルスクラッチで書く環境はなくなってきているかもしれないですが、一からつくってみたい方やWordPressのテンプレートの仕組みを勉強したい方の参考になれば幸いです。

  • BLOG
  • >
  • web
  • >
  • Gulp4.0+PostCSS+Babel(ES6)でWordPressテーマ開発用テンプレートを作ってみた