안녕하세요. 린치핀소프트 한광희입니다.

“워드프레스 팝업창 생성하기”

웹 디자인과 각종 UI 요소들이 궁극적인 목적은 이용자의 관심을 불러 일으키는 것이라고 생각합니다. 물론 잘 구성된 레이아웃배치와 가독성/가시성도 잘 고려해야 겠지만요.

이런면에서 소비자에게 특정한 콘텐츠의 집중을 불러일으키는 목적을 달성하기 위해서 주로 사용하는게 “팝업창” 입니다.

“팝업창”은 소비자의 관심뿐만 아니라 주요 메인 콘텐츠를 보여주기 앞서 먼저 노출할 목적으로 또는 관문(?)으로도 사용됩니다. 주로 소셜커머스사이트에 소비자 분석을 위해서 메인페이지에서 소비자의 성별이나 연령을 물어본 후 답변을 체크하여야만 쇼핑몰의 상품을 보여주는 것 처럼 말입니다.

그 용도가 무엇이 되었든 웹 사이트를 운영하는 입장에서 이벤트,관심의 집중등을 일으키기 위해서 “팝업창”은 아주 주요한 수단입니다.

과거에는 보통 “팝업창”이라고 하면 새로운 윈도우(window)창이 하나 더 생성되는 형식을 많이 일컫었습니다. 그러나 팝업창의 남용이나 사용자의경험요소를 떨어뜨리므로 브라우저에서는 팝업창을 열때 허용여부를 물어보거나 기본적으로 막게끔 설정된 경우도 있습니다.

그래서 보통은 화면이 하나 더 생성되는 팝업창이 아닌 접속한 페이지에서 본 메인 콘텐츠는 불투명해지거나 그림자가 생기고, 팝업창이 해당 메인 콘텐츠를 가리고 위에 뜨는 형식을 차용합니다.

이를 일컫는 용어는 다양한데 보통 모달(Modal)창 또는 ThickBox(틱 박스) 라고도 일컫습니다.

 

screenshot-www.linchpinsoft.com 2015-08-19 20-18-18

<모달(Modal)창 예시>

그래서 이번 포스트에 소개해드리는 팝업창 플러그인은 엄밀히 말하면 새로운 창이 생성되는 팝업이 아니라 위의 스크린샷처럼 동일 화면에 기존 콘텐츠를 가리고 그 위에 창을 하나 배치하는 “모달창”플러그인입니다.

 

1.Popups 플러그인

screenshot-wordpress.org 2015-08-19 20-08-14

오늘 소개해드리는 플러그인은 “Popups” 플러그인입니다. 워드프레스 평점을 보시면 아주 높게 평가되고 있습니다^^ 저도 사용해보니 좋은 평가를 줄수 있는 플러그임에 틀림없었습니다!

Popup 다운로드 : https://wordpress.org/plugins/wordpress-popup/

 

2. Popups 생성

위의 페이지에서 플러그인을 다운로드 설치&활성화 합니다.

screenshot-www.linchpinsoft.com 2015-08-19 20-18-33

 

<플러그인 활성화 후 생성된 Popups 메뉴>

screenshot-www.linchpinsoft.com 2015-08-19 20-23-32

 

< 팝업 생성 화면>

위의 화면을 참고하시어 팝업을 생성하면 됩니다.

이 플러그인의 특징은 워드프레스 비쥬얼 에디터를 이용하여 팝업창을 생성하기 때문에 이미지/그림추가 글의 자유로운 편집과 배치를 할 수 있으며 저처럼 TinyMCE Advanced 플러그인을 설치하시면 더욱 확장된 기능을 이용하여 팝업창을 생성할수 있습니다.

TinyMCE Advanced 플러그인 포스트 : http://www.linchpinsoft.com/tinymce-advanced-플러그인/

TinyMCE Advanced 플러그인은 위의 포스트를 참조하세요.

 

또한 popup display rules 메뉴를 보시면 현재 생성하는 팝업창을 페이지별 또는 포스트 타입별로 지정할 수 있습니다. 보통은 2가지로 메인페이지에서만 노출하거나 모든 페이지에서 노출하는 옵션을 자주 사용 하실것 같습니다.

다음 display option의 cookie expiration days를 입력하면 팝업창의 쿠키값을 지정하여 입력한 일수만큼 다시 메뉴창이 생성되지 않도록 합니다. 즉 해당 창에 “2”를 입력하면 첫 방문후 이틀이 지나야 다시 팝업창이 뜨게 되는거지요. “0”을 입력하면 매번 팝업창이 생성되게 됩니다.

다음 Show powerd by link 부분은 “아니오”로 체크해주세요 이 부분이 “예”로 되어 있게 되면 모달창(팝업창) 아래에 플러그인 powerd by 텍스트가 보여지게 됩니다.

apperance 메뉴는 모달창의 경계선 색/굵기 모달창의 배경색과 너비 크기등을 수정할 수 있으며, 모달창이 생성될때 주변 화면(콘텐츠)의 불투명도를 지정할 수 있습니다.

3. Popups 확인

screenshot-www.linchpinsoft.com 2015-08-19 20-28-53

<모달창이 필요하지 않을떄 “상태를 임시 글”로 설정하면 모달창이 적용되지 않습니다>

모달창을 특정시점 이후에는 해제하여야 하는 경우가 있습니다. 그러나 해당 팝업창을 지우자니 다음에 재사용을 염두해두자면 지울수가 없습니다.  이 때에는 해당 모달창의 상태를 “임시글”로 적용하면 모달창이 페이지에 생성되지 않으면서 현재까지 사용한 모달창의 상태를 고스란히 저장할수 있습니다!

 

screenshot-www.linchpinsoft.com 2015-08-19 20-21-08

 

<모바일에서 모달창 확인>

워드프레스 popup 플러그인은 반응형도 지원합니다. 그래서 옵션창에서 지정한 너비가 모바일보다 크더라도 레이아웃이 깨지지 않고 모바일 화면의 너비에 자동으로 맞춰줍니다.