WordPressのテーマをsageにしたが、いろいろ躓いたのでメモを残す。
【我がパソコン】
Windows10 home。wordpressはLocal by Flywheelを利用。
sageのインストールには、下記リンク先を参照。
https://kunikazutayama.blogspot.com/2018/05/wordpresssagewindows.html
ただ2年前の記述なので、バージョン確認をすること。
sageをインストールするには、
https://roots.io/docs/sage/9.x/installation/#browsersync-configuration
の環境が必要。
- WordPress 4.7以上
- PHP 7.1.3以上
- Composer
- Node.js 8.0.0以上
- Yarn
これも入れとくと便利。
- Webpack 入れる際は不要
- npm
- BrowserSync 入れる際は不要
これも必要だった。
- python2.7
- node-sass
- windows-build-tools
WordPressは4.7以上が必要だが、Flywheelで管理しているので、バージョンアップさせる。5.3が入った。
PHPは7.1.3以上と、Composerも必要。
下記リンク先を参照。
https://mseeeen.msen.jp/install-php7-and-composer-in-windows-10/
ただ、php.iniのファイル内に.dllの表記がないので注意。
PHPはPHP -vでバージョン確認。7.4.4が入った。
Composerは Composer -vでバージョン確認。1.10.1が入った。
Node.jsは8.0.0以上が必要。下記リンク先よりダウンロードし、インストール。
https://nodejs.org/ja/
NodeはNode -vでバージョン確認。12.16.1が入った。
Yarnは、下記リンク先よりダウンロードし、インストール。
https://classic.yarnpkg.com/ja/
Yarnはyarn -vでバージョン確認。1.22.4が入った。
ここからが大事。
その他、python2.7とnode-sassが必要。
pythonは、下記リンク先よりダウンロードし、インストール。
https://www.python.jp/install/windows/install_py2.7.html
pythonは、python -vでバージョン確認。2.7.17が入った。
node-sassは、npmのコマンドで入れる。npmはNode.jsをインストールすると自動で一緒に入る。下記リンク先を参照。
https://webdesign-trends.net/entry/4495
node-sassは、node-sass -vでバージョン確認。4.13.1が入った。
ここからはパワーシェルでの作業。 パワーシェル上の wordpressのthemesフォルダで、
composer create-project roots/sage your-theme-name
を入力。TTY mode～とコマンドプロンプト上で流れるが、気にしない。いろんなファイルが自動で作られる。
次にパワーシェルのthemes/your-theme-nameフォルダに移動し、yarnを入力。しかし、エラーが出る。
MSBUILD error MSB4132と出力しているので、MSB4132 を調べてみる。windows-build-toolsに問題があるらしい。下記リンク先参照。
https://living-sun.com/ja/nodejs/590498-msbuild-error-msb4132-on-windows-10-nodejs-angular-npm-msbuild-windows-10.html
windows-build-toolsをインストールしてなかったので、インストールする。
windows-build-toolsは、 npmのコマンドで入れる。 下記リンク先を参照。
https://arm-network.com/blockchain/windows-build-tools/
もう一度、コマンドプロンプトでthemes/your-theme-nameフォルダに移動し、yarnを入力。またしてもエラーが出る。
node-sassは最新をインストールしているのに、node-sassでエラーが出ているのはおかしい。調べてみる。下記リンク先を参照。
https://qiita.com/Sotq_17/items/8647230c90d71b0e2061
コマンドプロンプトでyarn why node-sassを入力すると、node-sass@4.9.4と出力。
インストールされてないバージョンのnode-sassを依存しているので、これを変更する必要がある。下記リンク先を参照。
https://classic.yarnpkg.com/ja/docs/usage/
コマンドプロンプトでyarn add node-sass@4.13.1を入力。依存しているバージョンが変わった。
もう一度、コマンドプロンプトでthemes/your-theme-nameフォルダに移動し、yarnを入力。 successの文字が。やっとうまくいきました。
themes/your-theme-name/resources/assets/config.jsonファイルを開き、
“devUrl”: “https://your-theme-name.local/”に書き換えて、 Flywheelのwordpressを開くとログインできました。
Flywheelのwordpressでは、Adminで中に入ってから、View siteを見ること。先にView siteで見ようとすると、キャッシュが古くて見れません。