워드프레스 사이드바 고정하는 방법 (feat. 제너레이트프레스 테마)

오늘은 워드프레스 사이드바 고정하는 방법에 대해서 알아보겠습니다.

아마 한번은 구글에서 검색한 사이트 글을 읽기 위해서 스크롤을 내렸을 때 옆에 사이드바도 그대로 고정되어 따라내려오는 것을 본적이 있을텐데요.

사이드바를 고정시켜 놓으면 글을 다 읽은 방문자에게 다른 글을 읽도록 네비게이션 역할을 할 수도 있고, 추후에 애드센스 또는 제휴 광고 노출에도 효과적일 수 있습니다.

먼저 워드프레스 사이드바를 고정했을 때 어떻게 보이는지 결과물을 보겠습니다.

사이드바를 고정한 결과 글을 읽기 위해서 스크롤을 한참 내렸지만 사이드바에 있는 최신글이 계속해서 따라내려오는 것을 확인할 수 있습니다.

위 결과물 처럼 사이드바를 고정시키고 싶은 분들은 따라서 적용해보시기 바랍니다. 매우 쉽습니다. 또한 CSS 추가를 통한 사이드바 디자인하는 방법도 추가하였으니 궁금하신 분들은 끝까지 읽어보시기 바랍니다.

시작하기 전에…

현재 이 사이트는 제너레이트프레스 유료 테마를 사용하고 있습니다. 그러나 오늘은 CSS만 추가하면 되기 때문에 무료 버전을 사용하시는 분들도 적용할 수 있습니다.

  • 제너레이트프레스 무료 또는 유료 버전 둘다 가능

만약 제너레이트프레스 유료 버전 설치 방법이 궁금하다면 아래 글을 참고하시기 바랍니다.

✅ 제너레이트프레스 (GeneratePress) 유료 테마 결제 및 설치 테마 적용 방법

그럼 워드프레스 사이드바 고정하는 방법에 대해서 알아보도록 하겠습니다.

워드프레스 사이드바 고정하는 방법

워드프레스에서 사이드바를 고정시키는 방법은 매우 간단합니다.

제너레이트프레스 무료 버전은 외모 > 추가 CSS 에 들어가서 아래 코드를 복사해서 붙여넣기만 하면 됩니다.

@media(min-width: 1024px) {
    .site-content {
        display: flex;
    }

    .inside-right-sidebar {
        height: 100%;
    }

    .inside-right-sidebar .widget:last-of-type {
        position: sticky;
        position: -webkit-sticky;
        top: 60px;
    }
}

제너레이트프레스 유료 버전은 무료 버전과 동일한 방법으로 할 수 있습니다. 하지만 유료 버전을 사용하시는 분은 차일드 테마 style.css 파일에 CSS 코드를 추가하는 방법을 추천드립니다.

차일드 테마를 사용해야 하는 이유에 대해서는 아래 글에서 설명드렸습니다. 차일드 테마가 무엇인지 어떻게 설치하는지 궁금하신 분들은 읽어보시기 바랍니다.

✅ 제너레이트프레스 차일드 테마 초간단 설치 방법

사이드바 위치를 조정하고 싶으신 분들은 CSS 코드 맨 아래에 있는 top: 60px; 에서 픽셀 크기를 조정해보세요. 픽셀 크기를 늘리면 위쪽 여백이 증가하면서 사이드바 위치가 증가한 여백 만큼 아래로 위치하게 됩니다.

워드프레스 사이드바 고정이 다 끝났습니다. 너무 쉽지 않나요?

그런데 사이드바 디자인이 너무 투박하게 보이는 것 같습니다. 사이드바 디자인을 썸네일에서 보았던 것 처럼 수정하고 싶으신 분들은 끝까지 계속해서 읽어보시기 바랍니다.

워드프레스 사이드바 디자인

워드프레스 사이드바 디자인도 약간의 CSS 코드를 추가하여 수정할 수 있습니다.

하지만 그 전에 여러분 사이트 사이드바에 있는 aside id 를 알아내야 합니다. 그렇게 어렵지 않으니 아래 내용을 천천히 따라해보시기 바랍니다.

1) 본인 사이트에서 사이드바 aside id 를 확인합니다.

크롬에서 F12 버튼을 누르면 우측에 개발자 창이 하나 뜹니다. 좌측 상단에 보면 작은 화살표가 있는데, 한번 클릭한 상태에서 본인 사이트에 있는 사이드바에 마우스를 위치시키고 클릭합니다.

그러면 우측에 음영으로 표시된 부분에서 aside id를 확인할 수 있습니다. 제 사이트의 사이드바 aside id = “block-21” 이네요. aside id를 확인하신 분은 다음 단계로 넘어갑니다.

2) 아래 외모 > 추가 CSS 메뉴에서 아래 CSS 코드를 복사 붙여넣기 합니다.

#block-21{
	border: 3px solid #F0F0F0;
	background: #F9F9F9;
	padding: 20px 15px;
}

#block-21 h2{
	margin: 0em 0em 1em 0em;
	background: #F0F0F0;
	border: 2px solid #F0F0F0;
	border-radius: 7px 7px;
	color: #242226;
	font-weight: bold;
	font-size:22px;
	text-align:center;
}

위에 CSS에서 조금 전에 확인한 aside id #block-21를 본인 사이트에서 확인한 aside id로 변경해주세요. 그리고 나서 복사 붙여넣기 하면 끝이 납니다.

물론 아래 CSS 값을 변경해서 사이드바 테두리, 배경색, 여백, 그리고 사이드바 타이틀을 본인 취향에 맞게 수정도 가능합니다.

  • border : 테두리
  • background : 배경색
  • padding : 테두리 안쪽 여백
  • margin : 테두리 바깥 여백
  • border-radius : 모서리 둥글게
  • color : 글자 색깔
  • font-weight : 글자 두께
  • font-size : 글자 크기
  • text-align : 글자 정렬

색깔 코드는 전에도 소개해드렸던 아래 사이트에서 확인 가능합니다.

https://www.hexcolortool.com/

그리고 사이드바의 기본적인 넓이와 여백은 외모 > 사용자 정의하기 > Layout > Sidebars 메뉴에서 설정할 수 있습니다.

해당 메뉴는 제너레이트프레스 무료 버전에서도 동일하게 사용 가능했던 것으로 기억합니다. 혹시 제가 기억하는 내용과 틀리다면 댓글로 알려주시면 감사하겠습니다.

글 마치며…

오늘은 워드프레스 사이드바 고정하는 방법과 CSS를 통해서 디자인하는 방법에 대해서 알아봤습니다. 워드프레스를 독학으로 배우면서 적용하다 보니 아직은 매일 글을 쓰기가 쉽지는 않네요.

그러나 조금씩 사이트의 형태를 갖춰나가는 모습을 보니 사이트에 대한 애정이 생기는 것 같습니다. 앞으로도 워드프레스 관련해서 여러분들의 시간을 절약하는데 조금이나마 도움이 되는 글을 작성하도록 하겠습니다. 오늘 글도 누군가에게 도움이 되길 바라며 마치겠습니다.

1 thought on “워드프레스 사이드바 고정하는 방법 (feat. 제너레이트프레스 테마)”

답글 남기기