WordPressの開発環境の構築メモ

WordPressの開発環境の構築メモ

2021年4月2日
WordPress

今回は自分がWordPressの開発を行う上で構築をした開発環境についてメモを残してみます。
基本のパッケージ管理システムであるComposer及びnpmのインストールについては書かないのでご了承ください。

また自分の開発環境は以下のようになりますので、ご参考程度に眺めてみてください。

macOS Catalina v10.15.7
VSCode
Git v2.24.3

PHP v7.3.11
Composer v2.0.11
Node.js v14.15.0
npm v6.14.8

目次

基本的な考え方について

開発環境の構築において基本的に考えていたのは、「できるだけモダンな開発環境を構築していきたい」ということでした。
モダンな開発環境を定義するのは難しいのですが、自分が普段フロントエンドの開発を行う際にあると便利と感じる以下の機能があるべきだと考えました。

  • コードの静的解析＆自動整形
  • モジュールバンドラー

また技術の選定に関しては最新のテーマ開発を行っている（と思われる）Snow MonkeyとyStandardのコードを参考にさせていただきました。
参考にさせてもらったコードは以下のリポジトリにあります。

作成者のお二人には感謝の気持ちでいっぱいです。
本当にありがとうございました！

環境構築の手順

今回はcomposerやnpmでライブラリをローカルにインストールすることで、必要な機能を導入していきます。
ちなみにグローバルで入れることを避けているのは、もし他の人が開発に関わる様になった際に、個人の開発環境によって「動く or 動かない」といったトラブルを避けるためです。

PHP_CodeSniffer +α

まずはPHPの静的解析ツールであるPHP_CodeSnifferとWordPressのコーディング規約を導入するための周辺ライブラリなどを導入します。

{
  // 導入したライブラリ一覧
  "require-dev": {
    "squizlabs/php_codesniffer": "^3.5",
    "dealerdirect/phpcodesniffer-composer-installer": "^0.7.1",
    "wp-coding-standards/wpcs": "^2.3",
    "phpcompatibility/phpcompatibility-wp": "^2.1"
  }
}

その後、composer.jsonにscriptsを追加します。

{
  "scripts" :{
    "format": "phpcbf --standard=.phpcs.xml.dist --report-summary --report-source",
    "lint": "phpcs --standard=.phpcs.xml.dist"
  }
}

また一部カスタマイズをしたかったので、.phpcs.xml.distを作成し、ルールセットを記述しています。

<?xml version="1.0"?>
<ruleset name="WordPress Coding Standards">
  <description>My rules for WordPress</description>

  <arg name="colors"/>
  <arg value="ps"/>
  <arg name="extensions" value="php"/>

  <file>.</file>

  <exclude-pattern>*/node_modules/*</exclude-pattern>
  <exclude-pattern>*/vendor/*</exclude-pattern>
  <exclude-pattern>*/assets/*</exclude-pattern>

  <rule ref="WordPress"/>

  <config name="testVersion" value="7.2-"/>
  <rule ref="PHPCompatibilityWP"/>

  <rule ref="WordPress.NamingConventions.PrefixAllGlobals">
    <properties>
        <property name="prefixes" type="array">
            <element value="my_prefix"/> //ここは好きなプレフィックスに変えます
        </property>
    </properties>
  </rule>
</ruleset>

wp-scripts

次はJavaScriptとSassの静的解析をするためのツールを導入します。

いつもは自分でESLintやPrettierを設定しているのですが、今回はWordPressのコーディング規約に沿ったlintを設定するために、wp-scriptsを使うことにしました。

wp-scriptsは様々なツール群（Webpack、ESLint、Prettierなど）をWordPress用にカスタマイズしたものになります。
自分はWordPress用のParcelみたいなものだと理解しました。

今回はlintの設定を使いたかったので、以下のようなpackage.jsonにscriptsを追加します。

{
  "scripts": {
    "lint:php": "composer lint && composer format",
    "lint:js": "wp-scripts format-js src/**/*.js && wp-scripts lint-js src/**/*.js",
    "lint:scss": "wp-scripts lint-style src/**/*.scss --fix"
  }
}

これによってJavaScriptのlintとSassのlintがnpm-scriptsでの使用が可能になります。
標準でscssファイルの解析もしてくれるのは嬉しい誤算でした。

また今回はJavaScriptのモジュールバンドルにもwp-scriptsを利用します。

{
  "scripts": {
    "build:js": "rm -rf assets/js && wp-scripts build src/js/main --output-path=assets/js"
  }
}

今回はmain.jsというファイルのみを指定していますが、必要に応じて追加する形を想定しています。

現状だとJavaScriptが圧縮されないので、webpack.config.jsをルートディレクトリに追加し、modeをproductionに切り替えます。

module.exports = {
	mode: 'production',
};

dart-sass + postcss

本当はwp-scriptsで全てを完結したかったんですが、どうやらSassのCSSへのコンパイルやCSSのベンダープレフィックス、圧縮などの設定はないみたいなので、別のライブラリを追加します。

今回はSassのコンパイルにdart-sass、CSSのベンダープレフィックス、圧縮などにはpostcssを使うことにします。

{
  "devDependencies": {
    "@wordpress/browserslist-config": "3.0.1",
    "autoprefixer": "10.2.5",
    "cssnano": "4.1.10",
    "node-css-mqpacker": "8.0.1",
    "postcss": "8.2.9",
    "postcss-cli": "8.3.1",
    "postcss-mq-optimize": "1.1.0",
    "sass": "1.32.8"
  }
}

postcss.config.jsではpostcssの設定を行っています。

module.exports = {
	plugins: [
		require( 'autoprefixer' ),
		require( 'node-css-mqpacker' )( {
			sort: true,
		} ),
		require( 'postcss-mq-optimize' ),
		require( 'cssnano' )( {
			preset: 'default',
		} ),
	],
};

またautoprefixer用に対応ブラウザの設定を.browserslistrcで指定します。

extends @wordpress/browserslist-config

これで一通りの設定が終わったので、以下のscriptsでビルドができるようになります。

{
  "scripts": {
    "build:css": "rm -rf assets/css && sass src/scss:assets/css --no-source-map && postcss assets/css --replace"
  }
}

lint-staged + simple-git-hooks

最後に設定したlintをgitのコミット時に忘れずに実行するようにします。
今回はlint-stagedとsimple-git-hooksを用いています。

{
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  },
  "lint-staged": {
    "*.php": "npm run lint:php",
    "*.js": "npm run lint:js",
    "*.scss": "npm run lint:scss"
  },
  "devDependencies": {
    "lint-staged": "10.5.4",
    "simple-git-hooks": "2.2.0"
  }
}

以上が現在（2021/04/02時点）の自分の開発環境になります。
参考までにGitHubのリポジトリも作ったので、良ければ参考にしてみてください。

今後も使いながら改善を加えていきたいと思っています！