WordPress開発では、VSCodeを使うことでPHP・HTML・CSS・JavaScriptなどのファイルを効率よく編集できます。
さらに、Gitによるバージョン管理、ターミナル操作、PHPのコード補完、デバッグ、コーディング規約のチェックなどもVSCode上でまとめて行えます。
特に、独自テーマや独自プラグインを開発する場合は、WordPress管理画面のテーマファイルエディターで直接編集するよりも、ローカル環境とVSCodeを組み合わせて開発した方が安全です。
WordPress開発では、次のような構成を作ると効率的です。
VSCode
↓
WordPressのテーマ・プラグインを編集
↓
ローカル環境で動作確認
↓
Gitで変更履歴を管理
↓
ステージング環境
↓
本番環境
WordPress開発ではローカル環境を用意する
本番サイトを直接編集しない
WordPress開発を行う場合、本番サーバー上のファイルを直接編集する方法はできるだけ避けた方がよいでしょう。
PHPファイルに記述ミスがあると、WordPressサイト全体が表示されなくなる可能性があるためです。
そのため、基本的にはPC上にWordPressのローカル環境を構築し、その環境のファイルをVSCodeで編集します。
開発の流れとしては、次のような形が一般的です。
ローカル環境
↓
VSCodeで編集
↓
ブラウザで確認
↓
Gitへコミット
↓
ステージング環境で確認
↓
本番環境へ反映
WordPressのローカル環境を構築する
WordPressのローカル環境を構築する方法には、複数の選択肢があります。
代表的なものには、次のような環境があります。
wp-env
WordPress Studio
Local
XAMPP
MAMP
Docker
VVV
初心者の場合は、GUIで操作しやすいWordPress StudioやLocalなどを利用すると比較的簡単です。
一方、テーマ・プラグイン・カスタムブロックを本格的に開発する場合は、WordPress公式が提供するwp-envも便利です。
wp-envとVSCodeを組み合わせる
wp-envとは
wp-envは、WordPress公式の@wordpress/envパッケージによって提供されているローカル開発環境です。
WordPressのテーマやプラグイン、カスタムブロックなどの開発環境を比較的簡単に構築できます。
標準ではDockerを利用します。
現在は、実験的な機能としてWordPress Playground Runtimeを利用する方法もあります。
wp-envに必要な環境
一般的には、次のツールを用意します。
VSCode
Node.js
npm
Git
Docker
なお、VSCodeはwp-env自体を動かすための必須ツールではありません。
VSCodeは、WordPressのコードを編集するためのエディタとして利用します。
wp-envをインストールする
VSCodeの統合ターミナルを開き、次のコマンドを実行します。
npm install -g @wordpress/env
インストールできたか確認する場合は、次のコマンドを実行します。
wp-env --version
プロジェクト単位で管理したい場合は、グローバルインストールではなく、次のようにインストールすることもできます。
npm install @wordpress/env --save-dev
複数人で開発する場合は、package.jsonでバージョンを管理できるプロジェクト単位のインストールも便利です。
wp-envでWordPressを起動する
プロジェクトのディレクトリで、次のコマンドを実行します。
wp-env start
標準設定では、次のURLからWordPressへアクセスできます。
http://localhost:8888
管理画面は次のURLです。
http://localhost:8888/wp-admin
標準のログイン情報は、次のようになっています。
ユーザー名：admin
パスワード：password
これはローカル開発環境用の認証情報です。
本番環境では、このような単純なパスワードを使用しないようにします。
参考サイト
wp-env の使い方（WordPress のローカル環境構築）
VSCodeでWordPressプロジェクトを開く
テーマ開発の場合
独自テーマを開発する場合は、基本的に次のディレクトリをVSCodeで開きます。
wp-content/themes/テーマ名/
例えば、次のような構成です。
wp-content/
└─ themes/
└─ my-theme/
├─ style.css
├─ functions.php
├─ index.php
├─ header.php
└─ footer.php
VSCodeの「ファイル」から「フォルダーを開く」を選択してもよいですし、コマンドラインから次のように開くこともできます。
code .
WordPress全体ではなく、開発対象のテーマだけをVSCodeで開くと、検索結果やファイル一覧が整理されて使いやすくなります。
プラグイン開発の場合
独自プラグインを開発する場合は、次のようなディレクトリをVSCodeで開きます。
wp-content/plugins/my-plugin/
例えば、次のような構成です。
my-plugin/
├─ my-plugin.php
├─ includes/
├─ assets/
└─ languages/
テーマ開発と同じように、プラグイン単位でVSCodeのワークスペースを作成すると管理しやすくなります。
クラシックテーマをVSCodeで開発する
クラシックテーマの基本ファイル
クラシックテーマでは、PHPテンプレートを中心に開発します。
最小構成として重要なのは、主に次のファイルです。
style.css
index.php
実際のテーマでは、さらに次のようなファイルを利用することが一般的です。
functions.php
header.php
footer.php
single.php
page.php
archive.php
404.php
functions.phpは、テーマ機能を追加するために利用されます。
PHPテンプレートを編集する
例えば、index.phpでは次のようなコードを記述できます。
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
</article>
<?php
endwhile;
endif;
?>
</main>
<?php get_footer(); ?>
VSCodeでファイルを保存したあと、ブラウザを再読み込みすれば変更内容を確認できます。
ブロックテーマをVSCodeで開発する
ブロックテーマはクラシックテーマと構造が異なる
現在のWordPressでは、クラシックテーマだけでなくブロックテーマも利用できます。
ブロックテーマでは、PHPテンプレートだけではなく、HTMLテンプレートやtheme.jsonなどが重要になります。
代表的な構成は次のようになります。
my-block-theme/
├─ style.css
├─ theme.json
├─ functions.php
├─ templates/
│ ├─ index.html
│ └─ single.html
└─ parts/
├─ header.html
└─ footer.html
そのため、クラシックテーマとブロックテーマでは開発方法が異なります。
ブロックテーマではtheme.jsonが重要
theme.jsonでは、テーマのデザイン設定やエディター設定などを管理できます。
例えば、色、タイポグラフィ、余白などの設定を一元管理できます。
ブロックテーマを開発する場合は、PHPだけでなくJSONやHTMLも扱うことになります。
WordPressプラグインをVSCodeで開発する
プラグインの基本構成
簡単なプラグインであれば、次のような構成から作成できます。
my-plugin/
└─ my-plugin.php
例えば、my-plugin.phpには次のようなコードを書けます。
<?php
/**
* Plugin Name: Sample Plugin
* Description: VSCodeで開発するサンプルプラグインです。
* Version: 1.0.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
function sample_plugin_message() {
echo '<p>Hello WordPress!</p>';
}
add_action( 'wp_footer', 'sample_plugin_message' );
WordPress管理画面からプラグインを有効化すると、動作を確認できます。
VSCodeでPHPの補完機能を利用する
PHP拡張機能を導入する
WordPressではPHPを多く使用するため、コード補完機能を整えると開発効率が上がります。
代表的な選択肢の一つが「PHP Intelephense」です。
PHP Intelephenseを利用すると、次のような機能を利用できます。
コード補完
関数やメソッドの情報表示
定義へ移動
参照検索
静的解析
シンボル検索
ただし、IntelephenseはWordPress公式やMicrosoft公式の拡張機能ではありません。
PHP開発を効率化する選択肢の一つとして利用するとよいでしょう。
PHP補完系の拡張機能を重複させない
PHPの補完を行う拡張機能を複数導入すると、機能が競合する可能性があります。
そのため、PHP Language Server系の拡張機能は、基本的に1つを中心に利用する方が管理しやすくなります。
WordPress関数の補完を使う
WordPressでは、次のような専用関数を頻繁に利用します。
get_header();
get_footer();
get_template_directory_uri();
wp_enqueue_script();
wp_enqueue_style();
add_action();
add_filter();
PHP Language ServerがWordPress本体のソースコードを認識できていれば、WordPress関数の補完や定義ジャンプが利用しやすくなります。
例えば、get_template_directory_uri()の定義を確認したい場合でも、ブラウザで検索することなくVSCodeから定義元を確認できます。
VSCodeの統合ターミナルを活用する
VSCode内でコマンドを実行する
VSCodeには統合ターミナルが搭載されています。
そのため、エディタを閉じることなく、次のようなコマンドを実行できます。
git
npm
composer
php
wp
wp-env
例えば、次のような操作ができます。
git status
npm install
npm run build
composer install
開発に必要な作業をVSCode内で完結しやすい点は、大きなメリットです。
WP-CLIをVSCodeから利用する
WP-CLIとは
WP-CLIは、WordPressをコマンドラインから操作できるツールです。
WordPress管理画面を開かなくても、テーマやプラグインの管理などを行えます。
例えば、プラグイン一覧は次のコマンドで確認できます。
wp plugin list
テーマ一覧は次のコマンドです。
wp theme list
テーマを有効化する場合は、次のように実行します。
wp theme activate my-theme
プラグインの有効化は、次のように実行できます。
wp plugin activate my-plugin
実行方法はローカル環境によって異なる
WP-CLIがインストールされていれば、VSCodeのターミナルから直接wpコマンドを実行できます。
ただし、Dockerなどの環境では、WordPressが動作しているコンテナ内でWP-CLIを実行する構成もあります。
そのため、すべての環境で単純にwpと入力すれば利用できるとは限りません。
VSCodeとGitを組み合わせる
WordPress開発ではGitを利用する
WordPressのテーマやプラグイン開発では、Gitで変更履歴を管理すると安全です。
例えば独自テーマをGit管理する場合は、次のように初期化できます。
git init
変更内容を追加します。
git add .
コミットします。
git commit -m "Initial commit"
VSCodeにはGit機能が標準で統合されているため、コマンドだけでなくGUIでも操作できます。
WordPress本体を必ずGit管理する必要はない
WordPressプロジェクトによって、Git管理する範囲は異なります。
例えば、独自テーマだけを管理する場合は次のようになります。
my-theme/
├─ assets/
├─ template-parts/
├─ functions.php
├─ style.css
├─ package.json
└─ .git/
この方法であれば、WordPress本体と自分が開発したコードを分離できます。
一方、プロジェクトによってはwp-content全体や、Composerを利用したWordPress環境全体をGit管理する場合もあります。
WordPress Coding Standardsを導入する
WordPressには独自のコーディング規約がある
WordPressには、PHP・HTML・CSS・JavaScriptなどに関するCoding Standardsがあります。
さらに、Accessibility Coding Standardsも用意されています。
WordPress Coreへの貢献では規約への準拠が重要ですが、独自テーマや独自プラグインの開発でも利用すると、コード品質を統一しやすくなります。
PHP_CodeSnifferを利用する
PHPでは、PHP_CodeSnifferとWordPress Coding Standardsを組み合わせることで、コーディング規約違反を自動チェックできます。
例えば、次のような構成にできます。
VSCode
↓
PHPファイルを編集
↓
PHP_CodeSniffer
↓
WordPress Coding Standardsでチェック
↓
規約違反をVSCode上に表示
複数人でWordPressを開発する場合には、特に便利です。
VSCodeでWordPressをデバッグする
Xdebugを利用する
PHPの不具合を調査する場合は、Xdebugを利用すると効率的です。
VSCodeでは、PHP Debug拡張機能を利用してXdebugと連携できます。
設定が完了すると、次のような機能を利用できます。
ブレークポイント
ステップ実行
変数の確認
コールスタックの確認
条件付きブレークポイント
例えば、次のコードがあるとします。
function my_function() {
$value = get_option( 'my_option' );
return $value;
}
$value = get_option( 'my_option' );の行にブレークポイントを設定すれば、その時点で変数の内容を確認できます。
Xdebug 3では、標準のデバッグポートとして9003が利用されます。
ただし、環境によって変更することもできます。
WP_DEBUGを活用する
WordPressのデバッグ機能を有効化する
開発環境では、wp-config.phpに次の設定を追加できます。
define( 'WP_DEBUG', true );
これにより、WordPressのエラーや警告を確認しやすくなります。
さらに、次のような設定を利用することもあります。
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
この設定では、エラーをログへ記録しながら、ブラウザ画面には表示しない構成にできます。
本番環境では、デバッグ情報がユーザーに表示されないよう注意する必要があります。
WP_ENVIRONMENT_TYPEを設定する
WordPressの環境タイプを指定する
WordPressでは、WP_ENVIRONMENT_TYPEを使用して環境の種類を指定できます。
利用できる主な値は次の4種類です。
local
development
staging
production
例えば、開発環境では次のように設定できます。
define( 'WP_ENVIRONMENT_TYPE', 'development' );
環境ごとに処理やデバッグ設定を切り替えたい場合に便利です。
カスタムブロック開発ではNode.jsを利用する
@wordpress/create-blockを活用する
WordPressのカスタムブロック開発では、@wordpress/create-blockを利用するとプロジェクトの雛形を生成できます。
例えば、次のように実行します。
npx @wordpress/create-block@latest my-block
これにより、カスタムブロック開発に必要なファイルや設定をまとめて生成できます。
@wordpress/scriptsを利用する
WordPressのJavaScript開発では、@wordpress/scriptsを利用するとビルド・Lint・テストなどをまとめて扱えます。
一般的には、次のようなコマンドを利用します。
npm start
開発用のビルドを実行します。
本番用にビルドする場合は、次のようにします。
npm run build
@wordpress/scriptsを利用すれば、webpackなどを最初から細かく設定しなくても開発を始めやすくなります。
VSCodeのsettings.jsonを利用する
プロジェクト単位で設定を管理する
VSCodeでは、プロジェクト内に.vscode/settings.jsonを作成できます。
例えば、次のように設定できます。
{
"editor.formatOnSave": true,
"files.exclude": {
"**/.git": true
}
}
プロジェクト専用のVSCode設定を共有したい場合に便利です。
PHPの実行ファイルを指定する
WindowsでPHPの場所を明示する必要がある場合は、次のように設定できます。
{
"php.validate.executablePath": "C:/php/php.exe"
}
PHPがPATHに設定されていれば、この設定が不要な場合もあります。
.vscode/extensions.jsonを利用する
推奨拡張機能をチームで共有する
複数人でWordPress開発を行う場合は、.vscode/extensions.jsonを利用すると便利です。
プロジェクトで利用してほしいVSCode拡張機能をチームメンバーに提示できます。
例えば、次のような種類の拡張機能を共有できます。
PHP補完
PHPデバッグ
PHP_CodeSniffer
ESLint
Prettier
チーム内で開発環境を揃えやすくなります。
VSCodeの便利な機能をWordPress開発で活用する
定義へ移動
WordPress関数やPHPクラスの定義元を確認したい場合は、VSCodeの「定義へ移動」が便利です。
WordPressは関数の数が多いため、コードを追うときに役立ちます。
プロジェクト全体を検索する
VSCodeでは、Windowsなら次のショートカットでプロジェクト全体を検索できます。
Ctrl + Shift + F
例えば、次のような文字列を検索できます。
add_action
wp_enqueue_script
get_template_part
自作関数名
WordPressのどのファイルで処理が行われているかを調べる際に便利です。
Gitの差分を確認する
VSCodeでは、変更前と変更後のコードを比較できます。
テーマやプラグインの修正内容を確認するときに非常に便利です。
本番サーバーをVSCodeで直接編集しない
SFTPなどによる直接編集はできる
VSCodeからSFTPやSSHを使って本番サーバーのファイルを編集することは可能です。
しかし、直接編集すると、記述ミスによって本番サイトに障害が発生する可能性があります。
そのため、基本的には次のような流れがおすすめです。
ローカル環境
↓
VSCodeで開発
↓
Gitへコミット
↓
ステージング環境
↓
動作確認
↓
本番環境へ反映
この方法であれば、変更履歴も残せるため、不具合が発生した場合にも元に戻しやすくなります。
WordPress開発でおすすめのVSCode構成
基本的な開発環境
これからWordPress開発を始める場合は、まず次の構成がおすすめです。
VSCode
+
ローカルWordPress環境
+
PHP補完
+
Git
これだけでも、十分にテーマやプラグインを開発できます。
本格的な開発環境
より本格的にWordPress開発を行う場合は、次のような構成にすると便利です。
VSCode
│
├─ PHP補完
│
├─ Git
│
├─ PHP_CodeSniffer
│ └─ WordPress Coding Standards
│
├─ Xdebug
│
├─ WP-CLI
│
├─ Node.js
│
├─ npm
│
├─ @wordpress/scripts
│
├─ @wordpress/create-block
│
└─ ローカルWordPress環境
├─ wp-env
├─ WordPress Studio
└─ Local
WordPress開発の種類によって必要な環境は異なる
クラシックテーマ開発
クラシックテーマでは、PHPを中心に利用します。
PHP
HTML
CSS
JavaScript
VSCode＋PHP補完＋Gitという構成から始めるとよいでしょう。
ブロックテーマ開発
ブロックテーマでは、次のような技術が重要になります。
HTML
theme.json
CSS
PHP
JavaScriptやReactが必須というわけではありません。
プラグイン開発
一般的なプラグイン開発では、PHPを中心に利用します。
規模が大きくなれば、Composer、JavaScript、REST APIなどを組み合わせることもあります。
カスタムブロック開発
カスタムブロックでは、次のような技術を利用するケースが多くなります。
JavaScript
JSX
React
block.json
PHP
Node.js
npm
@wordpress/scripts
WordPress開発といっても、何を作るかによって必要な開発環境は大きく異なります。
WordPress開発でVSCodeを使う手順
初めてWordPress開発環境を作る場合は、次の順番で進めると理解しやすくなります。
1. VSCodeをインストールする
↓
2. WordPressのローカル環境を作る
↓
3. テーマまたはプラグインをVSCodeで開く
↓
4. PHP補完環境を導入する
↓
5. VSCodeの統合ターミナルを使う
↓
6. Gitを導入する
↓
7. WordPress Coding Standardsを導入する
↓
8. WP-CLIを導入する
↓
9. Xdebugを導入する
↓
10. 必要に応じてNode.jsや
@wordpress/scriptsを導入する
最初からすべて導入する必要はありません。
まずは、VSCode＋ローカルWordPress環境＋PHP補完＋Gitから始め、必要に応じて開発ツールを追加していくとよいでしょう。
まとめ
WordPress開発でVSCodeを使う場合は、VSCode単体で開発するのではなく、ローカルWordPress環境やGitなどと組み合わせるのが基本です。
特に独自テーマや独自プラグインを開発する場合は、VSCodeでコードを編集し、ローカル環境で動作を確認してから本番環境へ反映する流れを作ると安全です。
また、現在のWordPress開発では、開発対象によって必要な技術が異なります。
クラシックテーマではPHP、ブロックテーマではHTMLやtheme.json、カスタムブロックではJavaScriptや@wordpress/scriptsなどが重要になります。
そのため、まずは自分が開発するものを明確にし、その開発方法に合わせてVSCodeの拡張機能や周辺ツールを整えることが重要です。
WordPress開発を効率化したいのであれば、VSCodeを中心に、ローカル環境・Git・コード補完・デバッグ・コーディング規約チェックを組み合わせる構成が使いやすいでしょう。
以上、WordPress開発でVSCodeを使うメリットについてでした。
最後までお読みいただき、ありがとうございました。
