WordPressテーマの表示・安全性・操作を確認する

WordPressサイトは、投稿内容やログイン状態によって表示が変わります。トップページだけでなく、固定ページ、投稿一覧、投稿詳細、404を同じ基準で確認します。

エラーを見えないままにしない

ローカル環境では、PHPエラーとWordPressのデバッグログを確認できる状態にします。画面が表示されていても、非推奨の関数や未定義の値に関する警告が記録されている場合があります。

次の図では、「エラーを見えないままにしない」の仕組みや関係を確認できます。

本番環境では、エラーの詳細を訪問者へ表示しません。ログへ記録し、管理者が原因を確認できる形にします。

ページごとの確認表を作る

ページの種類と利用状態を組み合わせた確認表を作ると、見落としを減らせます。

• トップページ
• 固定ページ
• 投稿一覧とページ送り
• 投稿詳細
• 画像がない投稿
• 検索結果を実装した場合は検索結果
• 存在しないURLの404ページ

入力と出力の安全性を確認する

管理画面やフォームから受け取る値は、用途に合わせて検証とサニタイズを行います。HTMLへ出力するときは、文章、属性、URLなど表示する場所に合うエスケープを使用します。

次の図では、「入力と出力の安全性を確認する」の仕組みや関係を確認できます。

URLへ値を含めて操作を行う場合は、権限の確認とnonceによる意図した操作かの確認も必要です。nonceだけで権限確認の代わりにはなりません。

安全な出力を確認する

自分でechoする文字列は文脈に合わせてesc_html()、esc_attr()、esc_url()を使います。WordPressがHTMLを出力するthe_content()などは用途を理解して使います。

次の図では、「安全な出力を確認する」の仕組みや関係を確認できます。

表示パターンを網羅する

• トップページ、固定ページ、投稿詳細、一覧、検索、404
• 投稿が0件、1件、ページ送りが必要な件数
• アイキャッチ画像あり・なし
• 短いタイトル、長いタイトル、英数字を含むタイトル
• 管理者でログイン中の表示とログアウト後の表示
• スマートフォン、タブレット、パソコン幅

確認中はブラウザの幅を動かすだけでなく、実機でもタップ操作、文字サイズ、横スクロールの有無を確認します。

アクセシビリティとHTMLを確認する

画像の代替テキスト、フォームのラベル、見出し構造、リンク名、キーボードフォーカスを確認します。色だけで状態を伝えず、フォーカス位置を見えなくするCSSも避けます。

同じIDの重複や閉じタグの不足は、JavaScriptや支援技術の動作にも影響します。ブラウザの開発者ツールとHTML検証を使い、構造上の問題を修正します。

エラーを切り分ける

PHP側はWordPressのデバッグログ、ブラウザ側はConsoleとNetworkを確認します。画面が真っ白な場合は直前に変更したPHP、動きだけ止まる場合はJavaScriptから確認します。

次の図では、「エラーを切り分ける」で押さえる違いを左右で比較しています。

管理者以外の表示を確認する

ログアウト状態またはシークレットウィンドウで確認します。管理者だけに見える編集バーやキャッシュの影響を除き、訪問者と同じ状態を確認できます。

公開前の最終確認手順

1. PHPとJavaScriptのエラーがないか確認する
2. 主要ページと例外状態を確認する
3. キーボードとスマートフォンで操作する
4. CSS、JavaScript、画像の404がないかNetworkで確認する
5. 別ユーザーまたはログアウト状態で確認する
6. 確認結果と残っている課題を記録する