Sage によるモダンなテーマ開発フローの始め方

Sage とは?

Sage | WordPress Starter Theme | Roots

Webpackを使ったモダンなフロンエンド開発のワークフローを構築することができるcomposerパッケージ。
WordPressのテーマ開発に利用することができる。

標準でBrowserSyncが備わっていたり、 ビューテンプレートエンジンがBladeだったり。

必要条件

  • WordPress >= 4.7
  • PHP >= 7.1.3 (with php-mbstring enabled)
  • Composer
  • Node.js >= 8.0.0
  • Yarn

チュートリアル

https://roots.io/sage/docs/theme-installation/

チュートリアルをひととおりやってみる。

自分の環境

  • Vagrant (guest os)
    • VVV 3.0 (nginx, php 7.2)
  • macOS (host os)
    • nodejs 10
    • composer
    • yarn
  • WordPress 5

テーマ (開発用ファイル一式) のインストール

wp-content/themes 配下にテーマファイル一式を作りたいので、
カレントディレクトリを wp-content/themes に移動させておく。

my-sage-1 というテーマ名で開発のもととなるテーマ(Starter Theme)をインストールする。

するとプロンプトが現れるので以下のように回答していく。
[...] の中は、未入力の場合のデフォルト値です。

yarn

テーマフォルダに移動して、

yarn を実行する (失敗)

はいはい、いつものやつね。

npmパッケージの中には python 2 に依存しているもの(上記のだとgyp)があり、
python 3だとビルドできなくてエラーになる。

python 2.7 に切りかえて 再度 yarn を実行(成功)

python 2.7 に切り替えて、

node_modulesyarn.lock を削除してから yarn を実行。

今度はエラーなしで終了。

yarn build してみる

OK。これでスターターテーマのインストールが完了したっぽい。

my-sage-1がテーマとして認識されているのか確認

(WordPressをローカルのVagrantで動かしているのでVagrantにsshしてから以下のコマンドを実行しています)

ふむ。 my-sage-1/resources の中がテーマとして認識されておる。

テーマを有効にしてみる

Image from Gyazo

Theme Configuration and Setup

app/setup.php

cssとjsをenqueueしたり、add_theme_supportしてテーマ機能のサポートを登録し、ナビゲーションメニューとサイドバーを登録するために使用されます。

Image from Gyazo

Working With Soil Plugin

Soil | Cleaner WordPress Markup Plugin | Roots というプラグインが入っていれば、
HTMLを最適化してくれるらしいが、有料。

bladeテンプレートの直接アクセスを禁止する

何もしてないと以下のURLのようにbladeファイルにアクセスできしまうので、それを禁止する。
http://wpken.test/wp-content/themes/my-sage-1/resources/views/index.blade.php

Not OK:
Image from Gyazo

nginx の場合

VVV 3の場合はサイトごとのnginx設定ファイル(www/wpken.net/provision/vvv-nginx-custom.conf なければ作成) に 以下のような locationディレティブ を追加する。
必ず include より上に定義しよう。でないと有効にならない。

そして、 vagrantを再度プロビジョニングする(複数のサイトをvvvで動かしているとめっちゃ時間かかる)。

再度直接アクセスしてみる(OK):

Image from Gyazo


Filed under: テーマTagged with:

よく読まれている投稿

No comment yet, add your voice below!


Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.