制作環境

#0010 - WordPressテーマの開発ツール「VSCode」を使いやすくする

VSCode には、編集機能を使いやすくする 拡張機能 が用意されています。

VSCodeの拡張機能

VSCodeには、プログラミングの補助ツールなど、様々な拡張機能が用意されています。

サイドバーメニューから「拡張機能」を選択またはショートカットキー[SHIFT]+[CTRL]+[x]で拡張機能」を表示することができます。

VSCodeをインストールする 際に日本語化したのも拡張機能「Japanese Language Pack for Visual Studio Code」によるものです。

おすすめ拡張機能

ここではプログラミングの補助となる4つの拡張機能を紹介します。
このほかにも便利な拡張機能がたくさんありますので、必要に応じて都度紹介させていただきます。

PHP Intelephense

「WordPress のテーマはPHPで作る」と言うのは、これまで紹介してきた通りです。

PHP Intelephense は、PHPのコーディングをサポートするツールで、命令文の補完や文法チェック、未使用変数のチェックなど、PHPでコーディングする際に非常に便利です。

WordPress Snippets

WordPress Snippets は、php標準の関数だけでなく、WordPressのテーマで自作した関数の補完やチェックを行ってくれるツールです。

IntelliSense for CSS class names in HTML

WordPress のテーマでは、phpだけでなくHTMLやCSSも使用します。

IntelliSense for CSS class names in HTML は、HTMLでclass指定する際に、cssで定義したクラス名を補完してくれます。

Highlight Matching Tag

WordPressのテーマでは、PHPとHTMLのコードが混在するため、HTMLだけのコードに比べて可読性や視認性が低下します。

Highlight Matching Tagを使用することで、開始タグに対応した終了タグが分かりやすくなり、ミスの少ないコードを記述できるようになります。

拡張機能をWordPressに対応させる

PHP Intelephense などコードを記述する補助となる拡張機能をインストールしましたが、これらはphp標準の命令文のみを対象としているため、WordPress独自の命令(関数)がエラーと判定されてしまいます。
そこで、「WordPress用のphpを記述してます」と認識させる必要があります。


VSCodeの左下「管理(Manage)」から「設定」を選択します。


設定の検索に「intelephense.stubs」を入力します


設定項目 Intelephense.Stubs の下部にある「項目の追加」をクリックします。


一覧の中から「wordpress」を選択して「OK」をクリックします。


以上で、拡張機能のWordPress対応は完了です。

まとめ

VSCodeには、様々な拡張機能が用意されています。今回は、コードを記述する際に役立つ基本的な拡張機能を紹介しました。
これから開発を進めるにつれて、都度、便利な拡張機能を紹介します。

また、ご自身でも「VSCode 拡張機能 おすすめ」などで検索して、役立ちそうな拡張機能をインストールしてみてください。

  • この記事を書いた人

UOCN

IT業界29年の現役フリーランスエンジニア。 一部上場企業の大規模システムから個人商店のウェブサイトまで50を超えるプロジェクトに参画。 近年は、WordPressを採用したウェブサイト製作を中心に活動中。

-制作環境
-,