WordPress 웹 사이트에 맨 위로 버튼을 추가하는 방법
게시 됨: 2022-09-14WordPress 웹 사이트 에 맨 위로 이동 버튼을 추가하면 사이트의 사용자 경험을 개선할 수 있습니다. 이 버튼을 사용하면 방문자가 스크롤 막대나 브라우저 뒤로 버튼을 사용하지 않고도 페이지 맨 위로 빠르게 스크롤할 수 있습니다. WordPress 사이트에 맨 위로 이동 버튼을 추가할 수 있는 몇 가지 다른 방법이 있습니다. WordPress 플러그인을 사용하거나 직접 코드를 추가할 수 있습니다. 버튼을 직접 추가하려면 WordPress 테마의 functions.php 파일에 다음 코드를 추가해야 합니다. function my_back_to_top_button() { echo '↑'; } add_action( 'wp_footer', 'my_back_to_top_button' ); 이 코드는 WordPress 사이트에 간단한 맨 위로 이동 버튼을 추가합니다. 버튼의 스타일을 지정하려면 테마의 style.css 파일에 다음 CSS를 추가할 수 있습니다. #back-to-top { position: fixed; 하단: 20px; 오른쪽: 20px; 디스플레이: 없음; 텍스트 장식: 없음; 배경: #333; 색상: #fff; 패딩: 10px; -웹킷 테두리 반경: 3px; -moz-border-radius: 3px; 테두리 반경: 3px; } #back-to-top:hover { 배경: #222; } WordPress 플러그인을 사용하여 맨 위로 버튼을 추가하는 경우 플러그인 작성자가 제공한 지침을 따라야 합니다.
콘텐츠가 길면 "맨 위로 돌아가기" 버튼을 포함할 수 있습니다. 페이지 오른쪽에 있는 화살표 버튼을 눌러 맨 위로 스크롤하십시오. 가장 인기 있는 WordPress 테마에는 전면에서 상단으로 버튼이 포함되어 있습니다. WPFront Scroll Top은 WordPress 사이트에 back-to-top 버튼을 추가하는 훌륭한 방법입니다. 플러그인에서 다양한 사용자 정의 옵션에 액세스할 수 있으므로 원하는 모든 작업을 수행할 수 있습니다. 버튼을 자동으로 숨기려면 '자동 숨기기' 버튼을 체크한 후 타이머를 설정하세요. 또한 특정 페이지를 제외하는 데 사용할 수 있으므로 가장 적합한 옵션을 선택하십시오.
플러그인이 없는 워드프레스 맨 위로 돌아가기
크레딧: themekills.com 플러그인을 사용하지 않고 WordPress 사이트에 대한 "맨 위로 돌아가기" 버튼을 만드는 몇 가지 방법이 있습니다. 한 가지 방법은 콘텐츠 내에 페이지 상단을 가리키는 링크를 만드는 것입니다. 예를 들어 각 게시물 끝에 "맨 위로 이동"이라는 링크를 추가할 수 있습니다.
"맨 위로 돌아가기" 버튼을 만드는 또 다른 방법은 약간의 코드를 사용하는 것입니다. WordPress 테마의 functions.php 파일에 다음 코드를 추가할 수 있습니다.
함수 my_back_to_top_button() {
echo '맨 위로 돌아가기';
}
add_action( 'wp_footer', 'my_back_to_top_button' );
이 코드는 사이트 바닥글에 링크를 추가하여 클릭하면 사용자를 페이지 상단으로 다시 안내합니다.
사용자 경험은 웹사이트를 디자인할 때 자주 간과됩니다. 많은 웹사이트에는 맨 위로 돌아갈 수 있는 작은 버튼 이 있습니다. 이 기능의 장점은 사용자가 콘텐츠 페이지를 본 후 페이지 상단으로 빠르게 돌아갈 수 있다는 것입니다. 버튼을 설정하는 것은 간단하지만 그렇게 하려면 테마 파일을 편집해야 합니다. js용 폴더가 없으면 js용 폴더가 없으면 만들 수 있습니다. var speed = top speed 옆에 숫자를 입력하여 버튼 스크롤 속도를 변경할 수 있습니다. 숫자가 높을수록 자동 스크롤이 느려집니다.
사이트에 이미지를 추가하는 것이 마음에 들지 않고 텍스트를 추가하려는 경우에도 추가할 수 있습니다. 스타일을 변경해야 합니다. 테마의 CSS 스타일시트를 연 후 다음 코드가 기존 태그와 코드 사이가 아닌 한 적절하다고 생각되는 모든 위치에 다음 코드를 추가할 수 있습니다. Simple Custom CSS 와 같은 플러그인을 설치한 후 제공된 영역에 직접 코드를 추가할 수 있습니다. 사이트의 맨 위로 이동 페이지에 대한 링크는 페이지에 직접 추가해야 합니다. 원하지 않는 경우 테마 파일 편집을 피할 수도 있습니다. 맨 위로 스크롤을 클릭하면 사이트에 맨 위로 이동 버튼이 추가되어 코딩할 필요가 없습니다. 관리자 대시보드를 사용하면 버튼의 크기, 색상, 위치 및 기타 옵션을 변경할 수 있습니다.
맨 위로 버튼 WordPress Elementor
크레딧: YouTubeWordPress Elementor의 맨 위로 이동 버튼은 페이지 맨 위로 빠르게 이동할 수 있는 좋은 방법입니다. 이 버튼은 사이트 디자인에 맞게 사용자 정의할 수 있으며 페이지의 아무 곳에나 배치할 수 있습니다.
읽을 때 버튼이 페이지 상단으로 다시 눌려지기 때문에 일부 사용자는 그것을 높이 평가합니다. Elementor를 사용하면 맨 위로 돌아가기 버튼을 간단하게 추가할 수 있습니다. 버튼 위젯 (또는 텍스트, 아이콘 또는 이미지와 같은 링크를 추가할 수 있는 옵션이 있는 위젯)을 추가해야 합니다. 웹사이트의 맨 위로 이동 버튼은 간단하지만 유용한 기능입니다. 버튼 위젯이 선택되면 왼쪽 패널의 고급 탭으로 이동하여 위치 지정 옵션을 찾습니다. 버튼을 원하는 곳으로 드래그하여 버튼의 위치를 쉽게 설정할 수 있습니다.
맨 위로 돌아가기 버튼 코드펜
"맨 위로 돌아가기" 버튼은 사용자가 클릭 한 번으로 페이지 맨 위로 스크롤할 수 있는 긴 웹 페이지의 일반적인 기능입니다. 많은 웹사이트는 항상 화면에 표시되는 고정된 "맨 위로" 버튼을 사용하는 반면, 다른 웹사이트는 사용자가 페이지를 아래로 스크롤할 때만 나타나는 부동 "맨 위로" 버튼을 사용합니다.
"맨 위로" 버튼을 코딩하는 방법은 여러 가지가 있지만 가장 간단하고 효과적인 방법 중 하나는 "맨 위로 스크롤" 플러그인을 사용하는 것입니다. 사용할 수 있는 다양한 scroll to top 플러그인이 있지만 가장 인기 있는 것 중 하나는 WPBeginner의 "Scroll to Top" 플러그인입니다.
플러그인을 설치하고 활성화했으면 설정 » 맨 위로 스크롤로 이동하여 플러그인을 구성하십시오. 이 페이지에서 버튼의 위치, 스크롤 속도, 버튼 색상을 선택할 수 있습니다. 또한 전면 페이지, 모든 페이지 또는 특정 페이지에 버튼을 표시하도록 선택할 수 있습니다.
플러그인을 구성했으면 "변경 사항 저장" 버튼을 클릭하여 변경 사항을 저장하십시오. 이제 "맨 위로 돌아가기" 버튼이 웹사이트에 표시되고 완전히 작동합니다.
맨 위로 스크롤 워드프레스 제거
아래 단계는 WordPress 대시보드에서 맨 위로 스크롤 버튼을 비활성화하는 과정을 안내합니다. 맨 위로 스크롤 버튼을 비활성화하려면 모양으로 이동합니다. 맨 위로 스크롤 버튼을 비활성화하려면 확인을 확인 표시로 표시합니다. 게시 버튼을 클릭하여 작업을 게시할 수 있습니다.
WordPress에서 버튼을 어떻게 삭제합니까?
해당 섹션을 삭제하려면 먼저 사이트에서 사용자 지정 프로그램을 실행해야 합니다. 테마 옵션을 선택한 다음 내 사이트 옆에 있는 사용자 지정 버튼 을 클릭합니다. 테마 옵션 -> 홈페이지 템플릿을 클릭하면 템플릿에 액세스할 수 있습니다. 첫 번째 상자의 마지막 문자만 삭제합니다. 삭제해야 하는 유일한 문자입니다.
스크롤을 맨 위 버튼 요소로 되돌리려면 어떻게 합니까?
요소 페이지를 열거나 요소 페이지에 게시한 다음 맨 위로 스크롤 버튼을 클릭하면 맨 위로 돌아갈 수 있습니다. 'Elementor 패널'의 왼쪽에 있는 톱니바퀴 또는 설정 아이콘을 클릭하면 '페이지 설정' 섹션에 액세스할 수 있습니다. 아래로 스크롤하여 'EA Scroll To Top' 옵션을 찾은 다음 켜십시오.
WordPress 스크롤을 어떻게 중지합니까?
내 사이트 > 설정 작성 > 스크롤에서 "무한 스크롤" 옵션을 선택하여 무한 스크롤을 비활성화할 수 있습니다. 또한 바닥글 위젯을 추가하면 무한 스크롤 옵션을 사용할 수 없게 됩니다.
WordPress에서 페이지 상단으로 어떻게 이동합니까?
사용자가 웹사이트에서 페이지를 아래로 스크롤하면 오른쪽 하단 모서리에 "맨 위로 스크롤" 버튼이 나타납니다. 방문자가 페이지를 아래로 스크롤하면 메뉴가 나타납니다. 다시 말해 웹사이트 방문자가 원 클릭 버튼 을 클릭하면 몇 초 만에 페이지 상단으로 돌아갈 수 있습니다.
이전 페이지로 WordPress 뒤로 버튼
링크를 클릭했을 때 페이지 전환이 있는 워드프레스 페이지 를 표시하려면 링크에 'pushing-page'라는 클래스를 추가하세요. 결과적으로 페이지에 URL을 입력하라는 메시지가 표시됩니다. 이 클래스를 사용하면 뒤로 버튼을 그대로 두어 링크에서 버튼 스택을 제거할 수 있습니다. 루트 페이지는 웹사이트의 루트 디렉토리입니다.
페이지에서 뒤로 버튼을 사용할 필요가 없습니다. 사용자는 링크를 열 위치를 선택할 수 있으며 귀하는 링크를 관리할 필요가 없습니다. 내가 지도 페이지를 만들지 않았고, 만든 사람은 간단한 뒤로 브라우저 버튼으로 중단한 곳으로 돌아가는 옵션을 포함할 수 없다고 말했습니다. 지도로 이동할 때 페이지는 완전히 WordPress 내에서 구축되며 WordPress를 통해 사이트로 이동할 때만 표시됩니다. 결과적으로 CLOSE 또는 X 버튼이 있는 팝업으로 페이지를 여는 것은 좋은 아이디어가 될 수 있습니다. Javascript 코드를 통해 생성된 WPBakery Page Builder 버튼 이므로 URL 필드에 입력하겠습니다.