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 템플릿을 사용하여 렌더링해야 합니다.

action 속성을 포함하는 WordPress 양식의 경우 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에서 시작되었는지 확인하세요. 그런 다음 일반적으로 template_redirect 훅 내에서 템플릿을 출력하기 전에 wp_die() 또는 wp_send_json()을 사용합니다. wp_is_json_success() 함수는 AMP 관련 요청을 감지하는 데 유용합니다.

wp_send_json()을 사용한 예시입니다:

if ( wp_is_json_request() ) { if ( $success ) { $message = __( '양식이 성공적으로 제출되었습니다. 감사합니다!', 'my-textdomain' ); } else { $message = __( '제출에 실패했습니다. 다시 시도해주세요.', 'my-textdomain' ); } wp_send_json( compact( 'message' ), $success ? 200 : 400 ); }

또는 wp_die()를 사용할 수 있습니다:

if ( wp_is_json_request() ) { if ( $success ) { $message = __( '양식이 성공적으로 제출되었습니다. 감사합니다!', 'my-textdomain' ); } else { $message = __( '제출에 실패했습니다. 다시 시도해주세요.', '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 양식 예시를 더 살펴보세요.