WordPressプラグイン開発記 vol.4 – 記事編集画面で全てのタグから確認・選択できるようにする

前回の記事では記事編集画面でスラッグを変更した際に既に存在している場合エラー表示するようなカスタマイズを行いました。

今回も記事編集画面でちょっと不便だなぁと思っていた部分をカスタマイズいようと思います。

既存のタグから選択して設定したい

WordPress既存のタグ設定エリアは

• よく使うものから選択して追加する

ファイル・ディレクトリ構成

今回の機能追加後のプラグインディレクトリ内の構成は下記の通りです。

wp-content/plugins/chun-log-customize/
  ├assets/
  │  ├css/
  │  │  └slug-check.css
  │  └js/
  │      └slug-check.js
  ├includes/
  │  └classes/
  │      ├ChunLogCustomize.php
  │      ├ChunLogCustomize_Config.php
  │      └ChunLogCustomize_SlugChecker.php
  └chun-log-customize.php

実装内容（共通部）

動作確認

動きおしては下記のようにできました！

• タグを追加
  • WordPress標準から変更なし。
• よく使うもの / 全タグ一一覧をタブで切り替え
• よく使うもの
  • 標準ではリンク表示で追加のみ可能だった。
  • ON/OFFのトグルボタン化してボタンクリックで削除もできるように。
• 全タグ一覧
  • 存在するタグをすべてボタンで表示。これで覚えてなくても大丈夫！
• 初期表示

Q&A

ゴミ箱に入れた投稿のスラッグは重複扱いになる？

なりません。post_statusにtrashを含めていないため、ゴミ箱の投稿はチェック対象から除外されます。一度ゴミ箱に移した後で同じスラッグを再利用したい場合も問題なく使えます。

カスタム投稿タイプも重複チェックの対象になる？

なります。post_type => 'any'を指定しているためWordPressに登録されている全投稿タイプが対象になります。発行されるSQLでIN ('post', 'page', 'attachment', ...)のように展開されるので、カスタム投稿タイプのスラッグとの重複も検知できます。

REST APIにnonce検証は必要ですか？

必須です。wp.apiFetchが自動でX-WP-Nonceヘッダーを付与してくれますが、サーバー側でもwp_verify_nonce()を使って必ずチェックするようにしましょう。認証なしでエンドポイントを公開するのはセキュリティ上のリスクになります。

おわりに

ブロックエディターのDOM構造はReactで動的に生成されるためReactをほぼ知らない筆者にはとっつきにくい部分もありましたが、wp.dataやMutationObserverを使うことでなんとか動くものができました。

PHPは5の時代に触っていましたが今回PHP 8を使ってみると??=演算子や型宣言まわりでだいぶ変わったなぁという感じでした。次回はまた別の機能を追加していきます。

---