WordPress での AMP フォーム統合をマスターする: 詳細ガイド

AMP（Accelerated Mobile Pages）は読み込み時間を大幅に短縮するために設計されていますが、フォーム操作も大幅に改善します。GET メソッドを使用するフォームは、通常の HTML フォームのように動作します。ただし、AMP で POST メソッドを使用するフォームには、特別な処理が必要です。ページリロードを引き起こすのではなく、AMP は amp-form コンポーネントを活用し、action-xhr 属性を使用して Ajax（XHR/fetch）を通じて非同期にフォームデータを送信します。フォーム送信後にリダイレクトが必要な場合、サーバーは AMP-Redirect-To ヘッダーを含める必要があります。理想的には、レスポンスは JSON 形式で、submit-success または submit-error テンプレートを使用して렌ダーします。

WordPress フォームに action 属性が含まれている場合、AMP プラグインは自動的に amp-form に変換します。リダイレクト用に wp_redirect() 関数が使用されている場合、AMP はデフォルトの 302 ステータスの代わりに、200 ステータスコードで AMP-Redirect-To ヘッダーを追加します。

リダイレクトを必要とせずにサクセスメッセージまたはエラーメッセージを表示する場合、AMP は submitting、submit-error、および submit-success などのテンプレートを自動的に統合します。wp_die() を通じてエラーが発生した場合、メッセージは submit-error テンプレート内に表示されます。200 ステータスコードは submit-success テンプレート内のコンテンツを表示します。wp_die() トリガーがない場合、プラグインは HTTP ステータスコードに基づいてデフォルトメッセージを表示します。

デフォルトメッセージが表示されるのを防ぐには、リクエストが amp-form から発信されているかどうかを確認します。次に、wp_die() または wp_send_json() を使用してからテンプレートを出力します。通常は template_redirect フック内です。wp_is_json_success() 関数は、AMP 固有のリクエストを検出するのに役立ちます。

wp_send_json() を使用した例を次に示します：

if ( wp_is_json_request() ) { if ( $success ) { $message = __( 'Form submitted successfully. Thank you!', 'my-textdomain' ); } else { $message = __( 'Submission failed. Please try again.', 'my-textdomain' ); } wp_send_json( compact( 'message' ), $success ? 200 : 400 ); }

または wp_die() を使用することもできます：

if ( wp_is_json_request() ) { if ( $success ) { $message = __( 'Form submitted successfully. Thank you!', 'my-textdomain' ); } else { $message = __( 'Submission failed. Please try again.', 'my-textdomain' ); } wp_die( $message, '', [ 'response' => $success ? 200 : 400 ] ); }

AMP フォームの動作をより詳しく制御するには、最初に action-xhr 属性を使用し、REST API エンドポイントと統合して submit-success および submit-error テンプレートを管理することをお勧めします。

場合によっては、ModSecurity がフォーム送信をブロックし、406 Not Acceptable メッセージなどのエラーが発生することがあります。この場合は、ホスティングプロバイダーに連絡して、__amp_source_origin のホワイトリスト登録をリクエストしてください。

詳細については、AMP フォームドキュメントを参照し、さらに AMP フォーム例を確認してください。