우측 하단 버튼 만들기, 가입형 워드프레스1 min read

0
우측 하단 버튼 만들기, 가입형 워드프레스1 min read

안녕하세요. 포해피우먼입니다. 홈페이지를 이곳 저곳 뜯어고치는 재미가 쏠쏠한데요, 이번에는 “우측 하단 버튼”을 클릭하면 1:1 카카오 채팅이 열리는 기능을 추가해보았습니다. # 가입형 워드프레스, 홈페이지 제작기

우측 하단 버튼 만들기

우측 하단에는 최상단으로 가는 버튼 혹은 카카오톡 연결 버튼이 화면에 상관없이 계속 노출 되는 것 같아 만들어보았다.

img 의 style에 position : fixed 를 추가하면 쉽게 할 수 있었다.

 

우측 하단 버튼 만들기 첫 단계 : WP-admin에 외모 탭에 있는 위젯으로 들어간다.

이후 사용자 html을 sidebar로 옮기는데, sidebar가 없는 테마의 경우에는 footer에 넣어주면 된다.

외모 버튼을 누르고 위젯에 들어가면 사용자 정의 HTML에서 만들 수 있다.

 

사용자 정의 html을 사이드바 혹은 footer에 넣어놓은 후, 해당 내용을 html로 만들면 된다.

우측 하단 버튼을 넣는 방법은... 사실 HTML 을 넣을 수 있는 방법은 모두 가능하다.
사실 HTML 을 넣을 수 있는 방법은 모두 가능하다. footer에 html을 넣어줄 수 있는 플러그인으로도 작성가능하지만 기본적으로 제공되는 기능은 위젯기능이다.

아래 내용이 끝인데, 중요내용은 bold체 안에 있는 부분이다.

카카오톡 플러스 친구를 연결하기 위해 링크를 걸어보았다. image의 크기는 60*60px로 제작했었기 때문에 width를 60px로 맞추어 두었다.

<a href=”http://pf.kakao.com/_cEsgC” style=”position: fixed; bottom: 20px; right: 20px; width: 60px;”>
<img class=”alignnone size-full wp-image-3016″ src=”https://forhappywomen.com/wp-content/uploads/2018/11/산부인과-포해피우먼-문의-카카오플러스친구-버튼.png” alt=”” width=”60″ height=”60″ /></a>

 

우측 하단 버튼 [4] : 혹여 해당내용을 본인의 홈페이지에 적용할 사람은 아래 빨간내용을 수정해서 붙이면 되겠다.

<a href=”링크할홈페이지주소style=”position: fixed; bottom: 20px; right: 20px; width: 60px;”>
<img  src=”업로드된 이미지주소” alt=”” width=”60” height=”60” /></a>

참고> 아이콘은 카카오톡 이미지를 본따서 직접 만들었지만 퍼가실분은 퍼가셔도 좋습니다.png파일입니다.

카카오 톡 유사한 우측 하단 버튼

궁금한 점은 댓글로 남겨주세요. 익명으로도 작성 가능합니다.