WordPressのカスタマイズをしていて、以下のような経験はありませんか？
functions.phpを書き換えたら、画面が真っ白（Fatal Error）になって冷や汗をかいた。- テーマをアップデートしたら、追加していたCSSやJSのコードがすべて消えてしまった。
- 表側（フロント）だけに適用したいJavaScriptが、管理画面やエディター側にも影響してバグを起こした。
一般的には「子テーマを作ってそこにコードを書く」のが推奨されますが、
ファイルの行き来が面倒だったり、少し専門知識が必要だったりしますよね。
そこで今回は、テーマから完全に独立し、
安全かつ爆速でPHP・CSS・バニラJSを完全コントロールできる
「4タブ仕様の専用コードエディタ・プラグイン」の作り方を解説します！
もくじ
本記事で作る「カスタムエディタ」の凄すぎる特徴
今回自作するプラグインは、ただコードを保存するだけではありません。
プロの開発現場でも耐えうる以下の「4つの鉄壁機能」を標準搭載しています。
特徴
4つの独立タブ制御
「共通」「フロント専用」「エディター専用（Gutenberg）」「PHP制御」の4つに分かれており、コードを反映させたい場所を直感的に出し分けられます。
特徴
画面が真っ白にならない「構文エラー自動スキップ」
万が一PHPの記述ミス（閉じタグの過不足など）があっても、システムがエラーを自動検知して実行を安全にスキップ。サイトがダウンするのを100%防ぎます。
特徴
WAFを100%すり抜ける安全保存
レンタルサーバーのセキュリティ（WAF）にブロックされないよう、コードをBase64に暗号化して非同期（Ajax）で爆速保存します。
特徴
爆速タイピング（Emmet）対応
WordPress標準のコードエディタにEmmetを組み込むため、ショートカットキーによる爆速コーディングが可能になります。
プラグインの動作イメージ
インストール後の管理画面です。
開発前の準備
今回のプラグインを作るために必要なものは以下の通りです。
- WordPressが動作する環境（ローカル環境またはテストサイトを推奨）
- FTPツール、またはレンタルサーバーのファイルマネージャー
- テキストエディタ（VS Codeなど）
準備ができたら、さっそくプラグインの構築に入りましょう！