Snow Monkeyのビルド方法
WordPressのテーマのSnow Monkeyを購入する都合が付かないため、Githubからリポジトリをダウンロードして、ビルドを行いました。
その時に学んだことを、ここに記録したいと思います。
Snow Monkeyのリポジトリ
Snow Monkeyのリポジトリは、こちらです。
buildの際に必要なもの
buildは、linuxで行うようです。
私は最初Windowsで行いましたが、buildの途中でエラーが出ました。
そのためWSLを使いました。
リポジトリのディレクトリでターミナルを開いて、WSLと入力して起動しました。
私は、WSLを開発に使っていなかったので、下記のツールをインストールしました。
Ubntuの更新を行いました。
sudo apt update && sudo apt upgrade -y
Node.js を最新バージョンでインストールするために公式リポジトリを追加します。
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
Node.js と npm をインストールします.
sudo apt install -y nodejs
インストール後にバージョンを確認して動作確認を行います。
node -v
npm -v
npm の最新版をインストールする場合は以下を実行します。
sudo npm install -g npm@latest
Git が必要な場合、以下を実行します。
sudo apt install -y git
インストール後、バージョンを確認します。
git --version
このほか必要になったもの
composerをinstallしました。
composer install
私の場合xmlreader と simplexml の PHP 拡張機能が不足しているため、依存関係のインストールが失敗しました。
以下のコマンドを実行して、xmlreader と simplexml をインストールします。
sudo apt update
sudo apt install -y php-xml
PHP の拡張機能が正しくインストールされているか確認します。
php -m | grep -E 'xml|simplexml|xmlreader'
出力結果に以下のいずれかが含まれていれば、インストールされています。
xml
simplexml
xmlreader
依存関係の再インストールが、必要かもしれません。
composer require inc2734/wp-basis
私の場合は、このエラーが出ました。
Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
╷
1 │ @import '../../../assets/packages/spider/src/css/spider';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/css/app/spider.scss 1:9 root stylesheet
Could not connect to Docker. Is it running?
ERROR: "translation:name" exited with 1.
ERROR: "translation" exited with 1.
Sass の @import に関する非推奨の警告
問題
@import は Dart Sass 3.0.0 で削除予定で、代わりに @use を使うべきという警告です。この警告はエラーではありませんが、将来的なトラブルを防ぐため修正をお勧めします。
修正方法
該当箇所を以下のように変更します。
修正前
@import '../../../assets/packages/spider/src/css/spider';
修正後
@use '../../../assets/packages/spider/src/css/spider' as spider;
修正対象のファイル名
src/css/app/spider.scss
私は、この操作をしましたが、ビルドをやり直すときに上書きされてしまうため、この操作は、反映できないかもしれないです。
buildにDockerを使います。
DockerでWordPressを起動するため、buildするまえに、Docker デスクトップを起動しておいてください。
任意のWindowsディレクトリでWSLを利用する方法
例えば、特定のプロジェクトディレクトリでターミナルを開き、そのままWSLを起動する流れは以下のようになります。
Windowsの任意のディレクトリに移動
例えば、D:\WordPressテーマ\snow-monkey に移動します。
ターミナルを開く
ディレクトリ内で右クリックして「ターミナルを開く」を選択するか、
エクスプローラーのアドレスバーに cmd と入力してターミナルを開きます。
ターミナルで、WSLを実行します。
wsl
現在のディレクトリがWSL上で利用可能
自動的にそのディレクトリが WSL の作業ディレクトリとして認識されます。
例えば
/mnt/d/WordPressテーマ/snow-monkey
利用例: Windowsディレクトリでの作業をWSLに切り替える
以下の手順で進められます：
プロジェクトのあるディレクトリで作業開始
Windows上で D:\WordPressテーマ\snow-monkey に移動。
ターミナルで WSL を開きます。
依存関係のインストールとビルド プロジェクトのディレクトリ内で以下を実行：
npm install
npm run build
WSLを終了せずにWindowsと連携 WSL内で作業しつつ、Windows上のファイルをエディタ（例：VSCode）で編集できます。
buildのコマンド
npm install
npm run build
buildでDockerの部分でエラーが出たとき
私は、DockerのWordPressの部分で、エラーが出ました。
wp-config.phpを確認しましたが、環境変数が使われていましたので、データーベースの接続情報を確認できませんでした。
そのため、そのまま再度buildしたら、なぜかWordPressを起動することができました。
testのURL
開発用のURL
WordPress development site started at http://localhost:8888
WordPress test site started at http://localhost:8889
MySQL is listening on port 62881
MySQL for automated testing is listening on port 63251
コンテナの中のファイルを編集する方法
コンテナ外でファイルをコピーして編集し、戻す方法です。
wp-config.php をローカルにコピー コンテナ内のファイルをホストマシンにコピーします。
docker cp 915d12117fe5ef527d01ce6726ef9300-tests-wordpress-1:/var/www/html/wp-config.php ./wp-config.php
ホストマシンで編集
ローカル環境でお好みのエディタ（例：VSCode、Notepad++、Vim）を使用して編集します。
nano ./wp-config.php
編集後にファイルをコンテナに戻す 編集したファイルをコンテナに戻します。
docker cp ./wp-config.php 915d12117fe5ef527d01ce6726ef9300-tests-wordpress-1:/var/www/html/wp-config.php
WordPressのログイン情報
ユーザー名： admin
パスワード： password
コンテナの確認方法
WordPress 管理画面やテーマの調整をしたい場合
コンテナ名: 915d12117fe5ef527d01ce6726ef9300-tests-wordpress-1
ポート: 8889
接続コマンド
docker exec -it 915d12117fe5ef527d01ce6726ef9300-tests-wordpress-1 bash
本番 WordPress にアクセスしたい場合
コンテナ名: 915d12117fe5ef527d01ce6726ef9300-wordpress-1
ポート: 8888
接続コマンド
docker exec -it 915d12117fe5ef527d01ce6726ef9300-wordpress-1 bash
データベース（MySQL）にアクセスしたい場合
テスト用 MySQL:
コンテナ名: 915d12117fe5ef527d01ce6726ef9300-tests-mysql-1
ポート: 63251
docker exec -it 915d12117fe5ef527d01ce6726ef9300-tests-mysql-1 bash
本番用 MySQL:
コンテナ名: 915d12117fe5ef527d01ce6726ef9300-mysql-1
ポート: 62881
docker exec -it 915d12117fe5ef527d01ce6726ef9300-mysql-1 bash
CLI 操作用（WP-CLI や Composer の実行など）
コンテナ名: 915d12117fe5ef527d01ce6726ef9300-cli-1
接続コマンド
docker exec -it 915d12117fe5ef527d01ce6726ef9300-cli-1 bash
WordPress のテーマファイルや設定ファイルを確認する場合
docker exec -it 915d12117fe5ef527d01ce6726ef9300-tests-wordpress-1 bash
ls /var/www/html/wp-content/themes/
データベース設定（wp-config.php）を確認する場合
docker exec -it 915d12117fe5ef527d01ce6726ef9300-tests-wordpress-1 bash
cat /var/www/html/wp-config.php
補足: コンテナ名を省略する方法
コンテナ名が長い場合、コンテナ ID を使うと短縮できます。例：
docker exec -it 2bcb2233c799 bash
テーマをZIPファイルに圧縮します
テーマのファイルが多いようで、コンテナからホストにコピーして圧縮する方法では、上手く行きませんでした。
そのためコンテナの中で、Zipファイルにして、ホストにコピーしました。
1．コンテナに入る コンテナに接続します（例: WordPress テスト環境）
docker exec -it 915d12117fe5ef527d01ce6726ef9300-tests-wordpress-1 bash
2.パッケージリストを更新 コンテナ内で以下のコマンドを実行して、パッケージリストを更新します。
apt update
3.zip をインストール 次に、zip をインストールします。
apt install -y zip
4.インストールの確認 zip が正しくインストールされたか確認します。
zip --version
テーマをZip化する手順
テーマディレクトリに移動します。
cd /var/www/html/wp-content/themes
snow-monkey ディレクトリをZip化 以下のコマンドで snow-monkey.zip を作成します。
zip -r snow-monkey.zip snow-monkey
Zipファイルが作成されたことを確認します。
ls -lh snow-monkey.zip
出力例
-rw-r--r-- 1 root root 10M Dec 3 14:00 snow-monkey.zip
コンテナを出ます。
exit
作成したZipファイルをホストにコピー
作成した snow-monkey.zip をホストマシンにコピーするには、以下のコマンドを使用します。
docker cp 915d12117fe5ef527d01ce6726ef9300-tests-wordpress-1:/var/www/html/wp-content/themes/snow-monkey.zip ./snow-monkey.zip
これで、ホストマシン（WSL環境）に snow-monkey.zip がコピーされます。
補足
zip コマンドが使えない場合、代わりに tar コマンドでアーカイブを作成することも可能です。
tar -cvf snow-monkey.tar snow-monkey
コンテナの中からホストに戻るとき
下記のコマンドを実行します。
exit
注意点
コンテナのIDは、変わる可能性があります。
実際のコンテナの状況を確認してください。
docker ps
本番のWordPressにインストールできた
ライセンスのことなども表示さていますので、無事にビルドできたようです。
今回は、試用版ですが納品後、お客様にライセンスを購入していただく予定です。
Discussion