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

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

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

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

 

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

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

 

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

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

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

<a href=”http://pf.kakao.com/_cEsgC&#8221; 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&#8221; 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파일입니다.