워드프레스 스크롤 사이드바 고정 하는 방법 입니다. 이 방법을 사용 시 광고를 넣으면 스크롤을 내리며 글을 읽어도 사이드바의 광고가 따라오게 만들 수 있으며 그렇게 하기 위해 사용하는 방법입니다.
아직 광고는 달지 않았지만 제너레이트 프레스 테마에서 상단에 사이드바를 고정 되어 따라오게 하는 방법을 알아보겠습니다.
워드프레스 스크롤 사이드바 고정
저는 제너레이트프레스 테마를 사용중이고 다른 테마에서도 같은지는 모르겠지만 외모에 추가css 에 들어가서 아래의 코드를 넣어주면됩니다.
top:10px은 본인의 사이드바에서 고정이 될 부분의 상단영역만큼 설정하시면 됩니다.
- top:10px; 스크롤링 할때 사이드바 고정 지점 입니다. 본인의 사이드바에 맞춥니다.
- position:sticky; 스크롤링을 할때 사이드바가 특정지점에 도달하면 고정됩니다.
- position:-webkit-sticky; webkit은 크롬, 사파리 에서만 지원됩니다.
.inside-right-sidebar{top:10px; position: sticky; position: -webkit-sticky;}사이드바 클래스 이름 찾는 방법
제가 사용중인 테마에서 사이드바의 클래스 이름은 .inside-right-sidebar 입니다. 다른테마를 쓰면 다른 이름이 나올것 같은데 제가 클래스 이름을 찾은 방법은 테마파일 편집기에서 사이드바에서 찾았습니다.
위의 사이드바 고정 코드에서 클래스이름을 본인의 사이드바 클래스 이름으로 바꿔주면 적용이 됩니다.
워드프레스 블로그 스크롤시 사이드바를 고정 방법을 알아보았습니다. 블로그의 클래스 이름을 찾아서 적용만 해주면 되는 간단한 작업입니다.
스크롤시 사이드바가 같이 올라가 버리면 나중에 광고를 달았을때 광고도 같이올라가 보이지 않게 되니 광고를 달때 스크롤 고정도 함께 수정하는것을 추천드립니다.
테마 파일 편집기가 보이지 않을경우 아래의 포스팅을 참고해주세요
워드프레스에서 테마 파일 편집기 꺼내는 방법