WordPress에서 사용자 정의 스크롤 막대를 만드는 빠른 방법

어떤 이유에서든 귀하의 웹사이트가 눈에 띄기를 원한다고 말하는 것이 안전합니다. 그러한 플랫폼을 갖는 것은 방문자의 마음에 더 오래 머물게 하는 것을 보장할 것이며, 그것은 거의 전적으로 좋은 것입니다. 웹사이트의 콘텐츠 외에도 제품에 대한 관심을 끌 수 있는 또 다른 방법은 시각적인 측면입니다. 이것은 결코 새로운 지식이 아닙니다. 맥도날드가 빨간색과 노란색이고 페이스북이 파란색인 데에는 이유가 있습니다. 그러나 여기에서는 귀하의 웹사이트가 제공하는 경험의 작은 부분에 대해 이야기할 것입니다. 그다지 중요해 보이지 않을 수도 있는 부분이지만 여전히 스크롤바의 가치가 있다고 믿습니다. 다음 몇 줄 에서는 WordPress에서 사용자 지정 스크롤 막대를 만드는 몇 가지 빠른 방법을 배웁니다.

WordPress에서 사용자 정의 스크롤바를 만드는 간단한 방법

사용자 정의 스크롤바를 만드는 것은 웹사이트에 대한 사용자 정의 테마를 만드는 필수 단계입니다. 따라서 웹사이트를 모든 면에서 돋보이게 만드는 데 관심이 있다면 스크롤바를 독특하게 만드는 첫 번째 방법을 소개하겠습니다.

플러그인을 사용하여 WordPress에 사용자 정의 스크롤바 추가

WordPress에서 수행하려는 대부분의 작업과 마찬가지로 매끄러운 스크롤바를 만드는 수단으로 플러그인을 사용하는 것이 좋습니다. 이 방법이 대부분의 사용자에게 적극 권장되는 이유는 간단하기 때문입니다. 몇 번의 간단한 클릭으로 자신의 스타일에 맞는 스크롤바를 보게 될 것입니다. 그러나 이 방법과 함께 제공되는 한 가지 작은 결함을 언급할 가치가 있습니다. 즉, 이 플러그인은 모바일 브라우저를 지원하지 않습니다. 그러나 이것이 큰 손실로 보이지 않는다면 계속 읽으십시오.

우선 Advanced Scrollbar 플러그인을 설치하고 활성화해야 합니다 . 이 작업은 충분히 간단합니다.

1. 플러그인을 방문한 다음 WordPress 관리 영역 내에서 새 페이지 추가로 이동합니다. 검색 창에 해당 플러그인의 이름을 입력하고 Enter 키를 누릅니다.
2. 플러그인을 찾으면 '지금 설치' 버튼을 클릭합니다. 그러면 WordPress가 플러그인을 다운로드하여 설치합니다. 그러면 '지금 설치' 버튼이 '활성화' 버튼으로 변경된 것을 확인할 수 있습니다.
3. 해당 '활성화' 버튼을 클릭하면 모든 준비가 완료됩니다.

이제 필요한 플러그인을 설치하고 활성화했으므로 구성해야 합니다. 그 단어가 위협적으로 들릴지 모르지만 그 과정은 매우 쉽습니다. 설정 > 사용자 정의 색상 스크롤 막대 설정으로 이동하기만 하면 됩니다. 여기에서 스크롤바의 색상과 레일 배경 색상을 변경할 수 있습니다. 그런 다음 마우스 휠의 스크롤 속도인 마우스 스크롤 단계를 선택할 수 있습니다. 이 플러그인의 장점은 스크롤바를 자동으로 숨길지 항상 표시할지 선택할 수 있다는 것입니다.

버튼 없이 스크롤바 레일을 표시하는 '커서만' 옵션을 선택할 수도 있습니다. 그 아래 에서 스크롤 속도를 설정하고, 레일 정렬(왼쪽 또는 오른쪽)을 변경하고, 터치 동작을 활성화하는 옵션을 찾을 수 있습니다.

모든 옵션을 살펴보고 색상을 사용하고 스타일과 선호도에 가장 적합한 조합을 찾은 후 모든 작업을 저장하려면 '변경 사항 저장' 버튼을 클릭하는 것을 잊지 마십시오. 그렇게하면 웹 사이트를 방문하여 멋진 사용자 정의 스크롤 막대 색상이 작동하는 것을 볼 수 있습니다.

CSS를 사용하여 WordPress에 사용자 정의 스크롤 막대 색상 추가

자막에서 추론할 수 있듯이 이 방법은 CSS를 사용하여 스크롤 막대의 스타일을 지정합니다. 이 방법은 jQuery를 사용하는 방법보다 빠르게 입증되었습니다. 그러나 Google Chrome, Safari 및 Opera와 같은 WebKit 렌더링 엔진을 사용하는 데스크톱 브라우저에서만 작동한다는 점을 언급하는 것이 중요합니다. 불행히도 모바일 브라우저나 데스크톱 컴퓨터의 Firefox 및 Edge에는 영향을 미치지 않습니다. 즉, 이것이 당신이 선택하기를 열망하는 옵션이라면 여기에 갈 방법이 있습니다.

테마 > 사용자 정의 페이지로 이동하여 시작합니다. 이 작업은 WordPress 테마 사용자 정의 인터페이스를 시작합니다. 화면 왼쪽에서 다양한 옵션을 사용하여 사이트의 실시간 미리보기를 볼 수 있습니다 . 왼쪽 창에서 추가 CSS 탭을 클릭하여 진행합니다. 탭에는 사용자 정의 CSS를 추가할 수 있는 간단한 상자가 표시됩니다. 유효한 CSS 규칙을 추가하는 즉시 웹사이트의 실시간 미리보기 창에 적용된 것을 볼 수 있습니다. 유효한 CSS 규칙과 관련하여 다음은 스크롤 막대가 변경 사항에 취약하도록 추가해야 하는 사항입니다.

::-웹킷 스크롤바 {

-웹킷 모양: 없음 ;

}

::-웹킷 스크롤바 {

너비 : 10px ;

}

::-webkit-scrollbar-track {

배경: #ffb400 ;

보거 : 1px 솔리드 #ccc ;

}

::-webkit-scrollbar-thumb {

배경: #cc00ff ;

보거 : 1px 솔리드 #eee ;

높이 : 100px ;

테두리 반경: 5px ;

}

::-webkit-scrollbar-thumb:hover {

배경: 파란색 ;

테마 사용자 정의 도구를 사용하여 추가한 사용자 정의 CSS는 해당 특정 테마에서만 사용할 수 있습니다. 테마를 변경했지만 해당 사용자 지정 스크롤 막대를 유지하려는 경우 동일한 방법을 사용하여 해당 CSS 규칙을 복사하여 새 테마에 붙여넣어야 합니다.

이것은 웹사이트를 돋보이게 하는 훌륭한 수단이지만 WordPress에서 사용자 정의 스크롤바를 만드는 것의 한 가지 단점을 언급해야 합니다. 즉, 기본적으로 CSS에는 스크롤바 속성을 변경할 수 있는 규칙 집합이 포함되어 있지 않습니다. 이 옵션을 추가하기 위한 몇 가지 제안이 있지만 현재 대부분의 브라우저에서 지원하지 않습니다. 이 문제를 극복하기 위해 디자이너와 개발자는 브라우저별 의사 요소 또는 JavaScrip을 사용하여 기본 스크롤 막대 모양을 재정의합니다. 그것들은 우리가 당신에게 설명한 기술입니다. 그러나 모든 브라우저에서 상상한 대로 작동하는지 확인하려면 다양한 브라우저와 장치로 사이트를 테스트해야 한다는 점을 명심해야 합니다. 일단 다루면 WordPress에서 사용자 정의 스크롤 막대를 만드는 방법을 알고 있다고 말하는 것이 안전합니다.