左サイドバー(220px固定)+メインエリアの2カラムレイアウト、コンテンツ閲覧型テンプレートに準拠。メインエリアはキーワード検索パネル→カテゴリタブ→カテゴリ別アコーディオンリスト→お問い合わせ誘導バナーの順で構成。アコーディオンはカテゴリブロック単位でまとめ、各Q&Aを個別展開。初期表示は最初のQ(ログイン・パスワード)を開いた状態で表示する。全アカウント種別共通(F-CMN)のため、ログイン後の全ユーザーが利用可能。
本画面は `F-CMN`(管理者共通)に属し、ログイン済みの全アカウント種別(法人管理者・事業所管理者・事業所アカウント・個人アカウント)が利用可能。未ログインユーザーへの公開可否は運用方針として別途確認が必要(要クライアント確認)。Q&Aの内容はアカウント種別による出し分けは行わず、全員共通コンテンツとする。
Q&AデータはWordPressカスタム投稿タイプ `lms_faq` で管理。カテゴリは `lms_faq_category` タクソノミーで分類(ログイン・受講・証明書・契約等)。表示順は管理画面の並び順(`menu_order`)に従う。ダミーデータはカテゴリ4件・Q計10問(ログイン3・受講3・証明書2・契約2)。キーワード検索はREST API `/wp-json/lms/v1/faq?s={keyword}` で実装し、Q&Aテキスト全文を対象にする。
アコーディオン開閉:質問行クリックで回答エリアの `display:none / block` をトグル(§9.5 アコーディオンテンプレート準拠)。▼/▶インジケーターを切替。カテゴリタブクリック:対応カテゴリブロックのみ表示し他を非表示(JSでトグル)。キーワード検索:「検索」ボタンクリックでAPIリクエスト→結果にマッチするQ&Aのみ表示。お問い合わせボタン:お問い合わせフォームページに遷移。
PC表示(1200px)を基準設計。タブレット(768px以下)ではサイドバーをハンバーガーメニューに格納し1カラム表示。カテゴリタブは横スクロール対応。スマートフォン(480px以下)では検索ボタンを全幅表示。アコーディオンのQ&Aテキストは折り返し表示に対応済み(flex-start配置)。お問い合わせバナーはstackレイアウト(縦並び)に切替。
FAQ一覧は更新頻度が低いため、WordPressのTransients APIで24時間キャッシュを適用(`lms_faq_list_{category}`)。Q&Aデータ更新時にキャッシュを自動削除する `save_post` フックを実装。キーワード検索はSQLインジェクション対策として `$wpdb->prepare()` を必ず使用し、入力値はサニタイズ済みの文字列のみをLIKE句に渡す。REST APIエンドポイントは認証不要(公開FAQのため)だが、出力はエスケープ処理を徹底する(`esc_html` / `wp_kses_post`)。Q&A本文にリンクが含まれる場合、許可タグ(`` のみ)を `wp_kses` で制限しXSS対策を行う。件数が増加した場合(50件以上)はページネーションまたは「もっと見る」ローディングを検討する。