×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 2,877,095명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)
반응형



본 홈페이지 만들기 포스트는 처음부터 시작하여 홈페이지를 제작하는 과정을 포스팅 하는 것이고, 

필자도 포스팅을 함과 동시에 홈페이지 제작을 공부를 하고 있는 내용이므로, 매우 구체적이거나 세부적이지 못합니다.


이 내용들은 Wordpress를 기반으로 모두 제작하고 있음을 사전에 명시합니다.





필자의 홈페이지는 원페이지 형식으로써 모든 내용이 팝업형식으로 되어있다.


따라서 팝업을 매우 이용하는 부분이 많이 있었고, 워드프레스 플러그인 중에서 


Popup Maker이라는 플러그인이 상당히 도움 되었기에 이 플러그인으로 어떻게 팝업을 만들고 이용하는지 설명하고자 한다.



1. Popup Maker 설치하기



우선 플러그인 추가하기에서 popup maker를 검색하고 설치 한 후 활성화 시키자.




2. 팝업 생성하기



왼쪽 리스트에서 Popup Maker을 찾고 Add Popup을 눌러 팝업을 생성해보자.


이름을 적고 하단 팝업에 들어갈 내용에 원하는 내용을 적으면 된다.


여기서 만약 팝업에 게시판을 달고싶다면 Kboard 숏코드를 이용하여 달 수 있다.(Kboard가 설치되어 있어야 한다.)



이렇게 작성하고 저장하면 끝이다.




그 외 다양한 팝업 내용을 넣기 위해서는 팝업 작성 Input란에서 다양하게 만들어보자.




3. 팝업 메인화면에 적용하기


이제 이 내용을 메인화면과 어떻게 접목하느냐가 관건이다.


페이지에서 자신의 메인화면이 될 페이지를 불러온다.


그리고 클릭했을 때 팝업이 뜨게 하기위한 이미지 혹은 텍스트를 작성한다.


필자는 저렇게 아이콘과 자유게시판이라는 단어 두개로 자유게시판을 표현하고자 한다.









다음과 같이 필자는 작성하였다.


<a class="popmake-popupfree">

<i class="fa fa-comments" style="font-size:4em; color:#5a6a81;"></i>

<br /><br />

<font size="5px" color="#444444">자유 게시판</font>

</a>


일단 Popup Maker에서 제공해주는 class는 다음과 같다.


<a class="popmake-(자신이 만든 팝업 네임)"> (클릭하게 만들 이미지 혹은 텍스트) </a>


이렇게 만들면 클릭이 이루어 질 때 팝업이 나타나게 된다.


필자는 클릭이 이루어 지는 행위를 아이콘과 텍스트로 나타내었다.


<i class="fa fa-comments" style="font-size:4em; color:#5a6a81;"></i>

<br /><br />

<font size="5px" color="#444444">자유 게시판</font>


<i class="fa fa-comments" style="font-size:4em; color:#5a6a81;"></i> :: 워드프레스 대표 아이콘 font awesome에서 제공해주는 아이콘들이다.


그리고 <font size="5px" color="#444444">자유 게시판</font> 를 이용하여 하나의 버튼을 만들었다.


저렇게 하고 done를 누르고 업데이트를 해주면 이제 자유게시판 아이콘 혹은 텍스트를 클릭 시 게시판이 다음과 같이 나타난다.




이 방법 이외의 다양한 방법이 존재한다. (Jquery, PHP, HTML 태그 등등) 


그러한 방법은 http://docs.wppopupmaker.com/article/144-trigger-click-open 여기서 참고하면 매우 좋을 것 같다.

(공식 홈페이지 안내서)



그리고 추가적인 부가 옵션들을 설정하는 것은 제작자의 입맛에 따라 바뀌기에 따로 설명하지 않았다.

(모두 영어로 되어있지만 해석하기에 어려운 부분은 없어보인다.)




4. 트리거를 이용하여 팝업을 나타내기



Popup Maker에서는 하나의 기능을 더 제공해주는데 그것은 트리거를 이용하여 팝업을 나타내주는 기능이다.


이 기능이 무얼 의미하냐면 Free Version에서는 특정 페이지에서 팝업이 자동으로 열리는 트리거를 제공해준다.




자동으로 열리는 팝업을 만들기 위해 Auto Open을 클릭한다.




팝업이 언제 나타날지 설정하는데 필자는 0ms로 설정했다.(기본 500ms)


Add를 누르고 난 뒤 아래 빨간색 박스 버튼을 누르면 또다시 이렇게 쿠키 세팅이 뜬다.


Cookies는 팝업이 매번 들어올때마다 나타날지,  1주일에 한번 올때마다 나타날지 등등 주기를 나타내 줄 수 있는 역할을 한다. 


원하는 방식대로 설정해주고 확인을 누르면 된다.





* 쿠키를 1년에 한번씩 뜨도록 했더니 제 홈페이지에서 확인할 수가 없어요!!


자신이 이용하는 브라우저(크롬, 익스플로러, 파이어 폭스 등) 인터넷 쿠키 삭제 방법을 검색해보자. 쉽게 해결할 수 있다.


즉, 쿠키를 삭제해야 테스트도 계속 가능하다.


https://www.google.co.kr/search?q=kboard&oq=kboard&aqs=chrome..69i57j69i60l3j69i59l2.4559j0j4&sourceid=chrome&ie=UTF-8#newwindow=1&q=%ED%81%AC%EB%A1%AC+%EC%BF%A0%ED%82%A4+%EC%82%AD%EC%A0%9C


위 링크는 크롬 쿠키 삭제 검색 결과이다.


이제 설정을 하고 저장을 해주면 자신의 홈페이지에 들어가자마자 팝업이 덩그라니 하나 뜨는 것을 볼 수 있을 것이다.





반응형