このサイトは、Snow Monkeyというテーマを使用していて、Snow Monkeyが推奨しているmy-snow-monkeyプラグインを使用してテーマのカスタマイズを行っています。
いくつかのサイトにSnow Monkeyをインストールしているので、my-snow-monkeyプラグインのサンプル、スターターキットを作りました。
このスターターキットは、フロントエンドの開発で使っているWebpackを使用し、js、scssを簡単にビルド、LiveReloadする設定にしています。(基本jsはes6+、cssは、scssで作成するようにしています。普通のjs、cssでも大丈夫です。)
css in jsではなく、jsとcssは分けて出力されるように設定しています。style.css、editor-style.cssはsrcディレクトリのstyle.scss、editor-style.scssを修正し、カスタマイズする jsは、srcディレクトリのapp.jsを修正してください。
ビルドしたjs、cssは、assetsディレクトリに出力され、phpでjs、cssを読み込んで使います。
jsのライブラリに画像やcssが含まれている場合があり、都度ファイルを設置するのが面倒なので、jsでライブラリのjs、cssを読み込むようにしています。ライブラリで使用された画像などがassetsに出力されるので、パスなど、なにも考えずに利用できます。
普段のフロントエンド開発は、Webpack Dev Serverを使って、ホットリロードの設定をして使っていますが、Wordpressの場合ホットリロードができないため、LiveReloadで、js、scssを変更した場合、ブラウザをリロードする設定にしました。(phpの変更はリロードしません、phpを変更した場合は、ブラウザをリロードしてください。)
また、LiveReloadをhttpsで使えるように設定ファイルを作成しました。
すごく、快適に開発できると思うので、よかったら使ってくだい。
サンプルファイル
スターターキットをダウンロードしてください。プラグイン名がMy Snow Monkey Sampleになっているので、名前を書き換えた方がいいです。
my-snow-monkey-sample.php
には、my-snow-monkeyのデフォルト設定は記述していません。公式サイトからmy-snow-monkey
をダウンロードし、my-snow-monkey-sample.php
の指定の場所にコピペしてから使ってください。
サンプルファイルダウンロード
ディレクトリ構造
プラグインのディレクトリは下記のようになっています。
my-snow-monkey-sample
assets # ビルドしたファイルの出力場所
app.css
app.js
app.js.LICENSE.txt
editor-style.css
style.css
node_modules
override # 上書きするSnow Monkeyのテンプレートファイルの設置場所
src # js、css、imageなどのソースの設置場所
css
_core.scss
app.scss
editor-style.scss
style.scss
img
js
app.js
.babelrc
.env
.env.sample
.eslintignore
.eslintrc.js
admin.php # 管理画面用のカスタマイズを書く
front.php # フロント用のカスタマイズを書く
my-snow-monkey-sample.php # my-snow-monkey本体
package.json
postcss.config.js
README.md
webpack.config.js # webpackの設定ファイル
yarn.lock
開発環境
my-snow-monkey-sample.phpの中身です。Snow Monkeyのテンプレートの上書きの設定と、style.css、editor-style.cssの読み込みの設定、カスタマイズしたapp.js、app.jsで使用しているcssをapp.cssに書き出したapp.cssも読み込み設定をしています。
キャッシュ対策もしているので、気にせず使ってください。
my-snow-monkey-sample.php
には、my-snow-monkeyのデフォルト設定は記述していません。公式サイトからmy-snow-monkey
をダウンロードし、my-snow-monkey-sample.php
の指定の場所にコピペしてから使ってください。
<?php
/**
* Plugin name: My Snow Monkey Sample
* Description: このプラグインに、あなたの Snow Monkey 用カスタマイズコードを書いてください。
* Version: 0.2.1
*
* @package my-snow-monkey-sample
* @author webkei
* @license GPL-2.0+
*/
// 〜 TODO さまざまなmy-snow-monkeyプラグインの設定(my-my-snow-monkeyからコピーすること) 〜
/**
* My Snow Monkey の中でテンプレートを追加できるようにする
*/
add_filter(
'snow_monkey_template_part_root_hierarchy',
function ($hierarchy) {
$hierarchy[] = untrailingslashit(__DIR__) . '/override';
return $hierarchy;
}
);
/**
* フロントに関するものを記述する
*/
include_once( __DIR__ . '/front.php' );
/**
* 管理画面に関するものを記述する
*/
include_once( __DIR__ . '/admin.php' );
インストール
ダウンロードしたmy-snow-monkey-sampleをpluginsディレクトリに配置して、my-snow-monkey-sampleプラグインを有効にしてください。
プラグインを修正する場合は、プラグインディレクトリに移動してください。
$ cd wp-content/plugins/my-snow-monkey-sample/
サンプルには、node_modulesが含まれていないの、インストールしてください。
$ yarn
開発サーバー起動
開発サーバーを起動します。
起動中、js、scssなどを変更すると、ブラウザがリロードする設定になっています。
「Control + c
」で停止できます。
$ yarn start
ビルド
完成したら、「Control + c
」で開発サーバーを停止し、ビルドしてください。
js、css、imageなどは、assetsディレクトリに出力されます。サイトを公開している場合は、出力されたassetsディレクトリをサーバーにアップロードしてください。
$ yarn build
package.json
使用している、 jsライブラリは下記になります。prettierが設定されているので、IDEで、ファイルを保存したらprettierが実行されるように設定すると便利です。
{
"name": "my-snow-monkey",
"description": "my-snow-monkey project",
"version": "1.0.0",
"author": "cubdesign",
"license": "GPL-3.0+",
"private": true,
"scripts": {
"start": "webpack --watch",
"build": "webpack --mode=production --node-env=production",
"build:dev": "webpack --mode=development",
"build:prod": "webpack --mode=production --node-env=production",
"watch": "webpack --watch"
},
"dependencies": {
"jquery": "3.5.1"
},
"devDependencies": {
"@babel/core": "^7.14.3",
"@babel/preset-env": "^7.14.2",
"@webpack-cli/generators": "^2.1.0",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^5.2.4",
"dotenv": "^10.0.0",
"dotenv-webpack": "^7.0.3",
"eslint": "^7.29.0",
"mini-css-extract-plugin": "^1.6.0",
"postcss": "^8.2.15",
"postcss-loader": "^5.3.0",
"prettier": "^2.3.0",
"sass": "^1.32.13",
"sass-loader": "^11.1.1",
"style-loader": "^2.0.0",
"webpack": "^5.37.0",
"webpack-cli": "^4.7.0",
"webpack-livereload-plugin": "^3.0.1",
"webpack-remove-empty-scripts": "^0.7.1"
},
"browserslist": [
"defaults",
"not dead",
"not op_mini all",
"ie 11"
]
}
webpack.config.js
webpackの設定は下記になります。
- 開発環境でのみ、source-mapの出力、LIveReloadを使う設定
- dotenv-webpackを使って.envからの変数の読み込み
- clean-webpack-pluginプラグインを使って、assetsディレクトリに不要なファイルが残らない設定
- js, cssをminifyする設定
※ jQueryをすでに読み込んでいる場合は、externalsの部分をコメントインしてください。
// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const fs = require("fs");
const webpack = require("webpack");
const Dotenv = require("dotenv-webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts");
const LiveReloadPlugin = require("webpack-livereload-plugin");
const isProduction = process.env.NODE_ENV == "production";
const stylesHandler = MiniCssExtractPlugin.loader;
// .envを読み込む
require("dotenv").config();
const config = {
entry: {
app: "./src/js/app.js",
style: "./src/css/style.scss",
"editor-style": "./src/css/editor-style.scss",
},
output: {
path: path.resolve(__dirname, "assets"),
},
plugins: [
new Dotenv(),
new RemoveEmptyScriptsPlugin(),
new MiniCssExtractPlugin({ filename: "[name].css" }),
new CleanWebpackPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
}),
],
// externals: {
// jquery: "jQuery",
// },
module: {
rules: [
{
test: /\.(js|jsx)$/i,
loader: "babel-loader",
},
{
test: /\.s[ac]ss$/i,
use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"],
},
{
test: /\.css$/i,
use: [stylesHandler, "css-loader", "postcss-loader"],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: "asset",
},
],
},
};
/*
LiveReload 設定 Start -------------------
*/
// KEYファイルへのwebpack.config.jsからの相対パス
const WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH =
process.env.WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH;
// CERTファイルへのwebpack.config.jsからの相対パス
const WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH =
process.env.WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH;
const liveReloadPluginOptions = {
// 自動で、LiveReload用のScriptタグを埋め込む
appendScriptTag: true,
};
if (
WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH &&
WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH
) {
/*
HTTPSでLiveReloadを使う設定
*/
liveReloadPluginOptions.protocol = "https";
liveReloadPluginOptions.key = fs.readFileSync(
path.resolve(__dirname, WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH)
);
liveReloadPluginOptions.cert = fs.readFileSync(
path.resolve(__dirname, WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH)
);
}
/*
LiveReload 設定 End -------------------
*/
module.exports = () => {
if (isProduction) {
config.mode = "production";
} else {
config.mode = "development";
// source-mapを有効にする
config.devtool = "inline-source-map";
// LiveReloadを有効にする
config.plugins.push(new LiveReloadPlugin(liveReloadPluginOptions));
}
return config;
};
HTTPS対応
mkcertというコマンドラインツールを使うと、ローカルに簡単にSSLの認証局(CA)をインストールできて、サーバー証明書とキーが作成できます。
このツールを使用して、ローカルに作ったHTTPSで動いているWordpPressサイトをWebpackを使ってLiveReloadできるように設定していきます。
mkcertのインストール
Homebrewを使用して、mkcertをインストールします。
$ brew install mkcert
ルート証明書の作成
インストールできたら、ルート証明書を作成してます。これは最初の1回のみでいいです。
$ mkcert -install
サーバー証明書、キーの発行
ローカルの開発環境のドメインごとに、サーバー証明書、キーの発行をおこないます。
証明書の保存場所に移動
$ cd {保存する場所}
僕は、Localアプリを使用しているので、、Wordpressインストールディレクトリの2階層上のディレクトリ、appディレクトリと並列にcertsディレクトリを作成し、certsの中にサーバー証明書、キーを保存するようにしています。

証明書の作成(例:ドメインがwebkei.local
の場合)
$ mkcert webkei.local
webpackの設定
.env.sampleをコピーして、.envを作成します。
ここに、my-snow-monkey-sampleプラグインからの相対パスで、作成したサーバー証明書、キーを設定します。
下記の例は、上記のパスにサーバー証明書、キーを作成した場合の設定です。
再起動、「Control + c
」でwebpackを停止し、「yarn start
」するとhttpsのサイトでLiveReloadできるようになります。
WEBPACK_LIVE_RELOAD_PLUGIN_SSL_KEY_PATH=../../../../../certs/webkei.local-key.pem
WEBPACK_LIVE_RELOAD_PLUGIN_SSL_CERT_PATH=../../../../../certs/webkei.local.pem
サンプルファイルダウンロード
まとめ
最初、黒い画面を使わず開発できるようにPreprosアプリで開発環境を作成していましたが、jsライブラリで使われている画像などが出力されないので結局、黒い画面を使うようにしました。
フロントエンド開発に慣れている人であれば、便利に使えるように設定しました。
普段Webpackを使用していない人も、yarn start
, yarn build
の2つのコマンドだけなので、この際試してみることをおすすめします。
よかったら使ってください!
次回は、より安全に開発できるようTypeScriptに移行したものを公開します。