WordPress環境構築

LocalなどでWordPress環境を構築する

プラグイン雛形をインストール

WordPressのプラグインディレクトリにmy-blockフォルダを作成し、Visual Studio Codeなどのエディターで開いてwp-envコマンドを実行する

npx @wordpress/create-block my-dynamic-block --variant dynamic

プラグインディレクトリに移動

cd my-dynamic-block

wp-env起動

npm start

Dockerのインストール確認

コマンドプロンプトを起動し、Dockerのインストールバージョンを表示するコマンドを入力し、インストールを確認する。問題なければ、Dockerを起動する

docker -v
// Docker version 27.3.1

wp-envをインストール

コマンドプロンプトにwp-envのインストールコマンドを入力し実行する。インストール終了後、wp-envのバージョンを表示してインストールを確認する

npm -g install @wordpress/env
// もしくは
npm i @wordpress/env –save-dev

npm run wp-env -v
// 10.9.2

プラグイン雛形をインストール

デスクトップなどにmy-blockフォルダを作成し、Visual Studio Codeなどのエディターで開いてwp-envコマンドを実行する

// wp-envの設定が済んだプラグイン雛形を作成したい場合
npx @wordpress/create-block my-block --wp-env

// package.jsonとpackage-lock.jsonを生成したい場合
npm i @wordpress/env --save-dev

.wp-env.override.jsonを作成

生成された.wp-env.jsonを複製し、.wp-env.override.json にリネームしたのち、ポート番号を設定する。.wp-env.override.jsonは.wp-env.jsonを上書きできる

• WordPressリリース
  • 最新版： https://ja.wordpress.org/latest-ja.zip
• .wp-env.json

// .wp-env.override.json 編集前
{
	"core": "WordPress/WordPress",
	"plugins": [
		"."
	]
}

// .wp-env.override.json 編集後
{
	"core": "https://wordpress.org/wordpress-6.5.5.zip",
	"plugins": ["."],
	"port": 3001,
	"env": {
		"tests": {
			"port": 3002
		}
	}
}

package.jsonを編集

生成されたpackage.jsonにのscriptsブロックに"wp-env": "wp-env",を追記

{
	"name": "my-block",
	"version": "0.1.0",
	"description": "Example block scaffolded with Create Block tool.",
	"author": "The WordPress Contributors",
	"license": "GPL-2.0-or-later",
	"main": "build/index.js",
	"scripts": {
		"wp-env": "wp-env",
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start",
		"env": "wp-env"
	},
	"devDependencies": {
		"@wordpress/env": "^10.15.0",
		"@wordpress/scripts": "^30.8.1"
	}
}

プラグインディレクトリに移動

cd my-block

wp-env起動

npm run wp-env start

WordPressにログイン

フロント：http://localhost:8888
ログイン：http://localhost:8888/wp-login.php
ユーザー名：admin
パスワード：password

WordPressローカル環境内でフォルダ移動

1. あらかじめ構築したWordPressのインストールフォルダをVisual Studio Code等のエディターで開く
2. Visual Studio CodeのターミナルをCtrl＋＠で開く
3. ターミナルに、WordPressのプラグインディレクトリに移動するコマンドを入力してEnter

cd wp-content/plugins/

@wordpress/create-blockを実行

pluginフォルダで@wordpress/create-blockをインストールするコマンドを実行する

npx @wordpress/create-block@latest my-create-block

my-create-blockディレクトリが生成され、その配下にプラグインの雛形がインストールされる

• my-create-block
  • node_modules // node本体
  • package-lock.json
  • package.json // 依存関係とローカル開発で使用するスクリプトを定義
  • my-block.php // ブロックをWordPressに登録するプラグインのメインのPHPファイル
  • build // srcをビルドした時の出力先
    • block.json
    • index-rtl.css
    • index.asset.php
    • index.css
    • index.js
    • style-index-rtl.css
    • style-index.css
    • view.asset.php
    • view.js
  • src // 開発用ディレクトリ
    • block.json
    • edit.js
    • editor.scss
    • index.js
    • save.js
    • style.scss
    • view.js
  • .wp-env.json
  • .editorconfig // コーディングスタイルを統一
  • .gitignore // gitで管理しないファイルを指定
  • readme.txt

生成したプラグインフォルダに移動

cd my-create-block

npmを起動

npm start

WordPressのダッシュボードにログインし、プラグインを有効化する

WordPressローカル環境内でフォルダ移動

1. WordPressのインストールフォルダをVisual Studio Code等のエディターで開く
2. Visual Studio CodeのターミナルをCtrl＋＠で開く
3. ターミナルに、WordPressのプラグインディレクトリに移動するコマンドを入力してEnter

cd wp-content/plugins/

プラグインディレクトリ作成し移動

1. カスタムブロックの雛形をインストールするフォルダを作成し、そのフォルダに移動する

mkdir my-block
cd my-block

2. プラグインを構成する、buildディレクトリ、srcディレクトリ、src/index.jsファイルを作成する

• my-block/
  • build/ // 新規作成
  • src/ // 新規作成
    • index.js // 新規作成

@wordpress/scriptsをインストール

1. @wordpress/scriptsをインストールするコマンドを実行する

npm install @wordpress/scripts --save-dev

2. パッケージの情報が表示されたらインストール終了

added 1424 packages in 1m

264 packages are looking for funding
  run `npm fund` for details

3. インストールしたnpmのリストを確認し、@wordpress/scriptsがあればインストール成功

npm list
// @wordpress/scripts@30.8.1

プラグインディレクトリの構成を確認

node_modulesフォルダと、package.json、package-lock.jsonファイルが自動生成されている

• my-block
  • node_modules/ // 自動生成
  • build/
  • src/
    • index.js
  • package-lock.json // 自動生成
  • package.json // 自動生成

スクリプトを記述

package.jsonにビルドなどに使用するコマンドを記述する

{
  "scripts": {
    "start": "wp-scripts start",
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js"
  },
  "devDependencies": {
    "@wordpress/scripts": "^30.8.1"
  }
}

npmを起動

npmを起動するコマンドを入力するとビルド処理が走り、buildフォルダが更新される

npm run start

プラグインをWordPressに登録するファイルを作成

my-block配下にmy-block.phpを作成し、Plugin Name等の基本情報と、プラグインをWordPressに登録する処理を記述する。ダッシュボード＞プラグイン一覧からプラグインを有効化する

<?php
/*
Plugin Name: My Block
Plugin URI: https://example.com
*/

function create_block_my_block() {
    register_block_type(__DIR__ . '/build/my-block');
}
add_action('init', 'create_block_my_block');

作成したプラグインはエディターから挿入できるようになる。