워드프레스 사이드바 모바일에서 없애기

워드프레스의 사이드바가 데스크탑 모드에서는 보기가 좋지만 모바일 모드에서는 너무 스크롤을 길게 하는 단점이 있습니다.
이에 워드프레스의 사이드바를 모바일에서는 없애는 방법이 있습니다.

플러그인을 사용해서 모바일에서 보이지 않게 하는 방법이 있습니다만 간단한 부분이기에 플러그인이 아닌 적접 CSS 코드를 삽입해서 없애는 방법을 적어볼까 합니다.

만약 유료테마를 사용하고 계신다면 테마 설정에 모바일에서 사이드바가 보이지 않게 하는 설정이 있을 확률이 높습니다. 테마의 옵션을 먼저 살펴보기 바랍니다.

@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}

위 코드에서 max-width:767px 와 #secondary 는 각 테마마다 설정이 다른 점 꼭 유의하셔야 합니다.

위 코드를 삽입하는 곳은 아래와 같습니다.

영어로 설정된 경우 : Admin Panel > Appearance > Customize > Additional CSS field

한글로 설정된 경우 : 관리자 메뉴 > 테마 디자인 > CSS 편집

위에 언급한 대로 각 테마마다 두가지의 설정값이 다릅니다.

구글에서 사용하는 테마 이름과 모바일 사이드바로 검색을 하면 쉽게 찾으실 수 있습니다.

"OOO theme sidebar mobile" 이라고만 검색을 해도 찾으실 수 있습니다. OOO 만 사용하는 테마명을 넣어주시면 됩니다. 위의 코드와 비슷한 것을 금방 찾으실 겁니다. ^^

BKFactory Blog