ブログ初心者・Web制作の情報サイト
VSCodeでWordPressテーマを編集する際に便利なプラグイン

VSCodeでWordPressテーマを編集する際に便利なプラグイン

この記事ではVSCodeでWordPressテーマを編集する際に便利なプラグインを紹介します。

VSCodeを使っていてWordPress関数の予測変換や説明が出なくて困ったことはありませんか?VSCodeは素晴らしいエディタですがデフォルトではPHPやWordPress関数のサポートが十分ではありません

VSCodeのプラグインを使えばこれらの問題も解決できWordPressでのコーディングがとても楽になりますよ。

おすすめのプラグイン

WordPressでのテーマ編集に便利なおすすめのプラグインを紹介します。

VSCodeにインストールされているプラグインはサイドメニューのExtensions から確認可能です。プラグインのインストールもここで行うことができます。

VSCodeでWordPressのテーマを編集するときに欲しい機能はPHPやWordPress関数のインテリセンスによる補完・校正機能、定義したCSSクラス名の予測リスト表示、HTML編集時のショートカットなどです。

これらは全てプラグインで追加することができます。

Auto Rename Tag

HTML/XMLの開始タグと終了タグを同時に編集できるプラグインです。片方のタグを編集するともう片方も自動的に変わります

たったそれだけの為にプラグイン入れるの? と思われた方、私も最初そう思って導入しなかったのですがWordPressのテーマを編集しているとタグ名変更が良く起こります。

実際に使ってみると二度手間を省きコードミスも減るなどとても便利な機能です。

Auto Rename Tag

IntelliSense for CSS class names in HTML

CSSに定義したクラスを読み込み予測を表示してくれるプラグインです。

CSSが反映されない、何故? と思ったらクラス名が間違っていた。そんな間違いを防いでくれますし何よりHTMLのタイピングスピードを上げてくれます。

使い方は Explorer > Open Folder でフォルダを開くとフォルダ内のCSSを読み込むので後はHTMLを書くだけです。

フォルダを開いた後にCSSを編集した場合は再度読み込ませなければ予測変換に反映されません。この場合はエディタ下のステータスバー内にあるカミナリのようなアイコンをクリックして再キャッシュさせればOKです。

IntelliSense for CSS class names in HTML

PHP Intelephense

PHPのインテリセンスによるコード補完や色分け、エラーの検知などあらゆるサポート機能を持ったプラグインです。

VSCodeデフォルトでも PHP Language Features という機能がありますがこれでは機能不足です。また似たような機能を持つプラグインに PHP IntelliSense という名前の似たプラグインがありますがこちらは動作が遅いため PHP Intelephense をおすすめします。

インストールするだけで機能しますが同機能のプラグインとは干渉するため無効にする必要があります。PHP Language Features はOFFにしましょう。

左メニューバーの Extensions をクリックし検索ウィンドウに @builtin を入力します。

PHP Language Features を右クリックし Disable(無効) を押せばOKです。

PHP Intelephense

WordPress Snippet

WordPress関数のコード補完・予測、関数の説明を表示してくれるプラグインです。

VSCode単体ではWordPress関数を全くサポートしていないため予測も説明も表示されません。コーディング時にとても不便です。

WordPress関数には名前の似た関数が多いため説明はとても役に立ちます

一つ一つの関数は覚えられないため実際のコーディングでは説明文を参照することは多いです。関数の機能は理解していても引数までは覚えていないということもあるでしょう。また、関数の予測機能としても役立ちます。

WordPressでVSCodeを使う場合は必須といっても過言ではない程役に立つのプラグインです。これがないとWordPressのコードが書けません(^^;

Emmet

EmmetはHTMLのタグやCSSプロパティのショートカットを提供してくれます。EmmetはVSCodeにデフォルトで組み込まれているのでインストールは不要です。

Emmetの使い方は特定の文字列を打った後 Tab を押すだけです。以下によく使う例をあげておきます。

!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    
</body>
</html>

! を打ってTabを押すだけでこれだけのコードが出力されます。とてもよく使うショートカットです。

.class

<div class="class"></div>

クラスが付いたdivタグを出力します。同様にタグの後に「.」を付けるとクラス付きのタグを出力できます。

ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

リストを出力するショートカットです。* の後の数字を変更すれば li要素の数を変更可能です。

HTMLのみ紹介しましたがCSSを書く際にも予測変換を表示してくれるなどとても便利な機能です。Emmetには大量のショートカットが存在するので全てのショートカットを確認したい方は Cheat Sheet を参照してください。

Live Server

Live Server はライブリロードを可能にするプラグインです。ライブリロードとはHTML更新時に自動でブラウザをリロードしてくれる機能です。

HTMLを更新して確認のためにその都度ブラウザのリロードをクリック、クリック、苦リック。。。非常に面倒ですし疲れます。PC作業をするときは無駄なクリックはできるだけ減らしたいものです。

Live Server を使えばブラウザ更新が自動になるのでHTMLの編集に集中でき作業もスムーズに進みます。そして何より楽です。

使い方

Explorer > Open Folder でフォルダを開きます。

Explorer に表示されているHTMLを右クリックし Open with Live Server を押すとブラウザに表示されます。

後はHTMLを編集しましょう。

最後に

WordPressのテーマ編集をVSCodeで行う際に便利なプラグインを紹介しました。

テーマの編集、特にコーディングは疲れる作業です。プラグインの有無で作業の効率に大きな差が出ます。便利なプラグインを使いこなしてコーディングを楽に行いましょう。その結果ミスも減るので一石二鳥です。