wp-admin-ui-development

WordPress 管理画面 UI 開発スキル

概要

WordPress 管理画面のインターフェースを体系的にレビューします。**基本原則：**管理画面 UI は、独自のアプリ風の動作ではなく、権限を考慮し、予測可能で、WordPress 管理画面のパターンに沿ったものにする必要があります。レビュー対象には、メニュー登録、画面構成、Settings API の使用方法、通知、スクリプトとスタイルの読み込み、リストテーブルのパターン、管理画面側の UX の安定性が含まれます。

使用する場面

次の場合に使用します：

• 設定ページやプラグインのダッシュボードをレビューするとき
• add_menu_page() / add_submenu_page() の使用方法を監査するとき
• 管理画面のフォーム、通知、データ入力画面を確認するとき
• 管理画面のスクリプト読み込みと画面の対象指定をレビューするとき
• 管理画面ページの権限チェックを分析するとき

次の場合には使用しないでください：

• フロントエンド UI のレビュー
• セキュリティに特化した包括的な監査（wp-security-review を使用してください）
• 管理画面の表層に焦点を当てない一般的なプラグインアーキテクチャのレビュー（wp-plugin-development を使用してください）

コードレビューワークフロー

1. 管理画面の対象を特定する

   • 設定ページ
   • ダッシュボードウィジェットまたはツールページ
   • カスタムリストテーブル
   • モーダルを多用する管理画面のワークフロー

2. 画面登録をレビューする

   • メニュースラッグ、親スラッグ、権限
   • 専用のコールバック
   • 画面ごとの読み込みロジック

3. フォームと状態の流れをレビューする

   • Settings API、または意図的に選択した代替手段
   • ノンスと権限チェック
   • 安定した成功／エラーメッセージ

4. UX と保守性をレビューする

   • 巨大な単一画面フォームを避ける
   • WordPress 管理画面のレイアウトとコンポーネントの規則に従う
   • 関連する画面でのみスクリプトを読み込む

5. 重大度を適用する

   • **CRITICAL：**権限チェックの欠落、制限のない管理操作、誤った権限のユーザーがアクセスできる管理画面
   • **WARNING：**管理画面全体でのアセット読み込み、Settings API の回避、不安定な通知 UX、過度に大きな画面
   • **INFO：**コアコンポーネントの利用や、より適切な画面分割が可能

ファイルタイプ別の確認項目

管理メニューの登録

• CRITICAL：必要な権限が設定されていない
• WARNING：メニューコールバックでルーティング、レンダリング、フォーム処理が混在している
• INFO：大きな画面を別のクラスやモジュールに分割できる

設定フォーム

• CRITICAL：保存時のノンスまたは権限チェックがない
• WARNING：Settings API の構造を使わず、あらゆる箇所で手動の update_option() を使用している
• WARNING：設定にサニタイズ用コールバックがない
• INFO：保守性を高めるため、設定をセクションやタブに分割できる

管理画面のスクリプトとスタイル

• WARNING：すべての管理画面でスクリプトを読み込んでいる
• WARNING：大きな機能にインライン JS を使用している
• INFO：画面 ID と条件付き読み込みを利用できる

通知とフィードバック

• WARNING：非表示にする方法がないまま通知が表示され続ける
• WARNING：成功／エラー状態が実際の操作結果に結び付いていない
• INFO：空の状態や読み込み中の状態をより明確にできる

素早く検出するための検索パターン（ADM-21）

管理画面 UI を素早くスキャンするには、次の rg コマンドを使用してください。

CRITICAL パターン

# Admin page registration
rg -n "add_menu_page|add_submenu_page|add_options_page|add_management_page" . -g '*.php'

# Admin-post handlers and nonces
rg -n "admin_post_|check_admin_referer|wp_verify_nonce|current_user_can" . -g '*.php'

WARNING パターン

# Global admin enqueues
rg -n "admin_enqueue_scripts|wp_enqueue_script|wp_enqueue_style" . -g '*.php'

# Direct option updates in admin pages
rg -n "update_option|add_option" . -g '*.php'

# Admin notices
rg -n "admin_notices|notice-|is-dismissible" . -g '*.php'

INFO パターン

# Settings API usage
rg -n "register_setting|add_settings_section|add_settings_field" . -g '*.php'

# Screen targeting helpers
rg -n "get_current_screen|current_screen|\$hook_suffix" . -g '*.php'

参考ファイル

• references/settings-and-screens.md - 設定ページ、画面登録、管理画面の構造
• references/admin-ux-patterns.md - 通知、管理画面のスクリプト、タブ、リストテーブル、UX の要件

出力形式（ADM-23）

各指摘には、重大度、ファイル参照、問題の概要、管理画面への影響、具体的な修正案を含めてください。問題の主な分類がセキュリティ、アーキテクチャ、UX のどれに当たるかも明記し、後続レビューを適切に振り分けやすくしてください。