워드프레스 사이드바 고정방법 (플러그인 설치 없이 추가CSS로 해결)

티스토리 자체광고 도입 후 폭망하는 분위기라 워드프레스로 새출발 하시는 분들 많으시죠. 데스크톱 화면에서 화면 스크롤 시에 사이드바를 고정하는 방법 말씀드리겠습니다. 번거롭고 속도 저하되는 플러그인 설치는 최소화하고, CSS로 간단히 설정할 수 있습니다.

사이드바 고정이란?

사이드바 고정이 뭘 말하는 것이냐면, 지금 이 티스토리 블로그에 적용한 수익형 SEO 스킨을 보시면, 본문 화면에서 마우스 휠을 돌려서 아래로 스크롤해도 사이드바 부분은 화면 상단에 턱 걸린듯이 그대로 남아있는 것이 보이실겁니다.

이렇게 고정시켜 놓으면 사이드바 부분이 강조되고 광고나 배치해놓은 메뉴에 좀 더 눈길이 가게 유도할 수 있습니다.

참고로 애드센스 규정상 플로팅 형태로 광고를 배치하는 것은 과거에는 정책위반 사항이었으나, 2019년부터는 이 문구가 사라져서 잠정적으로 허용이 되었고 최근에는 아예 자기들이 사이드레일 이라는 고정형 광고를 도입하기도 하였습니다. 즉, 전혀 문제가 되지 않는 부분이니 걱정하지 않으셔도 되겠습니다.

사이드바 고정하는 추가CSS 소스

이 소스는 워드프레스의 제너레이트 프레스 테마에 프리미엄 버전을 기준으로 합니다.

/* GeneratePress 테마 사이드바 고정 */

@media (min-width: 769px) {
	
.site-content {
display: flex;
justify-content: space-around;
align-items: flex-start;
}

#right-sidebar {
position: -webkit-sticky;
position: sticky;
bottom: 0.5rem;
top:65px;
}
	
}

위 소스를 워드프레스 관리자 메뉴 > 외모 > 추가CSS 로 들어가셔서 적당한 위치에 붙여 넣으신 뒤, 정상적으로 동작하는지 확인해보시면 됩니다.

HTML/CSS 기본 이해가 있으신 분이라면 소스만 보고 바로 적용하시거나 필요한 부분을 수정해서 쓰시면 되겠습니다. 이게 무슨 말인지 모르겠고 각 항목이 가지는 의미가 궁금하시면 아래 내용도 참고하시기 바랍니다.

CSS 항목별 의미 설명

/* GeneratePress 테마 사이드바 고정 */

이렇게 하는 것을 주석이라고 하는데요. 실제로 명령어가 동작하지 않는 부분이 되며 사용자가 보기 편하라고 써놓은 코멘트입니다. 나중에 CSS 추가를 많이 하다보면 어떤게 어느 부분 수정한 거였는지 기억이 나질 않아요. 그래서 이렇게 자세하게 써놓으면 추후에 수정할때도 금방 원하는 위치를 찾기가 편리합니다.

@media (min-width: 769px) {

}

본 코드는 미디어 쿼리의 큰 틀 안에서 동작하도록 구성되어 있습니다. 무슨 말이냐면 이렇게 min-width 를 지정하면 화면 너비 최소폭 (여기서는 769px) 이상일 경우에만 동작한다는 뜻이 됩니다.

일반적으로 티스토리에 쓰이는 반응형 스킨들도 이런 원리로 적용이 됩니다. 화면 좌우폭이 얼마 이상이면 사이드바가 보여지게 하고, 화면 폭이 얼마 이하가 될 때부터는 모바일용으로 사이드바가 없이 화면이 좁아지게 하는 것이지요.

.site-content {
display: flex;
justify-content: space-around;
align-items: flex-start;
}

다음으로 site-content 라는 클래스명에 대한 CSS 서식을 지정합니다.

‘display : flex’는 해당 HTML 요소에 대해 flexbox 컨테이너로 만들어줍니다. flexbox의 장점은 요소를 수평이나 수직 축 모두에 따라 쉽게 정렬할 수 있고 여러개의 요소를 가운데 정렬한다던지 균등 간격으로 나누는 데 용이합니다. 또 이러한 유연함으로 반응형디자인을 만들 때 효과적입니다.

‘justify-content: space-around;’ 명령어는 주 축 (justify axis)에 대한 정렬 방식을 정의합니다. space-around 옵션은 각 항목 사이에 균등한 공간을 배치하고 첫번째와 마지막 항목은 양쪽 끝 여백이 절반으로 지정됩니다.

‘align-items: flex-start;’ 이 부분은 flexbox 레이아웃의 교차 축 (cross axis)에 대한 정렬방식을 지정합니다. flex-start로 하면 각 항목을 시작점으로 해서 정렬합니다.

#right-sidebar {
position: -webkit-sticky;
position: sticky;
bottom: 0.5rem;
top:65px;
}

다음으로 right-sidebar 라는 ID를 가진 요소에 대한 CSS 스타일 정의입니다. 

position 부분에 sticky를 사용해서 특정 지점에 도달하면 위치를 고정하는 형태로 정의합니다. -webkit- 접두사는 사파리와 같은 구형 브라우저에서의 호환성을 보장합니다.

bottom은 요소의 하단이 상위 요소의 하단 경계에서 0.5rem 떨어져있도록 설정합니다. rem은 상위 요소 글꼴에 대한 상대적 크기 지정으로, 상위 요소의 폰트 사이즈가 16px 이라면 0.5rem은 8px이 됩니다.

‘top : 65px;’ 라고 지정한 이 부분이 중요한데요. 상단에서 얼만큼 떨어진 위치에 고정시킬 것인가입니다. top:0 이라고 하면 최상단에 붙어서 사이드바가 고정되는데, 이럴 경우 문제가 있습니다. 스크롤을 아래로 내리다가 다시 위로 올리면 상단 메뉴바가 돌출되면서 고정된 사이드바까지 가리는 점입니다.

따라서 돌출되는 상단 메뉴바의 height 폭을 고려해서 일정부분 이격시킨 위치에 사이드바 고정위치를 설정하는 것이 보다 깔끔합니다.

워드프레스 제너레이트프레스 테마에서 스크롤 시 사이드바 상단 고정하는 방법에 대해 알아보았습니다.