Skip to main content
preview

[WordPress] Popup Builder 플러그인 커스터마이징하기 – 하루동안 이 창 보이지 않기

세상에는 수없이 많은 워드프레스 플러그인이 있지만, 한국 웹사이트에는 꼭 있는 기능을 찾기 힘든 있는 경우가 있습니다. 바로 플러그인의 주 배포자가 서양의 개발자들이기 때문인데요, 한국의 팝업창에는 꼭 있는 하루동안 이 창 보이지 않기도 그런 기능 중 하나입니다.

오늘은 무료 팝업 플러그인의 하나인 Popup Builder 플러그인을 편집해 하루동안 이 창 보이지 않기 기능을 추가해 보겠습니다.

Popup Builder 플러그인
Popup Builder 플러그인은 무료 버전과 PRO 버전이 있지만 무료 버전도 꽤나 사용하기 편리하게 만들어져 있어 일반 사용자 분들이 사용하기에 좋은 플러그인입니다.
 
Popup Builder 플러그인 사용법 보기

먼저 Popup Builder 플러그인 설치 후 javascript 폴더의 sg_popup_frontend.js 파일을 편집합니다.
edit plus, 이클립스, 앱타나 스튜디오 등을 이용하여
‘/wp-content/plugins/popup-builder/javascript/sg_popup_frontend.js’ 파일을 에디터에서 엽니다.
파일 내에서 “onOpen”이라고 검색하면 221번째 줄에서 “onOpen”이 포함된 코드를 찾을 수 있습니다.

1. 아래의 코드를 복사하여 jQuery("#sgcolorbox").addClass('animated '+popupEffect+'');의 아랫줄에 붙여넣기 합니다.



/*Custom*/
jQuery('#sgcboxContent').append(
'<form name="notice_form" class="chk_form" style="width:80%;position:absolute;bottom:0;">
<input type="checkbox" name="chkbox" value="checkbox" />
<label>하루동안 이 창 보이지 않기</label>
</form>');
/*@Custom*/


2. 아래의 코드를 복사하여 onComplete: function(){ ... }의 아래, html: popupHtml,의 윗줄에 붙여넣기 합니다.



/*Custom*/onClosed: function(){closeWin();},/*@Custom*/


3. 완성된 코드는 아래와 같습니다. (218번 줄부터)



SG_POPUP_SETTINGS = {
width: popupWidth,
height: popupHeight,
onOpen:function() {
jQuery('#sgcolorbox').removeAttr('style');
jQuery('#sgcolorbox').removeAttr('left');
jQuery('#sgcolorbox').css('top',''+that.initialPositionTop+'%');
jQuery('#sgcolorbox').css('left',''+that.initialPositionLeft+'%');
jQuery('#sgcolorbox').css('animation-duration', popupEffectDuration+"s");
jQuery('#sgcolorbox').css('-webkit-animation-duration', popupEffectDuration+"s");
jQuery("#sgcolorbox").removeAttr("class");
jQuery("#sgcolorbox").addClass('animated '+popupEffect+'');
/*Custom*/
jQuery('#sgcboxContent').append(
'<form name="notice_form" class="chk_form" style="width:80%;position:absolute;bottom:0;">
<input type="checkbox" name="chkbox" value="checkbox" />
<label>하루동안 이 창 보이지 않기</label>
</form>');
/*@Custom*/

jQuery("#sgcboxOverlay").addClass("sgcboxOverlayBg");
jQuery("#sgcboxOverlay").removeAttr('style');
if (popupOverlayColor) {
jQuery("#sgcboxOverlay").css({'background' : 'none', 'background-color' : popupOverlayColor});
}
},
onLoad: function(){
},
onComplete: function(){
jQuery('#sgcolorbox').trigger("sgColorboxOnCompleate",[pushToBottom]);
/* Contact form 7 */
if(jQuery('div.wpcf7 > form').length) {
jQuery('div.wpcf7 > form').wpcf7InitForm();
}
if(popupWidth == '' && popupHeight == '') {
jQuery.sgcolorbox.resize();
}
jQuery('.sg-popup-close').bind('click', function() {
jQuery.sgcolorbox.close();
});
},
/*Custom*/onClosed: function(){closeWin();},/*@Custom*/
html: popupHtml,
photo: popupPhoto,
iframe: popupIframe,
href: popupImage,
opacity: popupOpacity,
escKey: that.popupEscKey,
closeButton: that.popupCloseButton,
fixed: sgPopupFixed,
top: that.positionTop,
bottom: that.positionBottom,
left: that.positionLeft,
right: that.positionRight,
scrolling: popupScrolling,
reposition: popupReposition,
overlayClose: that.popupOverlayClose,
maxWidth: popupMaxWidth,
maxHeight: popupMaxHeight,
initialWidth: popupInitialWidth,
initialHeight: popupInitialHeight
};


4. 아래의 코드를 복사하여 96~98번째 줄의
SGPopup.prototype.sgShowColorboxWithOptions = function() {
var that = this;
setTimeout(function() {

의 바로 아랫줄에 붙여넣기 합니다.



/*Custom*/if ( document.cookie.indexOf('maindiv=done') > 0 ) return;/*@Custom*/


5. 마지막으로 아래의 코드를 복사하여 문서의 맨 윗줄에 붙여넣기 합니다.


function setCookie( name, value, expiredays ) {
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
cookiedata.indexOf(document.cookie)
}
function closeWin() {
if ( document.notice_form.chkbox.checked ){
setCookie( "maindiv", "done" , 1 );
}
}


모든 설정이 완료된 후 쇼트코드를 입력한 페이지를 보면 아래 그림과 같이 ‘하루동안 이창 열지않기’기능을 가진 팝업이 나타납니다. 🙂

pss

입력방법이 어렵다면?
아래 링크에서 sg_popup_frontend.js 파일을 전체복사하여 붙여넣기 합니다.
 
sg_popup_frontend.js

FacebookTwitterGoogle+Share
  • 나나

    설명하신 대로 적용했는데 팝업창이 뜨지 않아요. Popup Builder 플러그인이 업데이트 되면서 호환이 안되는거 아닌가요?

  • Robin Meng

    안녕하세요? 덕분에 좋은 공부했습니다. 위에 내용을 최신 Pro 버전에서도 적용 가능한가요?

    • hellohj

      갑사합니다. 포스팅 작성시 이용했던 2.1.0버전에서 sg_popup_frontend.js 파일이 변경된 경우 적용되지 않습니다. pro 버전은 보지 못해서요^^;; 위의 코드를 참고하여 알맞은 위치에 이용하시거나 http://blog.helloweb.co.kr/wp-content/uploads/2016/04/popup-builder.zip 의 플러그인 파일을 이용하시면 되겠습니다.

      • Robin Meng

        답변 너무 감사합니다. 참고하겠습니다. 좋은 하루 되세요~~ 🙂

  • Ndesign

    좋은정보 너무 감사합니다^^
    한가지 여쭤보고 싶은게 유튜브 영상이 들어간 팝업을 띄우고 싶은데,
    ifram이 안되더라구요.
    오늘하루창닫기도 사용할 수 있고, 유튜브 영상도 넣을 수 있는 방법은 혹시 없을까요?

  • sora

    좋은정보 감사합니다!!
    혹시 팝업 여러개를 띄울 수는 없나요???

    • helloweb

      구조상 한개를 뛰우는 형태라서 여러개 띄우시려면 커스터마이징 하셔야 할것 같습니다..^^