사이트 오른쪽에 고정된 버튼, 폼 추가하기
워드프레스 사이트 셀프 수정하기
사이트 한쪽에 떠있는(스크롤해도 고정) 버튼이나 구조를 넣고자 할 때 관련 플러그인을 설치해서 적용할 수도 있지만, 구조나 원리만 알면 셀프로 적용할 수 있습니다.
화면에 떠 있는 요소를 사이트에 추가하려면 어떤 게 필요할까요?
1. html 구조
2. css 스타일 정의
3. js 동작 체크 및 제어
이 세 가지 조합이면 어떤 테마에도 떠 있는 요소들을 추가할 수 있습니다. 문제는 이걸 어디에 어떻게 적는지만 알면 됩니다.
1. html
간단 설명 :
이미지를 버튼화 하려면 img > a > div 순서로 구조를 만들면 됩니다. 이걸 세로로 나열되게 하려면 그걸 감싸는 상위 div가 있으면 스타일로 조정이 될 수 있습니다. (※ 스크린샷에 있는 모든 정보를 다 적을 필요는 없습니다. 간단한 게 좋습니다.)
웹페이지가 스크롤이 되어도 어느 한 곳에 계속 고정이 되려면, 위치 속성에 fixed라는 값을 주면 됩니다. 그리고 위로부터 가운데, 오른쪽에서 어디에 위치만 알려주면 되겠습니다.
contact 버튼을 누르면 등장하는 폼 구조는 요소에 show라는 클래스가 있거나 없을 때 서로 다른 위치값을 가지고 있습니다.
'show'라는 클래스명은 파란색 'contact'라는 버튼을 클릭 시 추가되고, X 버튼을 클릭 시 제거됩니다. jQuery를 이용해서 클릭 이벤트를 감지하고 클래스를 넣고 빼고만 제어하면 됩니다.
이제 적용하는 방법을 알아보겠습니다.
방법 1. 자식 테마를 설치 및 적용 중일 때
워드프레스의 테마에는 부모와 자식이라는 관계가 있습니다. 부모의 모든 개발 내용과 특성을 그대로 가지고 있으면서 사용자가 따로 커스텀을 할 수 있는 구조를 만들어 놓은 것인데요, 이를 통해 필요한 코드나 스타일 정의를 쉽게 추가할 수 있습니다. (자식 테마 이용 소개)
자식 테마에는 기본적으로 코드를 넣을 수 있는 functions.php와 스타일 정의를 추가할 수 있는 style.css 파일이 있습니다. 두 파일을 이용해서 플로팅 구조를 위한 세 가지 조합을 추가하면 되겠네요.
그런데 functions.php에 코드를 넣었을 뿐인데 사이트에 대체 어떻게 추가가 된다는 말일까요?
워드프레스에는 개발이나 커스텀이 쉽도록 도와주는 또 다른 방법인 Hook이 있습니다. 모든 테마에는 기본적으로 존재하는 hook이 있습니다. 바로 'wp_head'와 'wp_footer'인데, 'wp_head'는 head 태그 안에 뭔가를 추가할 때 쓰는 연결 고리이고, 'wp_footer'는 body 태그 끝나기 전 뭔가를 추가할 때 쓰는 연결 고리입니다. 아래 스크린샷을 보면 테마의 footer.php 파일에서 콘텐츠가 끝나는 body 태그 닫는 부분 앞에 wp_footer라는 훅이 존재하는 걸 볼 수 있습니다. (모든 테마에 있음!)
훅을 사용하는 방법은 꽤 간단합니다. 아래 코드에 의해 'wp_footer'라는 훅 위치에 'custom_add_floating_elements'라는 이름의 함수가 99번이라는 우선순위(높을수록 나중에 작동)를 가지고 실행이 됩니다.
// 워드프레스 훅(hook)을 이용해서 화면 요소를 추가하기
add_action('wp_footer', 'custom_add_floating_elements', 99);
function custom_add_floating_elements() {
?>
......
<?php
}
이제 [...... ] 부분에 html과 script를 적어주면 사이트 아래쪽에 코드들이 추가가 될 겁니다.
스타일 정의는 자식테마의 style.css에 적어주면 됩니다. 참고로 자식테마의 이 스타일 파일은 사이트의 head 태그 안에 포함이 되어 읽히게 됩니다.
이렇게 하면 화면에 떠 있는 요소를 위한 세 가지 조합이 페이지에 다 존재하게 된 겁니다. 이제 세 조합이 다 맞물려 작동을 할 수 있습니다.
> http://oks-together.hol.es/wpcomponent/
!※ html 구조나 css 정의는 위 링크를 연 다음, 브라우저의 개발자 도구를 이용하면 쉽게 확인 가능합니다.
스크립트는 따로 적어 놓겠습니다.
<script type="text/javascript">
(function($) {
// side floating form show
$('#show-floating-contact > div').on('click', function(){
$('#side-floating-form').addClass('show');
});
$('#side-floating-form-close').on('click', function(){
$('#side-floating-form').removeClass('show');
});
})( jQuery );
</script>
방법 2. 푸터를 마음대로 꾸밀 수 있는 테마를 쓸 때
다음은 Impreza와 같이 푸터를 빌더로 꾸밀 수 있게 돼 있는 테마에서 쓸 수 있는 방법입니다. 푸터 아래쪽에 화면에 고정할 요소들도 빌더로 구성을 하는 것이죠. 푸터 위치에 있더라도 css의 fixed 스타일 속성으로 인해 어차피 푸터와 붙어서 보이질 않게 됩니다.
pc 화면에서는 요소를 딱 중앙에 오도록 하기 위해 추가 css를 추가해 봤습니다. 만약 위치 정렬이 필요 없다면 따로 스타일 정의도 필요가 없이 더 간단해지겠네요.
정렬 부분을 잠깐 설명하면, postion이 fixed 되고, top에서 50% 위치에 요소를 위치시키면 여기서부터 화면에 표시가 됩니다. 그러니 표시될 요소 높이의 반은 위로 올려야 딱 가운데 있는 것처럼 보이게 됩니다. 그래서 이런 식으로 높이 보정을 위해 css가 추가 됐습니다.
transform: translate(0,-50%);
그리고 'show'라는 클래스명을 가지기 전에는 화면의 오른쪽 안 보이는 곳에 잠시 위치해 있다가, 'show'라는 클래스를 가지게 된 순간 왼쪽으로 원래 위치에 오는 것도 css로 만들 수 있습니다.
#side-floating-form { /* 순간이동이 아닌 0.5초 동안 밀려 나오게 하기 */
transition: transform 0.5s linear;
}
#side-floating-form { /* 내 몸집의 100%만큼 오른쪽으로 이동해 있기 */
transform: translate(100%,-50%);
}
#side-floating-form.show { /* 원래의 위치로 */
transform: translate(0,-50%);
}
이제 'show'라는 이름의 클래스를 숨겨진 폼 요소에 넣고 빼는 기능을 하는 스크립트의 추가가 남았습니다.
'contact' 버튼, X 버튼 클릭 시의 동작 체크 및 클래스명 토글은 jQuery를 쓰기 위해 자식 테마의 functions.php를 이용합니다. 만약 난 아쉽게도 자식테마가 아닌 부모테마를 이용 중인 경우에는 사이트에 php 코드를 추가할 수 있는 'Code Snippets'같은 플러그인을 이용해도 됩니다. 여기에서도 워드프레스의 훅을 이용해서 스크립트를 추가하는 방법은 똑같습니다.
html과 스타일 정의는 이미 어드민 내에서 완료했으므로, 자식 테마에 따로 적을 필요가 없습니다.
> http://oks-together.hol.es/wpcomponent/
(※ 테스트용 해외 사이트라 첫 로딩이 좀 길 수 있음)
플러그인을 쓰면 내가 원하는 100% 맞는 것을 찾기도 어렵고, 다양한 유저가 쓰도록 만들어지다 보니 너무 불필요한 기능이 많이 붙어 있는 경우도 많습니다. 이럴 때 코드를 어디 넣어야 하는지, 그리고 워드프레스의 기본 수정 방법을 조금만 알면 직접 구조를 만들 수 있습니다.
끝.
