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 に移動させておく。
|
1 2 |
$ cd wpken.net/public_html/wp-content/themes |
my-sage-1 というテーマ名で開発のもととなるテーマ（Starter Theme）をインストールする。
|
1 2 |
$ composer create roots/sage my-sage-1 |
するとプロンプトが現れるので以下のように回答していく。
[...] の中は、未入力の場合のデフォルト値です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
Theme Name [Sage Starter Theme]: > デフォルトを選択（エンター押すだけ） Theme URI [https://roots.io/sage/]: > デフォルトを選択 Theme Description [Sage is a WordPress starter theme.]: > デフォルトを選択 Theme Version [9.0.9]: > デフォルトを選択 Theme Author [Roots]: > デフォルトを選択 Theme Author URI [https://roots.io/]: > デフォルトを選択 Local development URL of WP site [http://example.test]: > http://wpken.test #<= 自分のローカルのURLを入力してエンター Path to theme directory (e.g., /wp-content/themes/my-sage-1) [/app/themes/sage]: > デフォルトを選択 Which framework would you like to load? [Bootstrap]: [0] None [1] Bootstrap [2] Bulma [3] Foundation [4] Tachyons [5] Tailwind > 1 #<= bootstrapを選択 Are you sure you want to overwrite the following files? - scripts/autoload/_bootstrap.js - styles/autoload/_bootstrap.scss - styles/common/_variables.scss - styles/components/_comments.scss - styles/components/_forms.scss - styles/components/_wp-classes.scss - styles/layouts/_header.scss (yes/no) [no]: > yes Send anonymous usage data? We are only sending your framework selection and OS (yes/no) [no]: > no |
yarn
テーマフォルダに移動して、
|
1 2 |
[wpken.net/public_html/wp-content/themes]$ cd my-sage-1 |
yarn を実行する （失敗）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[wpken.net/public_html/wp-content/themes/my-sage-1]$ yarn ... warning Error running install script for optional dependency: "/Users/yokada/Dropbox/wordpress/vvv3.0/www/wpken.net/public_html/wp-content/themes/my-sage-1/node_modules/fsevents: Command failed. Exit code: 1 Command: node-gyp rebuild Arguments: Directory: /Users/yokada/Dropbox/wordpress/vvv3.0/www/wpken.net/public_html/wp-content/themes/my-sage-1/node_modules/fsevents Output: gyp info it worked if it ends with ok gyp info using node-gyp@3.8.0 gyp info using node@10.15.3 | darwin | x64 gyp ERR! configure error gyp ERR! stack Error: Command failed: /Users/yokada/.pyenv/shims/python2 -c import sys; print \"%s.%s.%s\" % sys.version_info[:3]; gyp ERR! stack pyenv: python2: command not found gyp ERR! stack gyp ERR! stack The `python2' command exists in these Python versions: gyp ERR! stack anaconda3-5.3.0/envs/py27 gyp ERR! stack ... |
はいはい、いつものやつね。
npmパッケージの中には python 2 に依存しているもの（上記のだとgyp）があり、
python 3だとビルドできなくてエラーになる。
python 2.7 に切りかえて 再度 yarn を実行（成功）
python 2.7 に切り替えて、
|
1 2 |
$ conda activate py27 |
node_modules と yarn.lock を削除してから yarn を実行。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$ rm -rf node_modules $ rm -rf yarn.lock $ yarn install ... warning node-sass > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 warning node-sass > node-gyp > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 warning stylelint > autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools. [3/5] 🚚 Fetching packages... [4/5] 🔗 Linking dependencies... warning " > stylelint-webpack-plugin@0.10.5" has incorrect peer dependency "webpack@^1.13.2 || ^2.7.0 || ^3.11.0 || ^4.4.0". [5/5] 🔨 Building fresh packages... success Saved lockfile. ✨ Done in 29.33s. |
今度はエラーなしで終了。
yarn build してみる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[wpken.net/public_html/wp-content/themes/my-sage-1]$ yarn build DONE Compiled successfully in 3621ms 15:14:05 Asset Size Chunks Chunk Names scripts/main.js 230 kB 0 [emitted] main scripts/customizer.js 3.24 kB 1 [emitted] customizer styles/main.css 386 kB 0 [emitted] [big] main scripts/main.js.map 377 kB 0 [emitted] main styles/main.css.map 613 kB 0 [emitted] main scripts/customizer.js.map 3.08 kB 1 [emitted] customizer ✨ Done in 5.05s. |
OK。これでスターターテーマのインストールが完了したっぽい。
my-sage-1がテーマとして認識されているのか確認
（WordPressをローカルのVagrantで動かしているのでVagrantにsshしてから以下のコマンドを実行しています）
|
1 2 3 4 5 6 7 8 9 |
vagrant@vvv:/srv/www/wpken.net/public_html$ wp theme list +---------------------+----------+--------+---------+ | name | status | update | version | +---------------------+----------+--------+---------+ | my-sage-1/resources | inactive | none | 9.0.9 | | tm-beans | parent | none | 1.5.1 | | wpwand | active | none | 1.0.0 | +---------------------+----------+--------+---------+ |
ふむ。 my-sage-1/resources の中がテーマとして認識されておる。
テーマを有効にしてみる
|
1 2 3 4 |
vagrant@vvv:/srv/www/wpken.net/public_html$ wp theme activate my-sage-1/resources Success: Switched to 'Sage Starter Theme' theme. |
Theme Configuration and Setup
app/setup.php
cssとjsをenqueueしたり、add_theme_supportしてテーマ機能のサポートを登録し、ナビゲーションメニューとサイドバーを登録するために使用されます。
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:
nginx の場合
VVV 3の場合はサイトごとのnginx設定ファイル（www/wpken.net/provision/vvv-nginx-custom.conf なければ作成） に 以下のような locationディレティブ を追加する。
必ず include より上に定義しよう。でないと有効にならない。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
server { listen 80; listen 443 ssl http2; server_name {vvv_hosts}; root {vvv_path_to_site}/public_html; # Nginx logs error_log {vvv_path_to_site}/log/nginx-error.log; access_log {vvv_path_to_site}/log/nginx-access.log; # This is needed to set the PHP being used set $upstream {upstream}; # Enable server push if SSL/HTTP2 is being used for link preload headers http2_push_preload on; {vvv_tls_cert} {vvv_tls_key} ######## ↓これ！ location ~* .(blade.php)$ { deny all; } ######## ↑これ！ # Nginx rules for WordPress, rewrite rules, permalinks, etc include /etc/nginx/nginx-wp-common.conf; {{LIVE_URL}} } |
そして、 vagrantを再度プロビジョニングする（複数のサイトをvvvで動かしているとめっちゃ時間かかる）。
|
1 2 |
[macOS]$ vagrant reload --provision |
再度直接アクセスしてみる（OK）:
No comment yet, add your voice below!