WordPressの開発を始めたばかりの方に向けて、開発効率を大幅に向上させるVS Code拡張機能とその設定手順をご紹介します。これから紹介する拡張機能を導入するだけで、コーディングの速度と正確性が上がり、初心者の方でも効率的に開発を進められるようになります。
1. VS Code をまだインストールしていない方へ
まずは、VS Code（Visual Studio Code）をインストールしてください。
(1) 公式ダウンロードサイト からお使いのOSのロゴの下にある青い大きなダウンロードボタンをクリックしてダウンロード
(2) ダウンロードした VS Code のインストーラー（例：VSCodeUserSetup-x64-x.xxx.x.exe）を開き、インストーラーを起動
(3) 最初の「使用許諾契約の同意」に対して「同意する」を選んで、インストーラーの案内に沿って「次へ」ボタンを順次クリックしていけばインストールできます。
- ポイント： 基本的にデフォルト設定で進めていけば問題なくインストールできます。
2. Japanese Language Pack で日本語化
VS Codeはデフォルトでは英語表示ですが、Japanese Language Pack拡張機能を導入することで、メニューやダイアログなどを日本語化できます。
2.1 Japanese Language Pack の インストール
(1) VS Codeの左側のアクティビティバーにある「拡張機能アイコン（四角が4つ並んだアイコン）」をクリックして、拡張機能ビューを開きます。
(2) 拡張機能ビューの上部にある検索ボックスに「Japanese」と入力します。
(3) 地球儀のアイコンが付いた「Japanese Language Pack for Visual Studio Code」が表示されたら、それをクリックして詳細ページを開きます。
(4) 「Install」ボタンをクリックしてインストールします。
(5) インストール後に画面右下に表示される「Change Language and Restart」ボタンをクリックして、表示言語を日本語に切り替えます。
(6) VS Codeが再起動された後、メニューやダイアログなどが日本語化されます。
2.2 表示言語を変更する（他の言語や英語に戻す）
言語を英語に戻したい場合や、他の言語にしたい場合は次の操作で切り替えられます。
(1) メニュー「表示」→「コマンドパレット…」をクリックし、コマンドパレットを表示します。
(2) コマンドパレットに「display」と入力すると候補が表示されます。
(3) その中から「表示言語を構成する Configure Display Language」を選ぶと、使用する表示言語を選択できるようになります。
(3) 切り替えたい言語を選択します。
- 豆知識 ： コマンドパレットは、ショートカットキー
Ctrl + Shift + Pで呼び出すこともできます。
3. PHP Intelephense で コーディングを効率化
VS Codeには、PHPコード解析をするための機能がいくつか用意されています。代表的なのが、VS Codeに標準搭載されている「PHP言語機能」と、拡張機能として利用できる「PHP Intelephense」です。
それぞれの違いは、以下のとおりです。
| 特徴 | VS Code 標準PHP検証 | PHP Intelephense |
|---|---|---|
| PHPのインストールが必要か | 必要 | 不要 |
| 構文チェック | 可能 | 可能 |
| 関数名の補完（オートコンプリート） | なし | あり |
| 定義／参照への移動 | 非対応 | 可能 |
| フォーマッター | 非対応 | 可能 |
| WordPress関数への対応 | 非対応 | 設定で対応可能 |
| PHPDocコメントの表示（補完・ホバー時） | ごく簡易的／一部のみ | 詳細に表示／型情報も利用 |
3.1 PHP Intelephense の インストール
(1) VS Codeの左側のアクティビティバーにある「拡張機能アイコン（四角が4つ並んだアイコン）」をクリックして、拡張機能ビューを開きます。
(2) 拡張機能ビューの上部にある検索ボックスに「PHP Intelephense」と入力します。
(3) 象の背中にPHPロゴのアイコンが付いた「PHP Intelephense（作者：Ben Mewburn）」が表示されたら、それをクリックして詳細ページを開きます。
(4) 「インストール」ボタンをクリックしてインストールします。
(5) 「発行元の “Ben Mewburn” を信頼しますか？」というダイアログが表示された場合は、「発行元を信頼してインストールする」ボタンをクリックしてインストールを継続します。
(6) インストールが完了すると、関数に対するマウスホバー時にはPHPDocコメントの表示が詳細になり、右クリックでは「定義/参照への移動」などが可能になります。
注意： PHP Intelephenseが更新された直後や、PHPファイルを開いた時に有料ライセンスの案内が表示されることがあります。無料のままでもWordPress開発に必要な補完機能は十分に使えますので、「Dismiss（却下）」ボタンをクリックして、そのまま閉じて問題ありません。
3.2 VS Code 標準搭載「PHP 言語機能」を無効化
PHP IntelephenseとVS Codeに標準搭載されている「PHP言語機能」が同時に動作すると、機能が重複して競合してしまうため、「PHP言語機能」を無効化します。
(１) 拡張機能ビューの上部にある検索ボックスに「@builtin php」と入力します。
(2) PHPロゴのアイコンが付いた「PHP言語機能」が表示されたら、それをクリックして詳細ページを開きます。
(3) 「無効にする」ボタンをクリックしてVS Codeに標準搭載されている「PHP言語機能」を無効化します。
重要： 「PHP言語機能」が有効のままだと、PHPバージョン相違による誤検知や警告が表示されることがありますので、PHP Intelephenseをインストールした場合は必ず無効化を行ってください。
3.3 任意のPHPバージョン指定
PHP Intelephenseのインストールや更新を行うと、コード解析に使われるPHPバージョンの設定も自動更新されます。このPHPバージョンを確認したい場合や使用しているPHPのバージョンに合わせて設定を変更したい場合は、以下の手順で対応できます。
(1) VS Codeの左側のアクティビティバーにある「管理アイコン（歯車アイコン）」をクリックし、管理メニューを表示します。
(2) 表示されたメニューから「設定」を選択して、設定画面を表示します。
(3) 設定画面上部の検索ボックスに「PHP Intelephense」と入力すると関連する設定項目が一覧表示されます。
(4) その中の「Intelephense › Environment: PHP Version」でPHPバージョンの確認や設定を行うことができます。
注意： 設定を変更した場合は、ファイル settings.json に保存されるため、PHP Intelephenseが更新されてもPHPバージョンは自動更新されなくなります。
設定をリセットする場合
(1) 「Intelephense › Environment: PHP Version」の上にマウスを置くと、左側に小さな歯車アイコンが表示されます。
(2) この歯車アイコンすると、その他の操作メニューが開きます。
(3) メニューから「設定をリセット」を選択すると、PHPバージョンの設定がリセットされます。
3.4 WordPress関数の補完機能を有効化
PHP Intelephenseはデフォルトでは WordPress固有の関数（例：get_template_part() や add_action()）を認識しないため、「未定義の関数」として警告が表示されてしまうことがあります。
❌ 例（WordPress関数が補完されない場合）
add_action('init', 'my_custom_function');
// ↑ 「undefined function 'add_action'」と表示される
そんな場合は、以下の手順でWordPressのstubsを追加することで、関数の補完や定義ジャンプなどが可能になります。
(1) VS Codeの左側のアクティビティバーにある「管理アイコン（歯車アイコン）」をクリックし、管理メニューを表示します。
(2) 表示されたメニューから「設定」を選択して、設定画面を表示します。
(3) 設定画面上部の検索ボックスに「stubs」と入力します。
(4) 関連する設定項目が一覧表示されるので、リストを一番下までスクロールします。
（5） 「項目の追加」ボタンが現れたら、クリックします。
(6) 選択項目の中から「WordPress」を選択し、「OK」ボタンをクリックすると、WordPress用の関数定義が追加されます。
プラグインの関数を追加する場合
ACF（Advanced Custom Fields）などプラグインの関数を追加したい場合は、そのプラグインのパスを設定することで追加できます。
(1) 設定画面上部の検索ボックスに「intelephense.environment.includePaths」と入力します。
(2) 「項目の追加」ボタンが表示されたらクリックします。
(3) 追加したいプラグインのパスを入力し、「OK」ボタンをクリックすると追加されます。
パスを変更する場合
(1) 該当するパスにマウスを重ねるかクリックして、操作アイコンを表示します。
(2) パスを変更する場合は、 鉛筆アイコンをクリックするとパスの編集が可能になります。
(3) パスを削除する場合は、×アイコンをクリックします
4. Live Sass Compiler でSCSSコンパイルを自動化
WordPressテーマ開発でSCSS（Sass）を使用している場合、Live Sass Compilerを導入することで、ファイルの保存時に自動的にCSSファイルに変換できます。
4.1 Live Sass Compilerのインストール
(1) VS Codeの左側のアクティビティバーにある「拡張機能アイコン」をクリックして、拡張機能ビューを開きます。
(2) 拡張機能ビューの上部にある検索ボックスに「Live Sass Compiler」と入力します。
(3) 目のアイコンが付いた「Live Sass Compiler（作者：Glenn Marks）」が表示されたら、それをクリックして詳細ページを開きます。
(4) 「インストール」ボタンをクリックしてインストールします。
(5) 「発行元の “Glenn Marks” を信頼しますか？」というダイアログが表示された場合は、「発行元を信頼してインストールする」ボタンをクリックしてインストールを継続します。
4.2 Live Sass Compilerの使用方法
(１) SCSSファイルを開いた状態で、VS Code下部のステータスバーにある「Watch Sass」ボタンをクリックします。
(2) 監視モードが開始され、SCSSファイルを保存するたびに自動的にCSSファイルが生成されます。
(3) 監視を停止したい場合は、ステータスバーの「Watching…」ボタンをクリックします。
4.3 おすすめの出力設定カスタマイズ
設定を変更することで、CSSファイルの出力先や圧縮形式をカスタマイズできます。
(1) 拡張機能ビューで、Live Sass Compiler の「管理アイコン（歯車アイコン）」をクリックし、管理メニューを表示します。
(2) 表示されたメニューから「設定」を選択して、設定画面を表示します。
ベンダープレフィックス設定
CSSの一部の機能はブラウザーによって書き方が違う（例：-webkit-〜 や -ms-〜 など）ことがあります。このような違いを吸収するために、 「Autoprefixer」機能の設定により自動で必要なプレフィックスを付けることができます。
(1) 「Live Sass Compile › Settings: Autoprefix」の「settings.json JSONで編集」をクリックして、settings.jsonファイルを開きます。
(2) 各ブラウザの最新3バージョンに対応し、シェア5%以上のものを対象にプレフィックスを出力させたい場合は、次のように指定します。
"liveSassCompile.settings.autoprefix": [
"> 5%",
"last 3 versions",
]
元のCSS（プレフィックスなし）
.box {
display: flex;
}
Autoprefixerでの出力例
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
出力フォーマットの指定
Sassをコンパイルした際のCSSの出力形式や保存先、拡張子などを細かく指定したい場合は、 「Formats」によって設定できます。
(1) 「Live Sass Compile › Settings: Formats」の「settings.json JSONで編集」をクリックして、settings.json ファイルを開きます。
(2) 非圧縮の ｃｓｓ ファイルを scss ファイルと同じフォルダーに、圧縮 .min.ｃｓｓ ファイルを mincss フォルダーに出力させたい場合は次のように指定します。
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": null
},
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/./mincss"
}
]
コンパイル対象の指定
複数の SCSS ファイルがある中で、特定のフォルダー以下のファイルだけをコンパイル対象にしたい場合は、「includeItems」を設定します。
これにより、不要なファイルのコンパイルを防ぎ、作業対象を限定できます。
(1) 「Live Sass Compile › Settings: Include Items」の「settings.json JSONで編集」をクリックして、settings.json ファイルを開きます。
(2) 独自プラグインである td- から始まるフォルダーのみを対象にしたい場合、次のように設定します。
"liveSassCompile.settings.includeItems": [
"/**/plugins/td*/*.scss"
]
**/plugins/td*/*.scss は、「任意の階層にある plugins フォルダ内の、td で始まる任意のフォルダー配下の .scss ファイル」を指定しています。
例えば、以下のようなフォルダー構成で、td-sample のみがコンパイル対象となります。
wp-content
└ plugins
├ td-sample/
│ └ assets/
│ └ style.scss ← このファイルが対象になります
└ other-plugin/
└ assets/
└ style.scss ← このファイルは無視されます
5. HackGenフォントでコード視認性を向上
プログラミング向けフォントを導入することで、コードの視認性が向上します。
たとえば、HackGen（白源） では以下の特長を持ちます
- 文字幅：半角1:全角2 の等幅フォントで、日本語コメントも揃って読みやすい
- 全角スペースの可視化：パイプ記号
|の破断線化で認識しやすい - ヒンティング付与：英字も明瞭で見やすい
VS Codeのデフォルトフォント（Consolasなど）
HackGenフォントに変更後
5.1 HackGenフォントのインストール
(1) HackGen GitHub（リリースページ） から「hackgen_nf_vx.xx.x.zip」をクリックしてフォントをダウンロードします。
(2) ダウンロードしたファイルを解凍します。
v2.10.0でダウンロードした hackgen_nf_v2.10.0.zip を解凍した場合は、フォルダ HackGen_NF_v2.10.0 下に４つのファイルが展開されます。
- HackGenConsoleNF-Regular.ttf
- HackGenConsoleNF-Bold.ttf
- HackGen35ConsoleNF-Regular.ttf
- HackGen35ConsoleNF-Bold.ttf
(3) エクスプローラー上で展開した HackGenConsoleNF-Regular.ttf と HackGenConsoleNF-Bold.ttf を選択して右クリックし、メニューを表示します。
(3) 表示されたメニューの「インストール」をクリックします。
5.2 VS CodeでHackGenフォントを設定
(1) VS Codeの左側のアクテ(1) VS Codeの左側のアクティビティバーにある「管理アイコン（歯車アイコン）」をクリックし、管理メニューを表示します。
(2) 表示されたメニューから「設定」を選択して、設定画面を表示します。
(3) 設定画面上部の検索ボックスに「Font Family」と入力します。
(4) 「Editor:Font Family フォント ファミリを制御します。」項目の先頭に「HackGen Console NF, 」を追加します。
(6) 半角空白も識別したい場合は、VS Codeの標準機能で表示方法を指定することができます。
設定画面上部の検索ボックスに「renderWhitespace」と入力し、「エディターで空白文字を表示するかどうかを制御します。」が表示されたら、表示方法を次から選択することができます。
| 設定値 | 説明 |
|---|---|
| none | 空白文字を表示しない |
| boundary | 単語間の単一スペース以外の空白文字を表示 |
| selection（既定値） | 選択した文字列内の空白文字のみ表示 |
| trailing | 行末の空白文字のみ表示 |
| all | 常にすべての空白文字を表示 |
