개발자 가이드 JQuery를 사용하여 WordPress의 상단 효과에 부드러운 스크롤 추가
게시 됨: 2022-06-03우리 모두는 매끄럽고 효율적인 콘텐츠 관리 시스템을 사용할 때 작업이 훨씬 쉬워진다는 점에서 WordPress를 좋아합니다.
과장이 아니지만 쉽고 접근하기 쉬운 웹 개발은 새로운 웹마스터에게 축복입니다. WordPress에는 다양한 웹사이트 소유자가 사용자에게 매우 부드럽고 대화형 인터페이스를 제공할 수 있는 수십 가지 기능이 있습니다.
WordPress를 처음 사용하는 사람들은 블로그 시작 및 관리 방법에 대한 단계별 가이드가 있는 Blog Starter와 같은 리소스에서 WordPress 자습서를 확인할 수 있습니다.
웹사이트의 콘텐츠에만 집중하고 있다면 반응형이며 시각적으로 매력적인 웹사이트가 콘텐츠 못지않게 중요하다는 것을 알려드리고 싶습니다.
기존 웹사이트가 있고 어디서부터 시작해야 할지 모르겠다면 시간을 내어 매일 30분을 투자하여 웹사이트의 모양과 인터페이스에 대해 생각하십시오. 점차적으로 수정해야 할 요소를 찾을 수 있으므로 저희를 믿으십시오. 훌륭한 시각적 노력으로 웹사이트를 강화하면 대화율이 높아집니다.
그리고 웹사이트에 대한 원활한 방문 경험을 사용자에게 제공하는 데 이미 투자한 사람이라면 감사합니다! 글쎄, 우리는 웹 사이트에 초조한 변경을 제공하고 웹 사이트의 전반적인 시각적 성능을 향상시키려는 모든 사람을 위한 훌륭한 자습서를 준비했습니다.
이 블로그 게시물에서는 jQuery를 사용하여 WordPress의 상단 효과에 Smooth Scroll을 추가하는 방법을 안내합니다.
부드러운 스크롤을 사용하는 이유는 무엇입니까?
일반적으로 웹 사이트에 긴 기사가 있고 사용자가 이를 살펴보고 있을 때 웹 페이지 끝에 도달하는 것이 답답할 수 있습니다.
따라서 웹사이트에서 클릭 한 번으로 맨 위로 스크롤할 수 있다면 독자는 웹사이트가 매끄럽고 매우 매끄럽다는 것을 알게 될 것입니다.
따라서 웹사이트 소유자 또는 디지털 마케터라면 기회주의자가 되어야 하며 웹사이트에 유기적인 추가 잠재고객을 유치하는 데 필요한 모든 조치를 취해야 합니다.
WordPress에서 부드러운 스크롤을 상단 효과에 추가하는 방법
WordPress의 To Effect에 부드러운 스크롤을 추가하려면 아래의 가장 다양한 방법을 사용할 수 있습니다.
1. jQuery로 작성된 일부 코드 사용
2. 플러그인 사용하기
우리는 일반적으로 플러그인보다 코딩을 선호합니다. 올바른 방법으로 수행하면 딸꾹질을 할 여지가 없기 때문입니다. 플러그인은 때때로 웹사이트의 로딩 속도를 감소시킬 수 있지만 코딩은 처음부터 속도에 영향을 주지 않고 일부 사용자 정의를 추가하는 데 도움이 될 수 있습니다. 특히 이 튜토리얼에서는 코딩 과정을 설명합니다.
코딩을 사용하여 WordPress에서 부드러운 스크롤을 상단 효과에 추가하는 방법은 무엇입니까?
코딩을 사용하여 WordPress 웹 사이트에 부드러운 스크롤을 상단 효과로 추가하려면 다음 4단계를 따라야 합니다.
- "Smoothscrolleffect.js" 파일을 만듭니다.
- 테마에 "Smoothscrolleffect.js" 기능을 첨부합니다.
- 테마에 아이콘 추가
- 효과를 웹페이지와 연결
이 4단계를 완료하면 더 많은 독자를 확보할 수 있습니다. 프로그래머라면 요구 사항에 따라 고유한 스크립트를 만들 수 있습니다.
비 프로그래머를 위해 각 단계를 자세히 설명하고 필요한 코드를 추가했습니다. 따라서 단계를 읽고 그에 따라 실행하기만 하면 됩니다.
1단계: "Smoothscrolleffect.js" 파일 생성
이것은 이 단계에서 생성할 가장 중요한 파일입니다. 이 단계를 효과적으로 구현하지 못하면 부드러운 스크롤을 완전히 얻지 못할 수 있습니다.
이 단계에서는 Top 효과에 부드러운 스크롤을 추가하는 함수가 포함된 ".js"(jQuery) 파일을 만듭니다. 단계에 따라 ".js" 파일을 만들고 웹사이트 디렉토리에 업로드합니다.
- 시스템에 새 메모장 파일을 만듭니다.
- 다음 코드를 복사합니다.
jQuery(문서).ready(함수($){
$(창).scroll(함수(){
if ($(this).scrollTop() < 200) {
$('#smoothup') .fadeOut();
} 또 다른 {
$('#smoothup') .fadeIn();
}
});
$('#smoothup').on('클릭', function(){
$('html, body').animate({scrollTop:0}, '빠른');
거짓을 반환합니다.
});
});
- 메모장 파일에 코드를 붙여넣습니다.
- 임의의 이름으로 저장하되 확장자가 ".js"인지 확인하십시오.
- 웹사이트의 cPanel에 로그인합니다.
- 웹사이트의 디렉토리 "/js/"로 이동합니다.
참고: 웹사이트에 js 디렉토리가 없으면 하나 만들어야 합니다.
- 시스템에서 생성한 ".js" 파일을 디렉토리에 업로드합니다.
2단계: 부드러운 스크롤을 테마에 연결
위 단계에서 웹사이트 디렉토리에 파일(부드러운 스크롤 기능 포함)을 생성했으며 이 단계에서는 부드러운 스크롤 기능을 테마에 연결합니다. 이렇게 하려면 다음 단계를 따르세요.
WordPress 관리 대시보드에서 테마 편집기로 이동합니다. 편집을 위해 function.php를 엽니다. 그리고 그 안에 다음 코드를 붙여넣습니다.
wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), ”, true );
"변경 사항 저장"을 누르십시오.
3단계. 테마에 아이콘 추가
분명히 독자가 맨 위로 스크롤하도록 제안할 수 있는 아이콘을 웹사이트에 추가하려고 합니다. 그 외에도 더 인터랙티브하고 반응적으로 만들어야 합니다. 다음과 같이 CSS를 사용하여 완료할 수 있습니다.
- 테마 편집기에서 테마의 stylesheet.css로 이동합니다.
- 다음 코드를 복사합니다.
#스무딩 {
높이: 40px;
너비: 40px;
위치: 고정;
하단:50px;
오른쪽:100px;
텍스트 들여쓰기:-9999px;
디스플레이: 없음;
배경:url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");
-웹킷-전환-시간: 0.4초;
-moz-전환-시간: 0.4초; 전환 지속 시간: 0.4초;
}
#smoothup:호버 {
-webkit-transform: 회전(360deg) }
배경: url(") 반복 없음;
}
- 테마의 스타일시트에 붙여넣습니다.
- "변경 사항 저장"을 누르십시오.
여기에서 요구 사항에 따라 아이콘을 변경할 수 있습니다. 우리는 참조를 사용했습니다. 이미지를 변경하려면 웹사이트에 업로드하고 위 코드의 Background: URL 필드에 붙여넣을 수 있습니다.
4단계: 부드러운 스크롤을 웹페이지와 연결합니다.
이제 ".js" 파일을 만들어 웹사이트 디렉토리에 업로드하고 테마와 함께 첨부하고 효과에 대한 아이콘을 만들었습니다. 이제 마지막 단계입니다. 이제 웹 사이트의 모든 웹 페이지에 부드러운 스크롤 효과를 연결합니다. 다음 단계를 따르세요.
- 테마 편집기에서 footer.php를 엽니다.
- 다음 코드를 복사합니다.
- <a href="#top" id="smoothup" title="맨 위로 돌아가기"></a>
- footer.php 페이지에 붙여넣습니다.
- "변경 사항 저장"을 누르십시오.
축하합니다! jQuery를 사용하여 WordPress 웹 사이트에 부드러운 스크롤 상단 효과를 성공적으로 추가했습니다.
결론
위의 튜토리얼이 JQuery를 사용하여 WordPress에 '맨 위로 부드럽게 스크롤' 효과를 추가하고 사용자에게 훌륭한 웹사이트 탐색 경험을 제공하는 데 효과적으로 도움이 되기를 바랍니다.
위에서 언급한 단계를 구현하는 데 문제가 발생하면 아래에 의견을 남겨 알려주십시오.
