워드프레스 Popup Maker: 일정 시간 후 자동 팝업 닫기

워드프레스에는 다양한 팝업 플러그인이 있습니다. Popup Maker는 현재 70만 개가 넘는 사이트에 설치되어 사용되고 있는 인기 워드프레스 플러그인입니다. 이 플러그인을 사용하여 쿠팡 방문하기 배너 기능을 구현하는 작업을 간혹 수행하는데, 이 플러그인은 쿠키 등도 자유롭게 지정할 수 있고, 기능도 괜찮은 것 같습니다. 다만, 카페24에서만 그런지 몰라도 배너를 표시하는 위치를 지정해도 위치가 제대로 지정되지 않는 경우가 있는 것 같습니다. 

팝업을 쉽게 만들고 싶은 경우 드래그 앤 드롭 방식을 지원하는 Brave 팝업 빌더 플러그인을 사용할 수 있습니다.

워드프레스 Brave 팝업 플러그인 설정 살펴보기

워드프레스 Popup Maker: 일정 시간 후 자동 팝업 닫기

팝업 메이커에서 특정 팝업이 일정 시간(예: 10초) 후에 자동으로 닫히도록 하고 싶은 경우가 있을 수 있습니다. 팝업 설정에서 Close 설정을 살펴보면 Close 텍스트를 설정하는 옵션과 Close Button(닫기 버튼) 지연 옵션이 제공됩니다. 이외에도 오버레이를 클릭하거나 Esc 키 또는 F4 키를 클릭하면 팝업이 닫히는 기능이 제공됩니다. 또한, Form Submission에서는 양식 제출 시에 팝업이 닫히도록 하는 옵션을 설정할 수 있습니다.

일정 시간 후에 팝업이 자동으로 닫히도록 하는 옵션은 없습니다.

예를 들어, 10초 후에 팝업이 닫히도록 하고 싶은 경우 다음과 같은 자바스크립트 코드를 활용할 수 있습니다.

function hidePopupAfterDelay() {
    setTimeout(function () {
        var element = document.querySelector('#pum-123');
        if (element) {
            element.style.cssText = 'display: none !important';
        }
        // Assuming that overflow is set to hidden in body or html
        document.body.style.overflow = 'auto';
        document.documentElement.style.overflow = 'auto';
    }, 10000);
}

위의 코드에서 [**#pub-123**]는 팝업의 아이디를 확인하여 적절히 수정하시기 바랍니다. 시간은 밀리초 단위입니다. (10초 = 10000밀리초)

상기 코드는 팝업을 숨기는 부분([**display: none**])과 오버레이를 해제하는 부분으로 되어 있습니다.

다른 방법으로 닫기 버튼이 클릭되도록 코드를 만드는 것도 가능합니다. 예시:

    setTimeout(function () {
      closeButton.click();
    }, 100000);

마치며

이상으로 팝업 메이커에서 일정 시간 후에 팝업이 사라지도록 하는 코드에 대하여 살펴보았습니다. 저는 이 블로그와 메인 워드프레스 블로그에 카페 방문하기 배너를 표시하고 있습니다. (메인 블로그에서는 워드프레스 카테고리 글에 대해서는 1/2 이상 글을 읽는 경우에만 표시하도록 설정.) 네이버 카페 방문하기 배너를 사용하면서 카페 회원이 이전보다 제법 늘었습니다.

네이버 카페 회원수 증가

워프사 네이버 카페에서 워드프레스 관련 정보를 공유하실 수 있습니다.

워드프레스 사용자 모임, 홈페이지, ... : 네이버 카페

참고

https://avada.tistory.com/2867

워드프레스 Brave 팝업 플러그인: 텍스트 링크 설정하기

https://avada.tistory.com/2462

워드프레스 엘리멘터 문의폼 위젯(Form 요소)

 

아바다 테마의 Avada Form 살펴보기 (컨택트 폼) - 워드프레스 정보꾸러미