워드프레스 Back to Top 버튼 사용하기

by

웹사이트나 블로그에 긴 내용을 작성하다보면, 사용자가 페이지 맨 위로 돌아가는 기능이 필요한 경우가 종종 있습니다. 이때 Back to Top 버튼을 사용하면 사용자의 편의성을 높일 수 있습니다. 이번 글에서는 워드프레스에서 Back to Top 버튼을 구현하는 방법을 알아보겠습니다.

1. 워드프레스 테마의 수정

첫 번째로, Back to Top 버튼을 추가하려는 워드프레스 테마의 파일을 수정해야 합니다. 대부분의 경우, 테마의 footer.php 파일에 해당 버튼을 추가하면 됩니다. 다음은 footer.php 파일을 수정하는 방법입니다.

  1. 워드프레스 대시보드에 로그인합니다.
  2. 왼쪽 메뉴에서 "테마" – "편집기"를 선택합니다.
  3. 편집기에서 "footer.php" 파일을 찾아 클릭합니다.
  4. 파일 내에서 <footer> 요소의 바로 위에 Back to Top 버튼을 추가합니다.
<footer>
  <a href="#" id="back-to-top">Back to Top</a>
  <!-- 기존 footer 내용 -->
</footer>

2. CSS 스타일링 추가

두 번째로, CSS 스타일링을 추가해 Back to Top 버튼이 원하는 위치에 나타나도록 합니다. 다음은 CSS 스타일링을 추가하는 방법입니다.

  1. 워드프레스 대시보드에 로그인합니다.
  2. 왼쪽 메뉴에서 "테마" – "편집기"를 선택합니다.
  3. 편집기에서 "style.css" 파일을 찾아 클릭합니다.
  4. 파일 마지막에 다음 CSS 코드를 추가합니다.
#back-to-top {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  background-color: #000;
  border-radius: 50%;
}

#back-to-top:hover {
  background-color: #555;
}

결론

이제 Back to Top 버튼이 워드프레스 사이트에 추가되었습니다. 사용자가 페이지를 스크롤하다가 맨 위로 올라가고 싶을 때, Back to Top 버튼을 클릭하면 손쉽게 맨 위로 이동할 수 있습니다. 사용자 편의성을 고려하여 해당 기능을 추가해주는 것은 웹사이트나 블로그의 가치를 높일 수 있는 좋은 방법입니다.

Leave a Comment