Visual Studio Code でワードプレス開発環境を構築する（MacOSX）

今回は Visual Studio Code（VSCode）をインストールし、ワードプレスの開発環境を構築していく手順について解説していきたいと思います。

Visual Studio Code の特徴はなんといっても下記の２つだと思います。

• 軽い！
• プラグインが多彩！

割と IDE には処理が重いものが多いですが、Visual Studio Code は処理がかなり軽いです。なので多少貧弱な PC でもサクサク動いてくれます。

さらにプラグインが多彩＆プラグイン追加が容易なので、自分の開発したい対象やプログラミング言語に合わせて自分好みにカスタマイズすることが簡単にできてしまいます。

このページでもプラグインを利用することで、ワードプレスの開発環境を整えていきます。

基本的に MacOSX 上での開発環境構築の手順の解説になりますが、他の OS を利用している方にも参考になると思います。

それでは早速 Visual Studio Code のインストールを行っていきましょう！

Visual Studio Code のインストール

Visual Studio Code のインストール方法は、別ドメインですが下記のページで解説していますので、こちらを参考にしていただければと思います。

ワードプレス開発環境を構築する上で実施していただきたいのが下記ページの「Visual Studio Code の Mac へのインストール」と「Visual Studio Code の日本語化」です。

Visual Studio Code で Mac に Python 開発環境を整える

Python 向けの解説ですが、「Visual Studio Code の Mac へのインストール」と「Visual Studio Code の日本語化」に関してはワードプレス開発環境構築においても全く同じ手順で実行することができます。

MAMP とワードプレスをインストールする

続いて、一旦 Visual Studio Code からは離れて MAMP とワードプレスをインストールします。

これについても下記の別記事で解説していますので、こちらを参考にしてインストールをしていただければと思います。

MAMPがあれば「ネット環境なし」でもワードプレスが使える！

MAMP インストールにより、ローカル PC 上でワードプレスを起動し、ウェブブラウザからそのワードプレスで作成したWEBページを閲覧することができるようになります。

さらにワードプレスインストールにより、ワードプレスのソースコードがローカル PC 上にダウンロードされることになります。

スポンサーリンク

ワークスペースの作成

次は Visual Studio Code での作業です。まずはワークスペースの作成を行います。

ワークスペースというのは作業スペースのことで、特にプログラミングにおいては、開発したいプログラムが格納されているフォルダと考えて良いです。

メニューバーの「ファイル」から「フォルダーをワークスペースに追加…」をクリックします。

すると、フォルダを選択する画面が表示されますので、ここで「ワードプレスがインストールされているフォルダ」を選択します。

ワードプレスインストールを手順通りに特に設定も変更することなく実施した場合は、下記フォルダにワードプレスがインストールされているはずです。

/Applications/MAMP/htdocs

htdocs フォルダの内容を表示した状態で「追加」ボタンをクリックします。

すると、下の図のように左側のエクスプローラー画面に、追加したフォルダ以下のファイル群の名前が表示されるようになるはずです。

例えば「wp-content」→「theme」の下を覗いてみると、インストール済みのテーマのフォルダがあるはずです。この中に、テーマを構成する PHP や CSS などのファイルが格納されています。

ファイルを開くと画面の右側にファイルの中身が表示されます。ですので、左側のエクスプローラ画面からファイルを選択し、右側の編集画面でファイルを変更していくことで、ワードプレスの開発（テーマやプラグインなどの開発）を進めていくことができます。

ここでは一旦ワークスペースの保存をしておきましょう。

ワークスペースを保存しておくと、毎回 Visual Studio Code を起動した際にワークスペースの追加を行う必要がなくなります。

ワークスペースを保存するためには、メニューバーの「ファイル」→「ワークスペースを名前をつけて保存…」をクリックします。これにより保存するフォルダとファイル名の選択画面が表示されます。

保存するフォルダとファイル名は分かり易ければなんでも良いです。例えばですが、私は下記フォルダに、

/Users/{ユーザー名}/Documents/vscode_workspace

下記のファイル名で保存しました。

wordpress.code-workspace

これでワークスペースは保存されていますので、Visual Studio Code を再起動し、メニューバーの「ファイル」→「ワークスペースを開く」をクリックし、保存したワークスペースを開いてみましょう。

そうすると、エクスプローラー画面に再起動前と同様にワークスペースの中身が表示されるはずです。

これにより Visual Studio Code を終了しても、すぐに所望のワークスペースが開けるようになりました。

ファイルの編集

次はお試しでファイルの編集を行い、その動作確認をしていきます。

ここでは、テーマの “footer.php” を編集してみたいと思います。

まずワークスペースを開き、下記のフォルダにある “footer.php” ファイルをクリックして選択します。これにより画面の右側に “footer.php” の中身が表示され、編集できるようになります。

htdocs/wp-content/themes/{テーマ名}/

htdocs の部分はワードプレスをインストールしたフォルダ名によって異なる可能性があります。

また {テーマ名} の部分は、ワードプレスでご自身が有効化しているテーマ名に置き換えてください。例えば “twentytwenty” というテーマを有効化しているのであれば、フォルダパスは下記のようになります。

htdocs/wp-content/themes/twentytwenty/

それではお試しでファイルの編集をしてみます。”footer.php” の一番最後に下記の一文を追記します。

<?php echo "初めてのVisualStudioCode!" ?>

footer.php はページの一番下の部分を表示する PHP ファイルです。

さらに、上記は「初めてのVisualStudioCode!」という文字列をページに表示する PHP プログラムになります。

footer.php の最後に上記プログラムを追記することで、ページの最下部に「初めてのVisualStudioCode!」という文字列が表示されるようになります。

編集後はファイルの保存を行います。ファイルの保存はメニューバーの「ファイル」→「保存」から実行できます。

保存後、ローカル PC 上のワードプレスを起動してページを表示してみましょう！MAMP やワードプレスのインストールを手順通りに特に設定も変更せず実施された方は、おそらくウェブブラウザに下記 URL を指定すれば、ワードプレスが起動し、ページが表示されるはずです。

http://localhost:8888/

ページが表示されたら、ページの一番下に注目してみてください。ファイルの編集がうまくできていれば下のような文字列が表示されるはずです。

初めてのVisualStudioCode!

表示されれば Visual Studio Code でのファイル編集がうまく行ったことが確認できたことになります。

こんな感じで「ファイルの編集（保存）」「動作確認」を繰り返すことで、ワードプレス（テーマやプラグイン）の開発を進めていくことができます。

プラグインの追加

正直言うと、ここまで解説してきた内容だけだと、Visual Studio Code を利用する旨味はほとんど無いです。ちょっとオシャレなただのテキストエディタという感じです。

ただし、Visual Studio Code には「プラグインが豊富」という強みがあります。

プラグインを追加することで、もっともっと Visual Studio Code を便利にすることができます。

ここではそのプラグインの追加や設定の仕方を解説します。

スポンサーリンク

プラグインの追加の仕方

プラグインは Visual Studio Code の画面から追加することができます。

画面左側の下のマークをクリックすれば、プラグイン管理画面が表示されます。

また上側にあるテキストボックスに文字列を入力することでプラグインの検索をすることができます。

さらに検索結果から気に入ったプラグインのインストールボタンを押せばプラグインが追加され、自動的に有効化されます。

プラグインの設定の仕方

プラグインは追加だけでなく無効化やアンインストールも簡単に行えます。

プラグイン管理画面の上側の「・・・」ボタンをクリックすることで、下のようなメニューが表示されます。

ここで「有効な拡張機能の表示」をクリックすれば、プラグインを追加し、有効化しているものの一覧が表示されます（インストール済みのプラグインを全て表示する場合は「インストール済みの拡張機能の表示」をクリックします）。

設定したいプラグインの「歯車」ボタンをクリックすれば、下のようなメニューが表示され、無効化やアンインストールを行うことができます。

逆に無効化しているプラグインも歯車マークから有効化することもできます。

こんな感じに気軽に追加や有効化や無効化ができるので、気に入ったプラグインはどんどん追加し、気に入らなかったプラグインはどんどんアンインストールしていくと良いと思います。

ワードプレス開発に役立つプラグイン

では、Visual Studio Code にはどんなプラグインが容易されているのでしょうか？ここでは特にワードプレス開発に役立つプラグインをいくつか紹介しておきたいと思います。

スポンサーリンク

PHP Intelephense

PHP Intelephense は、下記の関数の名前の自動補完をしてくれるプラグインの一つです。

• PHP の組み込み関数
• ワークスペース内の関数

例えばファイル編集画面で ‘pri’ と打つと、’pri’ から続く関数のリストが表示され、クリックすることで自動的に関数名が入力されます。

また関数名にマウスカーソルを合わせると、その関数の引数等の説明が表示され、ネットなどで調べなくて済むようになります。

ワードプレスは PHP から作られており、PHP の関数も使うことが多いので、入れておくと必ず役に立ちます。

またワークスペース内の PHP ファイルで定義されている関数についても同様に自動補完や関数の説明も表示されるため、自分で作った関数を呼び出す時にも役立ちます。

PHP IntelliSense も同じようなプラグインですが、PHP Intelephense の方がマウスカーソルを合わせた時の説明が豊富なので個人的には PHP Intelephense  の方がオススメです。

WordPress snippets

PHP Intelephense は PHP の関数を自動補完するのに対し、Wordpress snippets はワードプレスの関数（テンプレートタグなど）を自動保管するプラグインです。

ワードプレスの開発（テーマやプラグインの開発）で一番使用する関数がこのワードプレスの関数です。なので、ワードプレスの開発を行う上では必ず入れておいた方が良いです。

同じようなプラグインに WordPress snippet もあります（名前もほぼ同じ…）が、Wordpress snippets の方が対応しているワードプレスのバージョンが新しかったので私はこちらを選択しました。

PHP Debug

PHP Debug はワードプレスの動作確認やデバッグに非常に便利なプラグインです。Visual Studio Code からワードプレスを起動したり、プログラムを指定した箇所で止め、１行ずつプログラムを実行したりすることもできます。

デバッグだけでなく、ワードプレスの動きを知るためにも、非常に有用なプラグインで、ワードプレスの開発を行う上では必ず入れておいた方が良いと思います。

この PHP Debug については下記ページで詳細を説明していますので、Visual Studio Code でワードプレスのデバッグ環境を構築したい方は是非読んでみてください。

VSCode でワードプレスデバッグ環境を構築する

スポンサーリンク

まとめ

このページでは Visual Studio Code を用いてワードプレス開発環境を構築する手順について説明しました。

Visual Studio Code は最近とても人気のある IDE ですし、処理が軽い＆プラグインを追加しやすい特徴もあって非常に使いやすいと思います。

このページで解説した内容だけだと便利なエディターくらいの効果しかありませんが、デバッグができるようになるとワードプレスの開発がめちゃめちゃやりやすくなります。

デバッグ環境構築方法は下のページで解説していますので、是非こちらも読んでみてください！

VSCode でワードプレスデバッグ環境を構築する