워드프레스 OceanWP 테마의 사이드바를 모바일 뷰에서 숨기는 방법을 알아 보겠습니다.
사이드바를 모바일에서 숨기는 이유는 여러가지가 있겠습니다만 가장 고려되는 점이 바로 모바일에서의 로딩 속도가 아닐까 합니다.
이 외에도 사이드바에 노출되는 애드센스 광고의 비효율성도 한 가지 이유가 될 수도 있습니다.
워드프레스 관리자로 로그인 한 이후 왼쪽 메뉴 외모 > 추가 CSS로 들어갑니다.
/* Hide your Sidebar on Mobile Globally */
@media (max-width: 767px) {
.widget-area.sidebar-primary { display: none; }
}위와 같은 코드를 추가해 줍니다.
OceanWP 테마의 가로폭 기본 설정을 사용하고 있다면 그대로 복사 붙이기를 하면 됩니다만 만약 본문 콘텐츠의 가로폭을 수정을 하였다면 그에 맞는 max-width를 설정해 줘야 합니다.
마지막으로 꼭 OceanWP 테마의 차일드 테마를 등록한 이후 이 차일드 테마 진행하는 것을 추천 드립니다.
- OceanWP 테마를 위한 차일드 테마 (Child theme) 파일
- 워드프레스 블로그 OceanWP 테마 & WP Fastest Cache 플러그인 전자책
- OceanWP 테마 홈페이지
