ためセル！では、広告を掲載しています。

WordPressでCSSやJavaScriptやPHPの編集画面を使いやすくするプラグイン【WP Editor】

サイトでためセル！

2023.10.032023.10.21

この記事は約9分で読めます。

WordPressではCSSやJavaScript、PHPを編集するための「テーマファイルエディター」が用意されているが、いまいち使い勝手がよくないと思いませんか。

例えば、全画面表示ができなかったり、テキスト検索はできても置換ができなかったり（方法があるけど、わたしがわかってないだけの可能性もある。）、フォルダ画面がわかりづらく、お目当てのファイルが探しにくいといった点が不満なのです。

そこで、このページではWordPressでCSSやJavaScriptやPHPの編集画面を使いやすくするプラグイン【WP Editor】についてご紹介します。

スグにためセル！ – ここを読めばすぐ使える

WordPressでCSSやJSファイルなどを編集するときは「WP Editor」プラグインを導入すると、編集画面が使いやすくなります。

WP Editorプラグインのおすすめポイント

エディターを全画面表示できる！
テキスト検索や置換ができる！
フォルダ画面がアルファベット順で、アイコンが付き見やすくなる！
テーマを変えて、好きなデザインで編集作業ができる！

役に立った

※　より詳しい解説はここから下に続きます。

テーマファイルエディターとは

テーマファイルエディターとは、WordPress上でCSSやJavaScriptなどを直接編集することができる機能で、WordPress管理メニューから「外観」「テーマファイルエディター」とクリックすると開くことができます。

この画面でCSSなどを直接編集することができますが、デフォルトのテーマファイルエディターだと、冒頭にも書いたとおり、全画面表示ができなかったり、置換ができなかったり、フォルダ表示が見づらいといった不満がありました。

特に、フォルダ表示が見づらいというのが致命的で、ファイル名がABC順ではないため、お目当てのファイルが探しづらかったり、アイコンなどもないため、フォルダなのかファイルなのかわかりづらく、また、ファイル・フォルダによって表示の高さがバラバラなど、本当に使い勝手が悪いと思います。

それを解消することができるのが「WP Editor」プラグインです。

ためセル！

ちなみに「プラグイン」メニューにも「プラグインエディター」という機能がありますが、こちらも「テーマファイルエディター」と同じような機能で、プラグインのコードを直接編集することができます。

WP Editorプラグインとは

WP Editorプラグインは、テーマファイルエディターやプラグインエディターの機能を拡充したもので、これらのエディターの使い勝手を向上させることができます。
そして、上で書いたような不満点も解消されます。

つまり、全画面表示での編集ができるようになったり、置換や一括置換ができるようになったり、フォルダやファイルの選択が見やすくなるということです。

また、編集画面のテーマを選ぶことができるので、エディターの表示を好きなデザインに変えることができるようになります。

WP Editorを導入する

それでは、さっそくWP Editorを導入していきましょう。

WordPress管理メニューから「プラグイン」「新規追加」をクリックします。

右上の検索ボックスに「WP Editor」と入力すると、下の図のように検索結果が表示されますので、下の赤枠で囲んだプラグインを「今すぐインストール」しましょう。

インストールが完了したら「有効化」をクリックして、プラグインを有効化させます。

これで、WP Editorが使えるようになりました。

WP Editorの使い方

WP Editorを導入すると、WordPress管理メニューから「外観」を選ぶと、「テーマファイルエディター」ではなく、「Theme Editor」に変わっています。

それでは、これをクリックしましょう。
すると、編集画面も次のように変わっているはずです。

ためセル！

ちなみに、プラグインエディターもWP Editorに置き換わっているので確認してみてね。

ボタンが追加される

デフォルトのエディターでは、編集画面の上には何もありませんでしたが、WP Editorでは、いくつかのボタンが追加されています。

左から順に、「save」＝「上書き保存」、「undo」＝「元に戻す」、「redo」＝「やり直し」、「search」＝「検索」、「find prev」＝「前を検索」、「find next」＝「次を検索」、「replace」＝「置換」、「replace all」＝「全て置換」、「fullscreen」＝「全画面表示」の機能が割り当てられています。

ここからは、これらのボタンについて詳細に説明します。

上書き保存・元に戻す・やり直しボタン

「save」＝「上書き保存」は、単純に編集内容を保存してくれます。
ちなみに、ボタンを押すと、しばらくして、保存されたことを示すポップアップが表示されます。

「undo」＝「元に戻す」は、編集した内容を１つ前の状態に戻してくれます。１度だけでなく何度でも元に戻すことができますので、安心して編集を行えますね。

「redo」＝「やり直し」は、元に戻したものを、やり直すことができます。つまり、元に戻したものの、やっぱり戻さなくてよかったという場面で使えます。こちらも元に戻した回数だけやり直すことができます。

検索ボタン

「search」＝「検索」は、検索ボックスに入力した文字列を検索することができます。
ボタンを押すと下の図のように入力欄が表示されます。

ここに検索したいワードを入力してEnterキーを押すと、そのワードに黄色いマーカーがつくので、どこにあるのかわかりやすくなります。

この状態で「find prev」＝「前を検索」を押すと、ひとつ前にヒットした箇所へ移動し、「find next」＝「次を検索」を押すと、次にヒットする箇所に移動できます。

置換ボタン

「replace」＝「置換」は、特定の文字を別の文字に置き換えることができます。
ボタンを押すと、入力欄が表示されますが、まずは置換前の文字列を入力してください。

置換前の文字列を入力してEnterを押すと、表示が「With:」に変わります。ここでは、置き換えたあとの文字列を入力してください。

置換後の文字列を入力しEnterを押すと、下の図のように置き換え対象のワードがグレーでマーキングされ、置換するかどうかを右上の赤枠で囲った部分で選択します。

置換するなら「Yes」、しないなら「No」ですが、対象となるワードすべてを置換するなら、「All」をクリックします。

ちなみに、「replace all」＝「すべて置換」ボタンを押せば、上のような確認をすることなく、すべての対象ワードを置換することができます。

全画面表示ボタン

「fullscreen」＝「全画面表示」ボタンを押すと、編集画面だけが表示された状態になります。

大きな画面だと表示される文字の量も増えるので、編集作業がやりやすくなるのでおすすめです。

全画面表示から元の画面に戻るには、Escを押すか、「fullscreen」ボタンをもう一度押しましょう。

ショートカットキーでも操作可能

ちなみに、これらはショートカットキーでも操作可能です。
覚えておくと編集作業がグッと楽になりますよ。

ボタン（機能）	ショートカットキー
上書き保存	Ctrl ＋ s
元に戻す	Ctrl ＋ z
やり直し	Ctrl ＋ y
検索	Ctrl ＋ f
全画面表示・解除	f11

下にもボタンが追加される

そして、画面下にも新しいボタンが追加されています。

左から順にファイルのアップロード、ファイルのダウンロード、テーマ全体のダウンロードの機能が割り当てられています。

WP Editorプラグインでは直接CSSやPHPファイルを編集することになりますので、編集を間違えると、管理画面にすらアクセスできなくなる場合があります。
それを防ぐために編集前にはバックアップをとっておいた方が安心です。

そこで、これらボタンを使って、ファイルをローカルに保存しておいたり、逆にアップロードすることができるのです。

ファイル・フォルダ画面

画面右側にあるフォルダ画面もわかりやすくなりました。

デフォルトのテーマファイルエディターだと、どれがファイルでどれがフォルダなのかわかりづらく、また項目ごとの高さもバラバラでした。それに、ファイルの順番もアルファベット順ではなく、わかりづらかったです。

しかしWP Editorなら、これらの不満点がすべて解消されています。
ファイルとフォルダはアイコンによって違いが分かりやすくなり、フォルダが上に表示されるようになりました。
また、ファイルを見ても、その種類ごとにアイコンが異なっています。つまり、CSSファイル、PHPファイル、JSファイルがわかりやすくなりました。
そして何より、アルファベット順でならんでいるのでわかりやすく、非常に使いやすいです。