Snow Monkey開発を快適にするMy Snow Monkeyテンプレートの紹介

この記事はSnow Monkey / unitone Advent Calendar 2025の1日目の記事です。

WordPressテーマSnow Monkeyには、テーマをカスタマイズするためのプラグインのテンプレート「My Snow Monkey」が公式から提供されています。

カスタマイズが軽微なうちはこのMy Snow Monkeyで十分ですが、開発を進めているとリンターやフォーマッター、ビルドツールなどの開発環境を整備したくなってきます。

というわけで今回、開発環境を整えたMy Snow Monkeyのテンプレートを作成したので紹介します。

リポジトリ

テンプレートのリポジトリはこちらです。

GitHub - foolish-pine/my-snow-monkey-boilerplate: Development boilerplate for the My Snow Monkey WordPress plugin.

Development boilerplate for the My Snow Monkey WordPress plugin. - foolish-pine/my-snow-monkey-boilerplate

github.com

以下では、このテンプレートの機能・使い方とその技術的背景を紹介します。

テンプレートの機能

このテンプレートには以下の機能があります。

• PostCSSによるCSSのビルド
• コードの自動リント・フォーマット
• ライブリロード機能付きのWordPressローカル環境
• コミット前のファイルのリント、フォーマット、エラーの検知
• Renovateによる依存パッケージの更新

セットアップと使い方

リポジトリのREADMEと同じ内容なので、READMEで十分という方は飛ばしていただいて大丈夫です。

前提条件

このテンプレートを使用するには以下が必要です。

• Docker
• Volta
• PHP 8.3以上
• Composer
• Snow Monkey

また、このテンプレートはVisual Studio Code（またはCursorのようなVS Codeフォークのエディター）で使用されることが推奨されます。このテンプレートをVS Codeで開くと推奨拡張機能をインストールするよう促されるので、インストールしてください。

依存関係のインストール

1. テンプレートのリポジトリをクローンする

   git clone https://github.com/foolish-pine/my-snow-monkey-boilerplate
   cd my-snow-monkey-boilerplate

2. Node.jsの依存関係をインストールする

   npm install

3. PHPの依存関係をインストールする

   composer install

開発環境のセットアップ

ローカルWordPress環境の起動

1. Dockerを起動しておく

2. 以下のコマンドでローカル環境を起動する

   # ローカルWordPress環境の起動 (http://localhost:8888 でアクセスできる)
   npm run wp-env start
   
   # 環境の停止
   npm run wp-env stop

Snow MonkeyとMy Snow Monkeyの有効化

1. http://localhost:8888/wp-adminで管理画面にアクセスする（デフォルトのユーザー名・パスワードはそれぞれadminとpassword）
2. Snow Monkeyをインストールして有効化する
3. プラグインページでMy Snow Monkeyを有効化する

開発のワークフロー

上記のローカル環境が起動した状態で以下のコマンドを実行すると、ライブリロード機能付きの開発用サーバーが起動します。

npm run watch

このコマンドは以下のことをします。

• CSSファイルの変更を検知して再ビルドする
• http://localhost:3000に開発用サーバーを起動する（http://localhost:8888のプロキシ）
• ファイルの変更を検知してブラウザを自動でリロードする

利用可能なスクリプト

ビルド

# すべてのアセットのビルド
npm run build

# CSSのみビルド
npm run build:styles

CSSのビルドではsrc/styles/以下のCSSファイルがPostCSSで変換されてdist/style.cssとして出力されます。

リント

# すべてリント
npm run lint

# CSSをリント
npm run lint:stylelint

# コードのフォーマットを確認
npm run lint:prettier

# PHPをリント
composer lint

修正

# 修正可能な問題をすべて修正
npm run fix

# CSSの問題を修正
npm run fix:stylelint

# コードのフォーマットを修正
npm run fix:prettier

# PHPの問題を修正
composer fix

カスタマイズ

CSSの追加

1. src/styles/以下にCSSファイルを追加する
2. src/styles/style.cssでそれらをインポートする
3. npm run buildかnpm run watchでビルドする

ビルドされたCSSはdist/style.cssに出力されます。

テンプレートの技術的背景

このセクションでは、テンプレートの技術的な背景について私の考えも交えながら紹介していきます。

wp-env

このテンプレートではWordPressのローカル環境構築にwp-envを使用しています。

WordPressのローカル環境を構築する方法は色々ありますが、wp-envには以下のメリットがあります。

• コマンドで簡単にセットアップできる
• 設定ファイル（.wp-env.json）で柔軟に環境設定・共有できる
• なにより公式が提供するツールである

上記の点から以前より好んでwp-envを使っていたので、今回のテンプレートでも採用することにしました。

ちなみにPHPのバージョンを8.3としているのは、エックスサーバーの現時点での推奨PHPバージョンが8.3だからです。ご利用の環境に応じて変更してください。

ライブリロード

Browsersyncを使っています。

コードを変更したあとブラウザを手動でリロードするのが面倒なので導入しています。

設定はシンプルで、開発用サーバーlocalhost:3000を起動してファイルの変更を検知したらブラウザをリロードしているだけです。

もっと便利なツールやスマートな方法があれば教えてください。

Node.js

Node.jsのバージョン管理にVoltaを使用しています。設定はpackage.jsonのvolta.nodeにあります。

Voltaを使用しなければいけない理由はありません。私が普段からVoltaでNode.jsのバージョンを管理しているので、このテンプレートでもそうしているだけです。他のツールを使ってもらっても構いませんし、最新のNode.jsを直接インストールするのでもOKです。その場合、Voltaの導入は不要です。

Composer

ComposerはPHPのパッケージマネージャーです。

設定ファイルはcomposer.jsonです。

PHPのパッケージといってもこのテンプレートではリンターしか入れていません。

ビルドツールの選択について

WordPressには公式が用意した開発スクリプトのコレクションであるwp-scriptsがあります。

当初はこれを使おうと思ったのですが、以下の理由から採用を見送りました。

• メンテナンスの頻度が高くなく、内部で依存しているパッケージのバージョン更新が遅れがち
• 上記に起因して、wp-scripts以外のパッケージのバージョン更新が制限される
• JSのリントやテストなど、このテンプレートでは使わない機能も同梱されている

というわけで、wp-scriptsは使わず必要なリンターやビルドツールのみを個別に導入することにしました。

リンター・フォーマッター

各リンターについて、VS Codeまたはそのフォークエディター向けの設定を.vscode/settings.jsonに記載しています。.vscode/extensions.jsonに記載のプラグインを導入すれば、エディター上でのエラー表示と保存時の自動修正を利用できます。

ルールはWordPress公式が提供しているものをそのまま利用しています。

Stylelint

StylelintはCSSのリンターです。

設定ファイルはstylelint.config.cjsです。

命名ルールがSnow Monkeyの命名とバッティングするためselector-class-patternルールはnullを設定して無効化しています。

プロパティの並び順のルールとしてstylelint-config-recess-orderを使用しています。並び順を設定するルールは他にもいくつかあるので、お好きなものを使用してください。

PHP_CodeSniffer

PHP_CodeSnifferはPHPのリンターおよびフォーマッターです。

設定ファイルはphpcs.xml.distです。

キャッシュを.cache/phpcs.jsonに保存するよう設定しています。

Prettier

PHP以外のファイルのフォーマッターにはPrettierを使用します。

設定ファイルは.prettierrcと.prettierignoreです。

EditorConfig

EditorConfigはエディター間での書式を統一するためのツールです。

設定ファイルは.editorconfigです。こちらもWordPress公式が提供するルールを設定しています。

フォーマッターがあるならEditorConfigはもう必要ないのではと思いましたが、惰性で導入しています。不要なら削除してください。

CSS

このテンプレートではCSSをPostCSSでビルドしています。

PostCSSはCSSに任意の処理を加えて別のCSSファイルに出力するツールです。

設定ファイルはpostcss.config.cjsです。各プラグインは以下の用途で導入しています。

• postcss-import：@importしたCSSファイルを出力先で展開するため
• PostCSS Nested：これがないとメディアクエリのネストがビルド後に維持されなかったため
• PostCSS Preset Env：モダンなCSSの変換
• Autoprefixer：ベンダープレフィックスの付与
• cssnano：出力したCSSのミニファイ

Autoprefixerのターゲットブラウザは.browserslistrcで指定しています。こちらもWordPress公式の設定をそのまま使用しています。

私はもうSassを使っていないのでSassのビルド環境は含まれていません。必要なら各自で環境を追加してください。

JavaScript/TypeScript

Snow MonkeyのカスタマイズにおいてJSを書きたくなることがこれまで一度もなかったので、テンプレートにはJS/TSの開発環境を入れていません。

必要ならESLintなどのリンターやお好みのビルド環境を追加してください。

Gitフック

Gitフックとは、Gitコマンドの前後で特定のスクリプトを実行する仕組みのことです。

このテンプレートではリンターエラーがある状態でのコミットをキャンセルするフックを用意しました。

GitフックはLefthookで管理しています。設定ファイルはlefthook.ymlです。

GitHub Actions

GitHubが提供する任意のワークフローを自動化するサービスです。

CIワークフローを用意しています。mainブランチへのプッシュやプルリクエストの作成・変更でトリガーされ、リントとビルドを実行します。

実際の開発では、私は以下のようなワークフローも用意します。

• テスト環境へのデプロイ
• リリースの生成
• リリースの公開をトリガーとした本番環境へのデプロイ

リリースの生成やデプロイのワークフローについては以前に記事を書いたので、興味があればそちらを参照してください。

GitHub Actionsで日付ベースのリリースを自動生成する｜greencider（グリーンサイダー）

GitHub Actionsで日付ベースのリリースを自動生成する方法を解説。日付+連番形式のタグで一貫したリリース管理が可能になります。

greencd.jp

GitHub Actionsとrsyncでデプロイを自動化する｜greencider（グリーンサイダー）

GitHub Actionsとrsyncでデプロイを自動化する方法を解説。ワークフロー作成から設定まで、効率的なデプロイ環境の構築方法を紹介します。

greencd.jp

依存パッケージの更新

このテンプレートではRenovateを使っています。

Renovateは依存パッケージの更新の有無を監視し、更新があればアップデートのためのプルリクエストを自動で生成してくれます。

設定ファイルはrenovate.jsonです。Renovateはデフォルトだと頻繁にプルリクエストをリベースしてCIをぶん回してしまうので、自動でリベースしないよう設定しています。このあたりの詳細も記事にしています。興味があればどうぞ。

RenovateによるCI実行回数を削減する｜greencider（グリーンサイダー）

RenovateのプルリクエストによるGitHub Actionsの過剰な実行を防ぐ設定方法を解説します。

greencd.jp

おまけ：wp-envのローカル環境に本番環境のデータを同期するスクリプト

テンプレートには含まれていませんが、併用すると便利なスクリプトがあるのでついでに紹介します。

ローカルで開発を進めていると、本番環境とローカルを同期させたくなることがあります。サイト移行プラグインを使えばできなくはないですが、サイトの規模が大きいとプラグインの容量制限に引っかかったり作業に時間がかかったりするので面倒です。

そこで以前、この同期を自動化するスクリプトを作成しました。このテンプレートと合わせて利用するととても便利です。

詳細は以下の記事をご覧ください。

wp-envのローカル環境に本番環境のデータを同期するスクリプト｜greencider（グリーンサイダー）

wp-envのローカル環境に本番データを安全に同期するBashスクリプトを紹介。データベースやファイルの同期を自動化し、開発効率を大幅に向上させます。

greencd.jp

まとめ

本記事では、開発環境を整備したMy Snow Monkeyテンプレートを紹介しました。

リンター・フォーマッター・ビルドツール・CI/CDなど、規模の大きなSnow Monkeyカスタマイズに必要な開発環境を一通り揃えています。そのまま使うもよし、プロジェクトに合わせてカスタマイズするもよしです。ぜひ活用してみてください。