반만 채워진 양식을 제출하지 않고 실수로 페이지를 닫는 것은 성가신 일입니다. 최근에 한 사용자가 양식에 대한 사용자 작업을 확인하는 팝업을 표시 할 수 있는지 문의했습니다. 이 작고 작은 경고는 사용자에게 반으로 채워진 양식이있는 페이지를 실수로 닫는 것을 방지합니다.

이 자습서에서는 양식에 대한 닫기 작업 확인 창을 표시하는 방법을 보여줍니다. 워드 프레스 블로그.

브라우징 확인 팝업이란?

사용자가 블로그에 댓글을 작성한다고 가정 해 보겠습니다. 그는 이미 많은 줄을 작성했지만주의가 산만 해지고 댓글 제출을 잊어 버립니다. 예를 들어 링크를 클릭하면 그가 작성하기 시작한 모든 콘텐츠가 손실됩니다.

탐색 확인을 통해 댓글을 작성할 수 있습니다.

기사 / 페이지 편집기 인터페이스에서이 기능을 볼 수 있습니다. 저장되지 않은 변경 사항이 있고 페이지를 종료하거나 브라우저를 닫으려고하면 팝업 경고가 표시됩니다.

블로그의 WordPress 댓글 및 기타 양식에이 경고 기능을 추가하는 방법을 살펴 보겠습니다.

WordPress에서 제출하지 않은 양식에 확인 팝업을 표시하는 방법

이 튜토리얼을 위해, 우리는 것입니다 맞춤 플러그인 만들기. 만드는 방법을 이미 보여 드렸습니다. 워드 프레스 플러그인 빨리.

시작하자.

먼저 컴퓨터에 새 폴더를 만들고 이름을 "confirm-action"으로 지정해야합니다. 이 폴더에서 다른 폴더를 만들고 이름을 js로 지정해야합니다.

이제 메모장과 같은 텍스트 편집기를 열고 새 파일을 만듭니다. 내부에 다음 코드를 붙여 넣으십시오.

<?php
/**
 * 조치 확인
 * 플러그인 이름: 작업 확인
 * 플러그인 URI: https://blogpascher.com
 * 설명: 이 플러그인은 사용자가 댓글 양식에서 제출 버튼을 누르는 것을 잊었을 때 경고를 표시합니다.
 * 버전: 1.0.0
 * 작성자: YourNAME
 * 작성자 URI: https://blogpascher.com
 * 라이센스: GPL-2.0+
 * 라이센스 URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
함수 bpc_confirm_leaving_js() {

     wp_enqueue_script( '탈퇴 확인', 플러그인_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

이 PHP 함수는 웹 사이트의 프런트 엔드에 JavaScript 파일을 추가합니다.

이 파일을 "confirm-action.php" 폴더 안에 작업을 확인 "(플러그인 루트).

이제이 플러그인이로드 할 JavaScript 파일을 만들어야합니다. 새 파일을 만들고이 코드를 내부에 붙여 넣습니다.

jQuery를 (문서) .ready (함수 ($) {$ (문서) .ready (함수 () {needToConfirm = false를 window.onbeforeunload = askConfirm;}); 함수 askConfirm는 () {경우 (needToConfirm) {// 넣어 당신의 사용자 정의 메시지는 여기에 "당신의 저장하지 않은 데이터가 손실됩니다."를 반환;}} $ ( "#의 CommentForm") 교환 (함수 () {needToConfirm = TRUE;}).})

이 파일 이름 바꾸기 - leaving.js 확인","하위 폴더로 이동 " js »보낸 사람« 작업을 확인".

이 JavaScript 코드는 사용자가 주석 양식에 저장하지 않은 변경 사항이 있는지 감지합니다. 사용자가 페이지를 종료하려고하면 팝업 경고가 표시됩니다.

지금해야 할 일은 클라이언트를 사용하여 파일을 서버에 업로드하는 것입니다. FTP 즐겨 찾기. 그런 다음 대시 보드에서 플러그인을 활성화하기 만하면됩니다.

그게 다야. 이제 웹 사이트의 기사를 방문하여 댓글을 작성하고 링크를 클릭하면 이와 유사한 팝업이 표시됩니다.

다른 WordPress 양식에 경고 추가

동일한 코드를 사용하여 WordPress 사이트의 모든 양식을 대상으로 지정할 수 있습니다. 여기에서 우리는 당신에게 연락처 양식.

이 예제에서는 플러그인을 사용합니다. WPForms 만들기 연락처 양식. 다른 것을 사용해도 지침은 동일합니다. 문의 양식 플러그인 귀하의 사이트에.

추가한 페이지로 이동하세요. 연락처 양식. 연락처 양식의 첫 번째 필드 위로 마우스를 이동하고 마우스 오른쪽 버튼을 클릭한 다음 '를 선택하세요. 검사“, 소스 코드에 액세스합니다.

태그로 시작하는 줄을 찾습니다 <form>. 양식 태그에서 ID 속성을 찾을 수 있습니다. 이 예에서 양식의 ID는 formulaire . ID 속성을 복사해야합니다.

이제 confirmer-leaving.js 파일을 열고 "뒤에 ID 속성을 추가하십시오. #commentform 쉼표로 구분합니다.

코드는 다음과 같아야합니다.

jQuery를 (문서) .ready (함수 ($) {$ (문서) .ready (함수 () {needToConfirm = false를 window.onbeforeunload = askConfirm;}); 함수 askConfirm는 () {경우 (needToConfirm) {// 넣어 당신의 사용자 정의 메시지는 여기에 "당신의 저장하지 않은 데이터가 손실됩니다."를 반환;}} $ ( "#의 CommentForm 양식 #") 교환 (함수 () {needToConfirm = TRUE를;}).})

변경 사항을 저장하고 워드 프레스 블로그에 플러그인을 설치.

이 튜토리얼은 끝났습니다. 블로그에 팝업 확인 창을 추가하는 데 도움이되기를 바랍니다. 요점을 이해하지 못하면 주저하지 말고 질문하십시오.