WordPress에서 Back-to-Top 버튼을 만드는 방법(2가지 방법)
게시 됨: 2022-11-08일부 연구(Backlinko의 첫 페이지 순위 및 Medium의 독자 참여 유지)에 따르면 긴 형식의 콘텐츠가 SEO에 더 매력적이며 더 나은 것으로 입증되었습니다. 또한 긴 형식의 콘텐츠는 단어 수와 백링크 사이에 양의 상관관계가 있기 때문에 더 자세한 정보를 전달할 수 있는 더 많은 기회와 더 많은 백링크를 얻을 수 있는 더 많은 기회를 제공합니다. 그러나 사용자 경험(UX)은 독자를 사이트에 머물게 하는 가장 중요한 측면 중 하나이기 때문에 무시해서는 안 됩니다.
사이트에 긴 형식의 콘텐츠 게시물이 있는 경우 웹사이트 게시물에 맨 위로 이동 버튼을 추가하는 것이 좋습니다. 긴 콘텐츠를 읽은 독자가 맨 위로 돌아가도록 도와주기 때문입니다. 페이지로 이동하여 탐색 메뉴를 보고 새 목적지를 선택하십시오.
Divi와 같은 테마에는 테마 옵션 에서 활성화할 준비가 된 백투톱 버튼이 내장되어 있습니다. 또는 Elementor와 같은 테마 빌더를 사용하는 경우 다음과 같은 간단한 단계를 통해 웹사이트에 테마 빌더를 쉽게 추가할 수 있습니다. 그러나 기본 WordPress 편집기를 사용하는 경우 이 자습서에서 WordPress 웹 사이트에 대한 맨 위로 이동 버튼을 추가하는 방법을 보여주므로 걱정할 필요가 없습니다.
WordPress에 Back-to-Top 버튼 추가
이제 웹사이트에 Back-to-Top 버튼을 추가할 때의 이점을 알게 되었으며, 이 튜토리얼에서 두 가지 방법을 보여드릴 것입니다.
- 테마 파일에 수동으로 사용자 정의 코드 추가
- 워드프레스 플러그인 사용하기
수동으로 Back-to-top 버튼 추가(플러그인 없이)
보안상의 이유로 플러그인을 사용하고 싶지 않거나 사이트에 더 많은 부담을 주고 싶지 않다면 이 방법이 적합합니다. 테마를 업데이트할 때 테마의 functions.php 파일에 코드를 추가하고 테마 js 폴더에 JavaScript 파일.
1단계: WordPress 테마 디렉토리에 액세스
준비가 되면 먼저 FTP(File Transfer Protocol) 또는 호스팅 파일 관리자를 통해 WordPress 웹사이트의 파일에 액세스해야 합니다. 그런 다음 wp-content → 테마 → 테마(맨 위로 이동 버튼을 추가하려는 테마) → js 폴더로 이동합니다. 테마에 js 폴더가 없으면 수동으로 폴더를 만들고 해당 폴더를 열 수 있습니다. 다음은 호스팅 파일 관리자의 모습입니다.
2단계: JS 파일 만들기
js 폴더 안에 들어가면 이름이 topbutton.js 인 자바스크립트 파일을 만듭니다. 계속해서 파일을 열고 다음 JQuery 코드를 거기에 붙여넣습니다.
jQuery(문서).ready(함수($){
변수 오프셋 = 100;
var 속도 = 250;
변수 지속 시간 = 500;
$(창).scroll(함수(){
if ($(this).scrollTop() < 오프셋) {
$('.topbutton') .fadeOut(지속 시간);
} 또 다른 {
$('.topbutton') .fadeIn(지속 시간);
}
});
$('.topbutton').on('클릭', function(){
$('html, body').animate({scrollTop:0}, 속도);
거짓을 반환합니다.
});
});위의 코드는 페이지가 스크롤될 때 버튼에 페이드 인 및 페이드 아웃 애니메이션을 추가하고 페이지에서 맨 위로 이동 버튼을 클릭할 때 스크롤업 애니메이션을 추가합니다.
3단계: 버튼 준비
다음 단계는 버튼 이미지 파일 자체를 준비하는 것입니다. 아이콘을 처음부터 만들거나 fontawesome.com 또는 flaticon.com과 같은 사이트에서 다운로드할 수 있습니다. 그런 다음 이미지 크기가 너무 크지 않은지 확인합니다(50px 크기의 화살표 이미지 사용). 아이콘이 준비되면 WordPress 미디어 라이브러리를 통해 이미지 파일을 업로드한 다음 나중에 CSS 스니펫의 URL을 복사합니다.
4단계: JS 파일을 대기열에 추가
이미지가 준비되면 WordPress 관리 대시보드에서 모양 → 테마 파일 편집기 로 이동하여 테마 편집기 페이지를 열어 테마 파일 에서 functions.php 를 열어 이전에 만든 JavaScript를 사용하고 싶다고 WordPress에 알립니다. , 다음 코드를 파일 맨 아래에 붙여넣습니다.
함수 my_scripts_method() {
wp_enqueue_script(
'맞춤 스크립트',
get_stylesheet_directory_uri() . '/js/topbutton.js',
배열( '제이쿼리' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );코드를 배치했으면 파일 업데이트 버튼을 클릭하여 파일을 저장합니다.
5단계: CSS 조각 추가
계속해서 WordPress 관리 대시보드에서 Appearance → Customize 에 있는 테마 사용자 정의 도구로 이동한 다음 다음 CSS 스니펫을 추가 CSS 블록에 붙여넣습니다. 이미지 URL에 따라 뒤로 가기 버튼의 예시 URL(" http://yourimageurl.com/backtotop.png ")을 변경합니다.
.톱버튼 {
높이:50px;
너비: 50픽셀;
위치: 고정;
오른쪽:5px;
하단:5px;
Z-인덱스:1;
background-image:url("https://yourimageurl.com/backtotop.png");
배경 반복:반복 없음;
디스플레이:없음;
}위의 CSS 스니펫은 준비한 버튼 이미지를 배경으로 추가하고 버튼의 너비와 위치를 조정합니다. CSS 스니펫을 편집기 하단에 배치할 수 있으며 스니펫이 준비되면 게시 버튼을 클릭하여 변경 사항을 저장합니다.
6단계: 바닥글 영역에 버튼을 표시하기
마지막 단계는 버튼이 웹사이트 하단에 나타나도록 하는 것입니다. 이 영역은 일반적으로 모든 웹 페이지 하단과 주요 콘텐츠 뒤에 나타나므로 바닥글 영역을 선택하겠습니다. 그렇게 하려면 테마 편집기 페이지로 돌아가서 테마 파일에서 footer.php 파일을 열어 다음 HTML 스니펫을 추가하십시오.
<a href="#" class="topbutton"></a>
그게 다야, 당신의 버튼 back-to-top은 지금쯤 준비되어 있어야 합니다. 바닥글 영역이 있는 페이지를 연 다음 약간 또는 완전히 아래로 스크롤하면 하단 모서리에 클릭할 준비가 된 버튼이 표시됩니다.
WordPress 플러그인을 사용하여 맨 위로 이동 버튼 추가
WordPress 플러그인을 사용하여 사이트에 일부 기능을 추가하거나 사이트에서 경험한 일부 문제를 해결하는 것은 시도할 수 있는 가장 빠르고 쉬운 방법 중 하나입니다. back-to-top 버튼을 추가하기 위해 WPFront Scroll Top 플러그인을 선택합니다.
WPFront Scroll Top 플러그인을 사용하면 사용자가 페이지를 아래로 스크롤할 때만 버튼을 표시하고 여기에 애니메이션 효과를 추가하는 것과 같은 추가 기능으로 방문자가 페이지 상단으로 쉽게 다시 스크롤할 수 있는 버튼을 추가할 수 있습니다. 그리고 wordpress.org에서 무료로 플러그인을 받을 수 있습니다. 플러그인 설치 및 활성화부터 시작하겠습니다!
플러그인이 설치되고 활성화되면 WordPress 관리 대시보드에서 설정 → 맨 위로 스크롤 로 이동한 다음 사용 옵션을 선택하여 웹사이트의 전체 페이지에 맨 위로 이동 버튼을 추가합니다.
버튼 크기 변경, 일정 시간 경과 후 버튼 자동 숨기기, 버튼 위치 변경, 일부 페이지에만 표시되도록 버튼 설정 또는 버튼은 일부 페이지 및 더 많은 페이지에 표시되지 않습니다.
설정을 결정하고 변경 사항 저장 버튼을 클릭하여 변경 사항을 적용하면 버튼을 사용할 준비가 됩니다.
결론
긴 형식의 콘텐츠는 단어 수와 백링크 사이에 양의 상관관계가 있기 때문에 더 자세한 정보를 전달할 수 있는 더 많은 기회와 더 많은 백링크를 얻을 수 있는 더 많은 기회를 제공합니다. 그러나 사용자 경험(UX)은 독자를 사이트에 머물게 하는 가장 중요한 측면 중 하나이기 때문에 무시해서는 안 됩니다. 이 기사에서는 사용자가 탐색 메뉴를 보기 위해 긴 독서의 맨 아래에 도달한 후 페이지 맨 위로 돌아갈 수 있도록 페이지에 Back-to-Top 버튼을 추가하여 사이트에 대한 UX 최적화 중 하나를 보여주었습니다. 그리고 새로운 목적지를 선택합니다.