어느날 문득 든 생각, 급하게 알릴 공지사항이 있는 경우에는 팝업이 꼭 필요한데, 워드프레스로 만들어진 사이트(홈페이지, 쇼핑몰, 블로그)에서는 팝업이 가능한가 ??
답은, “가능하다”였습니다. 아래의 게시글은 draft(초안)수준입니다. 내용을 보강할 필요가 있습니다. 빠르게 정리한다는 점에서 개요를 올립니다.
1. 워드프레스 팝업 플러그인들
워드프레스 팝업 플러그인 에서는 좋은 플러그인을 고르는 방법을 설명하며 아래 게시글은 국내 결제플러그인으로 유명한 코드엠의 게시글로 국내에서도 많이 사용하고 있는 네개의 팝업플러그인을 소개하고 있습니다. 이 정도만해도 이용해도 팝업에 문제가 없을 듯 합니다.
(1) Hustle – Pop-Ups, Slide-ins and Email Opt-ins plugin
( https://wordpress.org/plugins/wordpress-popup/ )
다시보지 않기 기능 (Nerver see this message again) 기능이 있으며, 팝업을 표시하고 닫을 때 애니메이션을 추가할 수 있습니다.
또한 각 팝업별로 Custom CSS 영역을 제공하기 있어, CSS 를 사용할 수 있는 분들에게 편리한 플러그인 입니다.
slide, embed, social sharing, Call to action button, Email collection 등 훌륭한 기능이 많은데 popup창의 위치가 정중앙에만 가능하고 위치를 따로 결정할 수 없습니다.
- Version:6.0.7
- Last updated:1 day ago
- Active installations:80,000+
- WordPress Version:4.6 or higher
- Tested up to:5.0.3
설치 및 활성화
참고 2개의 사이트에서 설치해 보았는데, 1개의 사이트는 설치가 잘 되고 1개의 사이트에서는 “업로드된 파일이 wp-content/uploads/2019/01 로 옮겨질 수 없습니다.”와 같은 에러가 나오며 설치가 안돼 사용하지 못했습니다. (에러의 이유는 호스팅 공간 부족문제였습니다. 호스팅을 디스크 공간 부족때문이었습니다. )
사용법
[POP-UPS], [EMBEDS], [SLIDE-INS], [SOCIAL SHARES], [SETTINGS]으로 구성되며 팝업외에 슬라이드와 소셜버튼을 만들 수 있으며 EMBEDS라는 기능도 있습니다.
[EMBEDS] 에서는 맞춤 콘텐츠로 Embed 모듈을 만들어 사용할 수 있으며 사용자의 이메일을 수집 할 수 있습니다. 그런 다음 게시 모듈을 게시물이나 페이지에 추가하거나 위젯과 단축 코드에 표시 할 수 있습니다.( EMBED CODE를 ID로 관리하여 필요한 위치(페이지나 게시글 또는 위젯등)에 넣어서 사용할 수 있는 것 같습니다. )
새로운 팝업 만들기
[Content(팝업 컨텐츠를 만드는 부분)], [Desing], [Display Settings](기간 설정 등) 으로 구성되어 상세설정할 수 있습니다.
[Content(팝업 컨텐츠를 만드는 부분)] 에서는 제목과 부제목을 보이게 할지 선택할 수 있습니다.
[Content] 는 대표 이미지 설정, call to action 버튼, e-mail 수집 기능이 있는데, call to action 버튼, e-mail 수집 기능은 매우 훌륭한 기능으로 MailChimp와는 자동연동도 가능한 것 같습니다. 활성 사용자가 80,000 이상인 것은 이런 장점에 기인합니다.
[Display Settings]에는 애니메이션 설정이 가능합니다.
모든 페이지, 모든 게시글에 팝업이 보이게 설정한 경우, [Additional settings]에서 No longer show this message across the site(이 사이트 전체에서 이 팝업을 다시 보이지 않기) 나 No longer show this message on this post / page(이 게시글 또는 페이지에 이 팝업을 다시 보이지 않기) 를 선택하여 주세요. No longer show this message on this post/page 나 No longer show this message across the site 를 선택하시면 새로고침 또는 브라우저를 닫고 다시 시작하여도 팝업은 노출되지 않습니다.
Expires (after expiry, user will see the Pop-up again)[만료 (만료 후 사용자에게 다시 팝업이 표시됨)]을 1 day로 선택하시면 하루가 지난후에는 팝업이 다시 표시됩니다. 이것은 국내 팝업들 중 하단에 [오늘하루 팝업창 열지 않기] 체크버튼이 있는 것과 같은 기능을 하는 것입니다.
enable tracking
톱니바퀴 모양의 설정을 선택하신후 [enable tracking]을 선택하시면 이미지의 3번과 같이 몇번 팝업이 노출되었는지 추적할 수 있습니다.
(2) Popups – WordPress Popup ( https://wordpress.org/plugins/popups/ )
이 팝업 플러그인은 인터넷 익스폴로어에서는 잘 되는데, 크롬 브라우저에서는 잘 작동이 안되는 것 같습니다.
설치 및 활성화
사용법
(3) Popup Maker( https://wordpress.org/plugins/popup-maker/ )
이 플러그인은 팝업 닫기를 하면 브라우저를 벗어나지 않는 한 다시 팝업 뜨지 않아야 하는데, 닫기를 한 후에도 다음에 특정 페이지나 게시글에 가면 다시 팝업이 계속 노출되는 단점이 있습니다.
popup 하단 Targeting 에서 카테고리,태그, 테마 등 구분하여 팝업을 설정할 수 있으며, 팝업 내 스타일을 설정하여 사용할 수 있습니다. 우측 Targeting Conditions 외 특정 페이지에서 팝업을 사용하고자 하는 경우 사용이 어려울 수 있습니다.( 참고 : 워드프레스 팝업 플러그인 )
- Version:1.7.30
- Last updated:3 weeks ago
- Active installations:300,000+
- WordPress Version:4.1 or higher
- Tested up to:5.0.3
설치 및 활성화
[플러그인] -> [새로추가] popup maker 로 조회하여 설치 및 활성화해주세요.
사용법
팝업 편집창 하단에 Triggers / Targeting / Display / Close / Advanced 하여 5개의 설정창이 있는데, 이곳에서 설정해 주세요.
(4) BBS e-Popup( https://wordpress.org/plugins/bbs-e-popup/ )
다양한 용도로 활용 할 수 있는 팝업 디자인 템플릿과 다양한 버튼 디자인을 제공합니다. 영어(English), 일본어(日本語), 중국어(中国語), 한국어 등 다양한 언어 제공합니다.
새해인사등 다양한 템플릿이 제공된다는 점, 한국어로 되어 있어 영어 설정보다 수월하다는 점등의 장점이 있습니다. 팝업창은 홈에서만 노출이 되고 다른 특정위치에 노출을 설정할 수 없다는 단점이 있습니다.
설치 및 활성화
2. 워드프레스 팝업창(popup) 플러그인 소개 및 사용법 안내
새로운 창이 생성되는 팝업이 아니라 위의 스크린샷처럼 동일 화면에 기존 콘텐츠를 가리고 그 위에 창을 하나 배치하는 모달(Modal)창 또는 ThickBox(틱 박스) 를 제공하는 플러그인으로 Popups 를 소개하고 있습니다.
Popup 다운로드 : https://wordpress.org/plugins/wordpress-popup/
3. 팝업창을 띄우기 위한 플러그인 10선
이 게시글은 [바로가기]와 [데모보기]를 제공하여 각 플러그인들을 소개하고 있어 더 살펴볼 필요가 있습니다.
저는 e-mail marketing 을 위해 Subscribe Popup 이 관심을 가져는데, MailChimp or iContact newsletter systems으로 보낼 수도 있고 모든 저장된 데이터를 CSV file로 저장하여 다른 뉴스레터 시스템과 함께 사용할 수 있다고 합니다. e-mail marketing 에 활용하세요.
또한 e-mail marketing의 장단점과 워드프레스 이메일 이메일 마케팅 도구(e-mail marketing plugin)인 젯팩 플러그인, MailPoet Newsletters 플러그인은 저의 아래의 게시글 참고하세요.
참고자료 : 1. 워드프레스 팝업 플러그인
2. 워드프레스 팝업창(popup) 플러그인 소개 및 사용법 안내