Bảo Vệ VN24H Logo
フォーム送信の処理 – AMP for WordPress

フォーム送信の処理 – AMP for WordPress

AMPプラグインは、既存のフォームがAMPで期待どおりに機能することを保証するためにできる限りのことを行います。まず、GETメソッドを使用するフォームは特別なことは必要ありません。通常のHTMLと同じようにAMPでも動作します。POSTメソッドを使用する場合、処理方法は少し異なります。通常のHTMLフォームでは、POSTメソッドのフォームはアクション属性で定義されたURLへの完全なページナビゲーションを引き起こします。AMPはamp-formコンポーネントを使用してこれを異なる方法で処理します。AMPでは、POSTフォームを送信する場合、フォームデータはaction-xhr属性で定義されたURLへAjax(XHR/fetch)経由で送信されます。ユーザーを成功ページにリダイレクトする場合は、特別なAMP-Redirect-Toレスポンスヘッダーを送信する必要があります。それ以外の場合、POSTリクエストのレスポンスはrenderされるべきデータを含むJSONオブジェクトである必要がありますsubmit-successまたはsubmit-errorテンプレートで。

WordPressでレンダリングされたフォームがaction属性を使用する場合、AMPプラグインはそれをamp-formにアップグレードしようとします。wp_redirect()を介して成功ページにリダイレクトする場合、AMPプラグインは302ステータスコードを使用してLocationレスポンスヘッダーを送信する代わりに、200ステータスコードを使用してAMP-Redirect-Toレスポンスヘッダーを自動的に送信します。

一方、成功/失敗メッセージがリダイレクトを行わずにPOSTリクエストへのレスポンスで表示されることが意図されている場合は、AMP変換されたフォームにはもう少し多くの処理が関わります。まず第一に、変換されたフォームは自動的に送信、submit-error、およびsubmit-successのテンプレートが追加されます。フォームプロセッサがwp_die()で送信に失敗する場合(非成功エラーコード付き)、提供されたメッセージはsubmit-errorテンプレートでレンダリングされます。同様に、200ステータスコードを使用してwp_die()が使用される場合、そのメッセージはsubmit-successテンプレートに表示されます。ただし、wp_die()を使用して成功/失敗メッセージをレンダリングしていない場合、AMPプラグインはステータスコードに基づいていくつかの一般的なメッセージを提供します:

送信が成功したようです。サーバーがOKで応答しましたが、送信が処理されなかった可能性があります。このフォームプロセッサの開発者に連絡して、このメッセージを改善してください。詳細情報一般的な成功メッセージレスポンスは見かけ上のOK応答です。 送信に失敗しました。サーバーが不正なリクエスト(コード400)で応答しました。このフォームプロセッサの開発者に連絡して、このメッセージを改善してください。詳細情報レスポンスにエラーコードがある場合の一般的なエラーメッセージ。

これらの一般的なメッセージ(とスタイリング)を表示するのを避けるために、フォーム送信ハンドラーはamp-formがリクエストを送信しているかどうかを確認してから、wp_die()またはwp_send_json()を使用する必要があります。当然のことながら、テンプレートがレンダリングされる前に、template_redirectアクション(またはテンプレートレンダリング前の別のアクション)などで実行する必要があります。amp-formが送信しているかを検出する簡単な方法は、wp_is_json_success()を使用することです。

template_redirectで発生する既存のフォーム処理ロジックが与えられた場合、メソッドが送信が受け入れられたかどうかに基づいて$success変数を設定し、wp_send_json()を使用して次のサンプルコードを組み込むことができます:

if ( wp_is_json_request() ) { if ( $success ) { $message = __( 'Success! Thanks for your submission.', 'my-textdomain' ); } else { $message = __( 'Sorry, your submission is incomplete.', 'my-textdomain' ); } wp_send_json( compact( 'message' ), $success ? 200 : 400 ); } Code language: PHP (php)

またはwp_die()を使用:

if ( wp_is_json_request() ) { if ( $success ) { $message = __( 'Success! Thanks for your submission.', 'my-textdomain' ); } else { $message = __( 'Sorry, your submission is incomplete.', 'my-textdomain' ); } wp_die( $message, '', [ 'response' => $success ? 200 : 400 ] ); } Code language: PHP (php)

カスタムwp_dieハンドラーはamp-form送信を処理する際に登録され、自動的にwp_send_json()を呼び出します。

最初からAMP互換フォームを開発している場合は、自動変換を防ぎ、フォーム送信テンプレートを含む動作を完全に制御するために、action属性の代わりにaction-xhr属性をフォームに指定することをお勧めします。この場合、action-xhr URLのREST APIエンドポイントを使用することをお勧めします。

詳細については、amp-formコンポーネントドキュメント、および例をお読みください。

ModSecurityの失敗への対処 #

コメント送信または他の送信フォームを送信するときに、コードが欠落している若干異なるエラーメッセージが表示される場合があります:

送信に失敗しました。サーバーが(コード)で応答しました。このフォームプロセッサの開発者に連絡して、このメッセージを改善してください。詳細情報

ブラウザの開発者ツールのネットワークコンソールを確認すると、この送信のHTTPレスポンスのステータスが406 Not Acceptableであることがわかる場合があります。さらに、レスポンスボディには次のメッセージが含まれる可能性があります:

要求されたリソースの適切な表現がこのサーバーで見つかりませんでした。このエラーはMod_Securityによって生成されました。

このシナリオでは、唯一の対策はホストサポートに連絡して、__amp_source_originクエリパラメーターをホワイトリストに追加することです。また、このサポートフォームトピックも参照してください。最初に報告されました。

💬 Messenger お問い合わせ🔹 Zalo 公式アカウント
📞 ホットライン: 0911.475.911