WordPress Admin UI 開発スキル

概要

WordPress 管理画面インターフェースの体系的なレビュー。基本原則： 管理画面 UI はケイパビリティ認識があり、予測可能で、カスタムアプリスタイルの動作ではなく WordPress 管理画面パターンに沿ったものであるべきです。メニュー登録、画面アーキテクチャ、Settings API の使用、通知、スクリプトとスタイルの読み込み、リストテーブルパターン、管理画面の UX 安定性をカバーします。

使用する場面

以下の場合に使用してください：

• 設定ページやプラグインダッシュボードのレビュー
• add_menu_page() / add_submenu_page() の使用監査
• 管理画面フォーム、通知、データ入力画面の確認
• 管理画面スクリプト読み込みと画面ターゲット設定のレビュー
• 管理画面のケイパビリティチェック分析

以下の場合は使用しないでください：

• フロントエンド UI レビュー
• セキュリティのみの完全監査（wp-security-review を使用）
• 管理画面の側面に焦点を当てない一般的なプラグインアーキテクチャ（wp-plugin-development を使用）

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

1. 管理画面の側面を特定

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

2. 画面登録をレビュー

   • メニュースラッグ、親スラッグ、ケイパビリティ
   • 専用コールバック
   • 画面固有の enqueue ロジック

3. フォームと状態フローをレビュー

   • Settings API または意図的な代替案
   • Nonce とケイパビリティチェック
   • 安定した成功/エラーメッセージング

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

   • 巨大なシングルスクリーンフォームを避ける
   • WordPress 管理画面レイアウトとコンポーネント規約を尊重
   • スクリプトは関連する画面にのみ読み込む

5. 重要度を適用

   • CRITICAL： ケイパビリティチェック不足、無制限の管理画面アクション、間違ったロールがアクセス可能な管理画面
   • WARNING： グローバル管理画面アセット読み込み、Settings API をバイパス、不安定な通知 UX、画面サイズが大きすぎる
   • INFO： コアコンポーネントを使用するか、より清潔な画面分割ができる可能性がある

ファイルタイプ別チェック

管理メニュー登録

• CRITICAL：ケイパビリティ要件不足
• WARNING：メニューコールバックがルーティング、レンダリング、フォーム処理を混在させている
• INFO：大規模な画面を別のクラスまたはモジュールに移動できる可能性がある

設定フォーム

• CRITICAL：保存時の nonce またはケイパビリティチェック不足
• WARNING：Settings API 構造なしで至る所で手動 update_option() を使用している
• WARNING：設定のサニタイゼーションコールバック不足
• INFO：保守性のために設定をセクション/タブに分割できる可能性がある

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

• WARNING：すべての管理画面でスクリプトが読み込まれている
• WARNING：大規模な機能にインライン JS を使用している
• INFO：画面 ID と条件付き enqueue を使用できる可能性がある

通知とフィードバック

• WARNING：解除処理なしの永続的な通知
• WARNING：成功/エラー状態が実際のアクション結果に関連していない
• INFO：より明確な空/読み込み状態を使用できる可能性がある

クイック検出用の検索パターン (ADM-21)

これらの rg コマンドを使用して、管理画面 UI をすばやくスキャンします。

CRITICAL パターン

# 管理ページ登録
rg -n "add_menu_page|add_submenu_page|add_options_page|add_management_page" . -g '*.php'

# Admin-post ハンドラーと nonce
rg -n "admin_post_|check_admin_referer|wp_verify_nonce|current_user_can" . -g '*.php'

WARNING パターン

# グローバル管理画面 enqueue
rg -n "admin_enqueue_scripts|wp_enqueue_script|wp_enqueue_style" . -g '*.php'

# 管理画面ページでの直接的なオプション更新
rg -n "update_option|add_option" . -g '*.php'

# 管理画面通知
rg -n "admin_notices|notice-|is-dismissible" . -g '*.php'

INFO パターン

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

# 画面ターゲット設定ヘルパー
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 のいずれを主に扱うかを明確にして、フォローアップレビューが簡単にルーティングされるようにしてください。