11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

LIGAdvent Calendar 2018

Day 11

WordPressテーマのスターターテンプレート"Sage"のすすめ & 調整してみた

Last updated at Posted at 2018-12-10

目次

WordPressテーマ開発でもサクッと環境構築したいよね

VueやReactって、全部入りの開発環境がCLIで簡単に構築できて、出だしが快適ですよね。
WordPressにも、そういうの欲しくないですか。
WP CLI?ちがうんです。
SCSSやESのコンパイル/トランスパイル、変更保存時のブラウザ自動更新といった、Node.jsを利用した開発環境を構築したいんです!

そんなあなたに"Sage"

そんな想いから色々さがして見つかったのが、こちら。

Sage

Sageは、WordPressテーマのスターターテンプレートです。
つまり、WordPressテーマの開発に必要なあれこれを束ねた雛形です。
特徴は大きく分けて以下の3つ。

  1. 2018/12/10時点で、WordPressボイラープレートでは、おそらくGitHubスター数No.1(9700超)

  2. Webpackを利用したモダンなフロントエンド開発環境

  3. テンプレートをBladeで記述できる

そして、2つ目の特徴には以下の機能が含まれています。

  • CSS

    • SCSSのコンパイル
    • 接頭辞自動付与(Autoprefixer)
    • 最小化
    • 文法チェック
  • JavaScript

    • ECMAScript>=2015のトランスパイル
    • 依存関係解決(Module Bundling)
    • 最小化
    • 文法チェック
  • ETC

    • ブラウザの自動リロード
    • 画像サイズ削減

これぞまさに欲しかったもの!やったぜ!

でも少しだけ気になる点が...

基本的に問題なく動作しますが、細かい部分で気になる部分がありました。

yarn start / npm start時に発生するmain.cssの404エラー

GitHub Issue
WebpackのCSSファイル出力機能は、本番ファイル生成時のみONとなるため、開発サーバーではCSSの404エラーが発生します。

yarn start / npm start時にJavaScriptの変更保存で発生するHMRの警告

GitHub Issue
Hot Module Replacement(HMR)を受け入れるための設定がJavaScript内に存在しないため、変更保存のたびに警告とリロードが発生します。

yarn start / npm start時にSSL接続で発生するブラウザからの警告

Discourse
HTTPSで開発サーバーに接続すると、SSL証明書が確認できないことによるエラーが発生します。

初期状態でのjQuery依存

GitHub Issue
初期状態でjQueryへの依存しています。

git管理対象ファイルへの環境変数記載

GitHub
開発ドメイン、テーマディレクトリへのパスなど、環境に依存する情報がgitで管理されてしまいます。

調整するやつ、作りました!

以上の問題を調整するシェルスクリプト、作りました!

Sage optimizer

Sageインストール時の質問に続いて、いくつか追加の質問が求められる形となっています。
Sageの依存関係を満たす環境であれば、同じく利用できるはずです。
くわしい使用方法はREADMEをご参照ください。

まとめ

GitHubを見た感じ、どうやら次期バージョン以降で、フロントエンド部分にLaravel Mixを採用する計画があるようです。
上記の調整をプルリクエストしようかとも思いましたが、Laravel Mixに置き換えられることで、問題が一気に解決する可能性も考えられます。
なので、次期バージョンが出るまでは、このスクリプトを使いつつ様子見かなーと思ってます。
比較的モダンな環境を用意していて、かつメンテナンスが継続しているボイラープレートが他に見当たらないので、しばらくはこのSageでテーマ開発していくことになりそう。
よろしくな!Sage!

(他にも良いボイラープレートあったら教えてください)

11
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?