워드프레스 위로가기 버튼 만들기 (Feat. 카덴스 테마)

구글 랭킹을 결정 짓는 모든 원리 중에 가장 근본은 홈페이지나 블로그가 얼마나 쾌적한 사용자 경험을 제공하는가 입니다. 오늘은 나의 홈페이지(블로그)의 쾌적한 사용자 경험을 제공하기 위한 도구 중 하나인 위로 가기 버튼 만드는 방법을 알아보겠습니다.

위로가기 버튼 만들기를 하는 이유

글을 쭉 읽어내려가다가 이전 내용들을 읽어보고 싶은 경우 스크롤을 쭉쭉 돌리셨던 경험이 있으실 겁니다. 글이 정말 긴 경우, 이렇게 스크롤을 돌려야 한다면 여간 짜증나는게 아닙니다.

이런 상황은 지금 읽고 계신 블로그 오른쪽 하단에 있는 위로 가기 버튼(윗 방향 화살표)을 만들어주면 사용자 경험 개선에 큰 도움을 주겠죠?

워드프레스 카덴스 테마에서 위로가기 버튼 만들기

워드프레스 카덴스 테마는 사용자 정의하기 기능을 사용해서 정말 쉽게 위로 가기 버튼을 만들 수 있습니다. 위로가기 버튼을 만들어 위해서 사용자 정의하기 > General > Scroll To Top 이라는 하는 곳으로 이동합니다.

다음으로 나오는 화면에서 가장 윗쪽에 있는 Enable Scroll To Top이라는 토글 버튼을 눌러 활성화 해주면 끝입니다.

보여줄 기기 설정하기

위로가기 버튼은 기본적으로 PC와 태블릿에 보이도록 설정이 되어 있습니다. 섹션 아래쪽으로 아래 그림과 같은 Visibility 설정하는 부분이 있습니다.

모바일 환경에서도 사용하게끔 하고 싶다면 마지막 핸드폰 아이콘을 클릭하여 활성화 해줍니다.

세부 설정

대부분 그냥 기본 설정으로 쓰시면 되지만, 그래도 나는 세부적으로 조정해보고 싶은 경우 밑에 있는 메뉴를 통해 몇가지 세부 사항을 조정 할 수 있습니다. 위 그림을 눌러보시면 크게 보실 수 있으니, 하나씩 보면서 읽어보시기 바랍니다.

• 위로가기 아이콘 버튼 모양을 4가지 중 선택할 수 있습니다.
• 위로가기 버튼 사이즈를 PC, 태블릿, 핸드폰에서 각각 다르게 설정할 수 있습니다.
  • 그림에서 두번째 박스 표시 보이시죠? 왼쪽에서부터 차례대로 PC, 태블릿, 핸드폰을 눌러서 최적의 사이즈를 설정해주면 됩니다.
• 위로가기 버튼의 화면 위치를 조정할 수 있습니다.
  • Side Offeset의 경우 오른쪽에서 (혹은 왼쪽) 얼마나 떨어져 있어야 하는지 결정
  • Bottom Offest의 경우 아래에서 얼마나 떨어져 있어야 하는지 결정

주의 사항

보통 애드센스 앵커광고를 사용하는 경우, 위로 가기 버튼 위치를 섬세하게 고려해서 달아줘야 합니다. 현재 워플이 사용하고 있는 설정값을 공유해드리니 참고하세요.

• PC 환경: Icon Size 1.2em, Side Offset 30px, Bottom Offset 30px 혹은 150px (앵커 광고 있는 경우)
• 모바일 환경: Icon Size 0.7 em, Side Offset 5 px, Bottom Offset 30 px

마치며

오늘은 워드프레스 테마의 위로가기 버튼 만드는 방법을 알아보았습니다. 다른 워드프레스 꾸미기가 궁금하신 분들은 워드프레스 꾸미기 모음집 포스팅을 참고해주시기 바랍니다.