워드프레스 사이드바 모바일 숨김 + PC 전용 위젯 노출, 좌/우 추가 sticky 설정
워드프레스 사이드바 숨기기 & 좌/우 추가, 위젯 모바일 숨김 + 스크롤 따라오기 설정
워드프레스는 PC에서 화면 폭이 넉넉할 때 사이드바(위젯)를 잘만 쓰면 카테고리, 인기글, 검색, 공지 같은 요소를 자연스럽게 노출할 수 있습니다. 문제는 모바일입니다.
모바일에서 사이드바가 본문보다 먼저 길게 나오거나, 위/아래로 과하게 늘어지면 본문까지 스크롤을 내려야 하는 구간이 생기고, 이게 체감 이탈로 바로 이어집니다. 특히 앱/웹뷰 환경에서는 “상단에 길게 붙는 위젯”이 더 자주 보입니다.
그래서 오늘은 모바일에서는 사이드바를 숨기고, PC에서는 필요할 때만 보이게 하거나(또는 특정 위젯만 노출), 추가로 좌/우 사이드바를 구성하는 방식까지 한 번에 정리합니다.
참고로 “사이드바에 애드센스 광고를 고정” 같은 표현을 종종 쓰는데, 고정 자체보다 겹침/가림/오해 클릭이 생기지 않게 만드는 게 핵심입니다. 화면을 덮거나 버튼과 겹치면 리스크가 커지니 레이아웃 안전장치부터 잡아두는 쪽이 훨씬 편합니다.
워드프레스 사이드바/위젯 숨김 방법 선택
| 방법 | 추천 상황 | 장점 | 주의할 점 |
|---|---|---|---|
| 플러그인(위젯 조건) | 위젯별로 PC/모바일 노출을 나누고 싶을 때 | 관리 화면에서 끝나서 빠름 | 플러그인 과다 사용은 속도/충돌 체크 필요 |
| CSS 미디어쿼리 | 모바일에서 사이드바 자체를 통째로 숨기고 싶을 때 | 가볍고 안정적 | 선택자(클래스/ID) 확인이 필요 |
| 테마/빌더 템플릿 | 페이지/포스트 템플릿별로 레이아웃을 다르게 쓰는 경우 | 구조 자체를 분리해 가장 깔끔 | 테마 구조(블록테마/클래식)에 따라 방법이 다름 |
WP - Widget Logic 위젯 로직으로 모바일/PC 노출 분리
워드프레스 플러그인에서 Widget Logic을 설치합니다. 이 플러그인은 “위젯마다 조건을 걸어 특정 환경에서만 보이게” 만드는 용도로 여전히 많이 씁니다.
다음 워드프레스 테마디자인 -> 위젯으로 들어가면, 각 위젯 아래에 “Widget Logic” 입력칸이 붙은 것을 볼 수 있습니다.
자주 쓰는 조건식
- wp_is_mobile() : 모바일에서만 표시
- !wp_is_mobile() : PC에서만 표시
예를 들어 “카테고리/인기글”은 PC에서만 두고, 모바일은 본문만 시원하게 보여주고 싶다면 각 위젯에 !wp_is_mobile()만 넣어두면 됩니다. 반대로 모바일에서만 필요한 버튼(예: 상단 고정 공유 버튼)을 별도로 띄울 때는 wp_is_mobile()을 사용하면 되고요.
플러그인 없이 모바일에서 사이드바 통째로 숨기는 CSS
플러그인 설치가 부담스럽거나, “위젯별로가 아니라 사이드바 영역 자체를 모바일에서 안 보이게” 하고 싶으면 CSS가 가장 편합니다.
사이드바 선택자만 정확히 잡는 겁니다. 테마마다 #secondary, #sidebar, .sidebar, .widget-area처럼 이름이 제각각이라서, 개발자도구(F12)로 사이드바 영역을 한 번 찍고 적용하는 게 깔끔합니다.
/* 모바일에서 사이드바 숨김(대표 예시: 선택자는 테마에 맞게 변경) */
@media screen and (max-width: 1024px) {
#sidebar, #secondary, .sidebar, .widget-area {
display: none !important;
}
}이 방법의 장점은 단순합니다. 가볍고 테마가 바뀌지 않는 한 안정적으로 유지됩니다.
좌/우 사이드바 추가 구성(테마 지원 + functions.php)
좌/우 사이드바를 동시에 쓰고 싶다면 “테마가 다중 사이드바를 지원하는지”가 먼저입니다. 지원이 되면 위젯 영역이 기본으로 늘어나고, 지원이 없다면 위젯 영역을 등록해서 템플릿에 출력하는 방식으로 정리합니다. 테마 파일 편집이 가능하다면 아래처럼 위젯 영역 등록부터 넣어둘 수 있습니다.
/* functions.php : 사이드바(위젯 영역) 추가 등록 예시 */
function mytheme_register_sidebars() {
register_sidebar(array(
'name' => 'Right Sidebar',
'id' => 'sidebar-right',
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
));
register_sidebar(array(
'name' => 'Left Sidebar',
'id' => 'sidebar-left',
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
));
}
add_action('widgets_init', 'mytheme_register_sidebars');등록 후에는 테마 템플릿(예: sidebar.php, page.php)에 출력 코드를 배치해야 실제로 보입니다. 테마 구조가 다 달라서 “딱 여기다”라고 못 박기보다는, 이미 쓰고 있는 사이드바 출력 위치를 확인한 뒤 같은 형태로 좌/우를 추가하는 방식이 가장 안전합니다.
스크롤 따라오는 사이드바(Sticky)로 사용성만 올리기
사이드바는 고정해두면 편한데, 고정이 과하면 본문과 겹치거나 하단 위젯이 잘리는 경우가 생깁니다. 그래서 요즘은 position: sticky로 “필요할 때만 따라오게” 잡는 편이 더 무난합니다.
/* PC에서만 사이드바가 자연스럽게 따라오게(선택자는 테마에 맞게) */
@media screen and (min-width: 1060px) {
#sidebar, #secondary, .sidebar, .widget-area {
position: sticky;
top: 80px; /* 상단 고정 헤더가 있으면 여유 있게 */
max-height: calc(100vh - 100px);
overflow-y: auto;
overscroll-behavior: contain;
}
}이 설정은 “사이드바가 따라오면서도”, “길어지면 사이드바 내부에서만 스크롤이 생기는” 조합이라 레이아웃 깨짐이 확 줄어듭니다.
Q. 모바일에서 사이드바만 숨겼는데 본문 폭이 그대로라 빈 공간이 남아요.
A. 테마가 “2컬럼 고정 폭”으로 잡혀 있으면 사이드바를 숨겨도 본문 폭이 자동으로 늘지 않는 경우가 있습니다. 이때는 콘텐츠 래퍼(예: .content-area, #primary)에 모바일 구간에서 width:100% 또는 margin 조정을 같이 넣어주면 빈 공간이 사라집니다.
Q. wp_is_mobile()이 어떤 환경에서는 정확하지 않은 것 같아요.
A. 앱 웹뷰/태블릿/특정 브라우저에서는 모바일 판별이 애매하게 잡힐 때가 있습니다. “모바일이면 무조건 숨김”처럼 강하게 갈 때는 wp_is_mobile()보다 CSS 미디어쿼리가 더 안정적으로 먹는 경우가 많습니다.
Q. 사이드바 sticky 적용했더니 안 먹힙니다.
A. 상위 래퍼에 overflow: hidden/auto가 있으면 sticky가 무시되는 경우가 많습니다. 사이드바 부모 컨테이너의 overflow 설정부터 확인해보면 해결이 빨리 납니다.
Q. 좌/우 사이드바를 만들면 속도가 느려질까요?
A. 사이드바 자체보다 “위젯에 들어가는 요소(최근글 썸네일, 외부 스크립트, 광고 코드)”가 체감 속도를 좌우합니다. 위젯 개수를 줄이고, 이미지/스크립트가 많은 위젯은 모바일에서 숨기는 쪽이 결과가 좋습니다.
Q. 애드센스 위젯을 사이드바에 넣고 따라오게 해도 되나요?
A. 따라오게 만드는 것보다 “겹침/가림/오해 클릭”이 생기지 않게 만드는 게 더 중요합니다. 본문과 충분히 떨어뜨리고, 버튼/메뉴와 겹치지 않게 여백을 확보해두면 불필요한 리스크를 줄일 수 있습니다.
워드프레스 참고포스팅