Snow Monkeyのテーマをmy-snow-monkeyでカスタマイズする、webpackを使って作る快適な開発環境のサンプル

このサイトは、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をダウンロードできます。

ディレクトリ構造

プラグインのディレクトリは下記のようになっています。

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の中にサーバー証明書、キーを保存するようにしています。

画像に alt 属性が指定されていません。ファイル名: 30456a6971fff8c1cd2abb3c963573a9-1024x567.png

証明書の作成(例:ドメインが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

サンプルファイルダウンロード

ファイルダウンロード

ここで、紹介したmy-snow-monkey-sampleをダウンロードできます。

まとめ

最初、黒い画面を使わず開発できるようにPreprosアプリで開発環境を作成していましたが、jsライブラリで使われている画像などが出力されないので結局、黒い画面を使うようにしました。

フロントエンド開発に慣れている人であれば、便利に使えるように設定しました。

普段Webpackを使用していない人も、yarn start, yarn buildの2つのコマンドだけなので、この際試してみることをおすすめします。

よかったら使ってください!

次回は、より安全に開発できるようTypeScriptに移行したものを公開します。

この記事を書いた人

Takeo Tamura

療養中。フリーランス。Engineer 🇯🇵 Designer,Full-stack Developer. ❤️🧘‍♂️❤️🍶 ❤️ fashion