Bảo Vệ VN24H Logo
AMP for WordPress에서 양식 제출 처리

AMP for WordPress에서 양식 제출 처리

AMP 플러그인은 기존 양식이 AMP에서 예상대로 작동하도록 최선을 다합니다. 한 가지는 GET 메서드를 사용하는 양식은 AMP에서 일반 HTML과 동일하게 작동하므로 특별한 것이 필요하지 않습니다. POST 메서드를 사용하면 상황이 조금 다릅니다. 일반 HTML 양식에서 POST 메서드가 있는 양식은 작업에 정의된 URL로 전체 페이지 탐색을 유발합니다. AMP는 amp-form 구성 요소를 사용하여 다르게 작동합니다. AMP에서 POST 양식을 제출할 때 양식 데이터는 action-xhr 속성에 정의된 URL로 Ajax(XHR/fetch)를 통해 제출됩니다. 사용자를 성공 페이지로 리디렉션하려면 특수 AMP-Redirect-To 응답 헤더를 보내야 합니다. 그렇지 않으면 POST 요청의 응답은 submit-success 또는 submit-error 템플릿에서 렌더링되어야 할 데이터가 포함된 JSON 객체여야 합니다.

WordPress에서 렌더링한 양식에 작업 속성이 있으면 AMP 플러그인은 이를 amp-form으로 업그레이드하려고 시도합니다. wp_redirect()를 통해 성공 페이지로 리디렉션할 때 AMP 플러그인은 302 상태 코드가 있는 Location 응답 헤더를 보내는 대신 200 상태 코드로 AMP-Redirect-To 응답 헤더를 자동으로 보냅니다.

반면에 리디렉션을 수행하지 않고 POST 요청에 대한 응답에 성공/실패 메시지를 표시하려는 경우 AMP로 변환된 양식에는 좀 더 많은 작업이 필요합니다. 우선 변환된 양식은 제출, 제출 오류 및 제출 성공에 대한 템플릿을 자동으로 추가합니다. 양식 프로세서가 wp_die()(성공하지 않은 오류 코드 포함)로 제출을 실패하면 제공된 메시지가 submit-error 템플릿에 렌더링됩니다. 마찬가지로 wp_die()가 200 상태 코드와 함께 사용되면 해당 메시지가 submit-success 템플릿에 표시됩니다. 그러나 wp_die()를 사용하여 성공/실패 메시지를 렌더링하지 않으면 AMP 플러그인은 상태 코드를 기반으로 일반 메시지를 제공합니다:

제출이 성공한 것 같습니다. 서버가 확인했지만 제출이 처리되지 않았을 수 있습니다. 이 양식 프로세서의 개발자에게 문의하여 이 메시지를 개선하십시오. 자세히 알아보기일반 성공 메시지 응답에 겉보기에는 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)

amp-form 제출을 처리할 때 사용자 정의 wp_die 핸들러가 등록되어 wp_send_json()을 자동으로 호출합니다.

처음부터 AMP 호환 양식을 개발하는 경우 자동 변환을 방지하고 양식 제출 템플릿을 포함한 동작을 완전히 제어할 수 있도록 작업 속성 대신 action-xhr 속성을 양식에 제공하는 것이 좋습니다. 이 경우 action-xhr URL에 REST API 엔드포인트 사용을 고려해야 합니다.

자세한 내용은 amp-form 구성 요소 문서 및 예제를 참조하십시오.

ModSecurity 오류 처리 #

의견이나 다른 제출 양식을 제출할 때 코드가 누락된 약간 다른 오류 메시지가 나타날 수 있습니다:

제출이 실패했습니다. 서버가 (코드 )로 응답했습니다. 이 양식 프로세서의 개발자에게 문의하여 이 메시지를 개선하십시오. 자세히 알아보기

브라우저의 개발자 도구에서 네트워크 콘솔을 보면 이 제출에 대한 HTTP 응답이 상태 406 Not Acceptable임을 알 수 있습니다. 또한 응답 본문에는 다음 메시지가 포함될 수 있습니다:

요청된 리소스의 적절한 표현을 이 서버에서 찾을 수 없습니다. 이 오류는 Mod_Security에서 생성되었습니다.

이 경우 유일한 해결책은 호스트 지원팀에 문의하여 __amp_source_origin 쿼리 매개변수를 허용 목록에 추가하는 것입니다. 이것이 처음 보고된 지원 포럼 주제도 참조하십시오.

💬 Messenger 문의🔹 Zalo 공식 상담
📞 핫라인: 0911.475.911