カテゴリー
開発環境 ホームページ製作

WindowsのWordPressにsageをテーマにする

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で見ようとすると、キャッシュが古くて見れません。

コメントを残す

メールアドレスが公開されることはありません。