웹사이트에 팝업창을 띄우는 게 사용자 경험에 유익한지 아닌지를 떠나, 실무에서는 종종 팝업창을 띄워야 할 일들이 생기곤 합니다. 새로 알릴 공지사항이 있거나 아니면 특별 행사로 이벤트를 하거나 뉴스레터에 가입을 권하는 등등 그 용도도 다양하죠.
워드프레스에서도 마찬가지입니다. 이런저런 이유로 팝업을 만들어 띄울 일들이 있습니다. 그럴 땐 어떻게 하나요?
맞습니다. 워드프레스에서 모든 길은 플러그인으로 통하죠! 팝업 플러그인을 찾아 설치하고 플러그인에서 하라는대로 하면 됩니다. 워드프레스 플러그인 디렉터리에서 “popup” 키워드로 검색하면 다양한 플러그인들이 검색되죠.
그 중 가장 인기있는 플러그인은 검색 결과 최상위에 표시되는 다음 2개의 플러그인입니다. (이것 말고도 많이 있습니다. 정말로 많이!)
이 두 플러그인의 사용법은 이미 인터넷 상에 좋은 글들이 많이 나와 있으니 참고하면 될 듯 싶고, 여기서는 이들 팝업 플러그인 없이 간단하게 내 워드프레스 사이트에 팝업창을 만들어 띄우는 법을 한번 다뤄 보기로 하겠습니다.
jQuery Modal
웹사이트에서 팝업을 띄우기 위해서는 자바스크립트가 필요합니다. 워드프레스에는 jQuery 라이브러리가 기본으로 탑재되어 있기 때문에 jQuery를 이용하면 간단하게 새로운 기능들을 구현해 넣을 수가 있겠죠.
우선 jQuery 기반으로 팝업창을 띄우는 라이브러리를 하나 찾아서 설치하겠습니다.
여기서는 jQuery Modal이라는 라이브러리를 사용하기로 합니다.
이 라이브러리는 그야말로 ‘기본적인’ 팝업 기능만을 제공하는 라이브러리로, 사용법이 쉽고 설정할 게 많지 않아 간단하게 쓸 수 있습니다. 굳이 이 라이브러리 아니라도 내 입맛에 맞는 라이브러리라면 아무거나 상관 없습니다. (트위터 Bootstrap을 사용한다면 부트스트랩에서 제공하는 모달 팝업을 이용할 수도 있겠죠)
jQuery Modal을 워드프레스에 설치하는 방법은 따로 설명하지 않겠습니다. 아래 글들을 참고하면 됩니다.
팝업 페이지 만들기
jQuery Modal 라이브러리를 내 워드프레스 사이트에 추가했다면, 이제 팝업창에 들어갈 내용을 입력할 팝업 페이지를 하나 간단하게 만들어 보기로 하겠습니다.
통상적으로 팝업창은 통짜 이미지 파일을 하나 만들어 추가하는 방식으로 사용하는 경우가 많기 때문에 여기서도 팝업창에 들어갈 이미지를 하나 샘플로 사용하겠습니다. (이미지 출처: 망고보드)
워드프레스 관리자 대시보드 “페이지 > 새 페이지 추가” 메뉴에서 다음과 같이 페이지를 추가하면 됩니다.
여기서 우리가 사용할 부분은 페이지 본문 부분입니다. 따라서 페이지 제목은 적당히 아무렇게나 주면 되겠고, 특히 슬러그(slug) 값만 잘 기억해 두세요! (나중에 참조할 일이 있으니)
팝업창을 띄울 페이지 만들기
팝업 페이지를 만들었다면, 이번엔 팝업창을 띄울 페이지를 만들어 보겠습니다. 흔히 팝업창은 사이트의 메인 페이지에서 자동으로 띄우는 경우가 많지만, 여기서는 일단 사용자가 특정 페이지에 들어와서 버튼이나 링크를 클릭하면 팝업창이 뜨는 방식으로 진행합니다.
다시 새 페이지를 하나 더 만듭니다. 이번엔 링크를 걸어, 사용자가 링크나 버튼을 클릭하면 팝업창이 뜨도록 하는 페이지입니다.
입력한 코드 부분만 다시 볼까요? (이 때 코드 입력은 편집기의 “비주얼” 모드가 아닌 “텍스트” 모드에서 입력하세요!)
<div id="modal-image" class="modal">
[insert page='modal-popup-image' display='content']
</div>
<a href="#modal-image" rel="modal:open">팝업창 띄우기</a>
이 코드는 링크를 클릭하면 id값이 “modal-image”인 div 태그 속에 들어 있는 내용을 팝업으로 띄우는 코드입니다. 코드를 왜 이렇게 구성했는지는 jQuery Modal 문서를 보면 됩니다.
유의해서 볼 부분은, 중간에 포함된 숏코드입니다.
이 숏코드는 Insert Pages라는 워드프레스 플러그인에서 제공하는 숏코드로, 페이지나 포스트 속에 다른 페이지의 내용을 표시할 수 있도록 해주는 플러그인입니다.
여기서는 슬러그(slug) 값이 “modal-popup-image”인 페이지(앞서 우리가 만든 팝업 페이지)의 본문(content)만 가져와 표시하도록 하고 있습니다.
굳이 이렇게 숏코드를 사용하지 않고 직접 div#modal-image 속에 팝업 이미지를 삽입하는 방식으로 하면 안되냐구요? 네, 됩니다. 당연히 그래도 되구요. 다만 여기서는 팝업창의 내용이 복잡해지거나(텍스트 + 이미지 혼합) 혹은 나중에 팝업창의 내용만 따로 떼어 관리하기 편리하도록 이렇게 페이지 참조 방식으로 처리한 것 뿐입니다.
여기까지 정상적으로 완료되었다면, 아래와 같이 페이지 속에 “팝업창 띄우기” 링크가 표시될 것이며,
링크를 클릭하면 다음과 같이 팝업창이 모달(modal) 방식으로 표시될 것입니다.
디자인이 맘에 안든다구요? 팝업창의 디자인은 jQuery Modal의 CSS 스타일을 변경하면 쉽게 수정할 수 있습니다.
자동으로 팝업 띄우기
링크를 클릭하면 팝업창이 뜨는 대신, 특정 페이지(또는 메인 페이지)에 사용자가 진입했을 때 자동으로 팝업이 뜨게 하려면 어떻게 하면 될까요?
간단합니다. 코드를 약간만 수정하면 되죠.
앞서의 링크 코드 대신 아래 코드를 추가하면 페이지 로드와 동시에 자동으로 팝업이 뜰 것입니다.
<script>jQuery("#modal-image").modal();</script>
그 밖에 특정 시간이 경과 후에 팝업창이 뜨게 하려면 자바스크립트 setTimeout()함수를 사용해서 시간을 설정하면 되고, 기타 쿠키(cookies) 값을 조작하여 한번만 뜨도록 하거나 ‘오늘 하루만 보이지 않게 하기’ 등도 어렵지 않게 구현할 수 있을 것입니다.
마무리
굳이 팝업 플러그인을 사용하지 않고 팝업창을 직접 만들 이유가 있을까요? 라고 묻는다면.. 글쎄요. 굳이 그럴 필요 없다고 말씀 드리는게 정답이겠죠.
하지만 내 웹사이트에 딱 맞는 팝업 시스템을 만들어 놓으면 자유도가 올라갑니다. 굳이 팝업 플러그인에서 지정한 방식에 맞춰 팝업을 처리할 필요도 없고 팝업창의 디자인이나 구성을 좀더 내 입맛대로 조정할 수도 있게 됩니다. 앞서 소개한 내용을 숏코드(shortcode)로 만들거나 커스텀 블록(custom block)으로 처리하면, 내 테마와 잘 어울리는 팝업 시스템과 UI를 만들 수도 있겠죠.
팝업은 복잡한 플러그인을 사용할만큼 그렇게 어려운 기능도 아니니까요!
0 thoughts on “팝업 플러그인 없이 팝업창 띄우기”