워드프레스 사이드바 고정 및 사이즈 변경 - 썸네일 대표이미지 숨기기

워드프레스 사이드바 고정 및 사이즈 변경 – 썸네일 대표이미지 숨기기

워드프레스로 웹사이트를 직접 운영하다 보면 테마가 제공하는 기본 옵션만으로는 부족할 때가 많다. 특히 사이드바를 스크롤해도 고정된 상태로 유지하고 싶거나, 사이드바 폭(넓이·높이)을 직접 조절하고 싶은 경우가 대표적이다. 여기에 더해 포스팅 상단에 자동으로 뜨는 썸네일 대표이미지를 숨겨서 레이아웃을 정리하고 싶은 니즈도 자주 생긴다.

이런 작업은 대부분 CSS와 약간의 워드프레스 구조만 이해하면 충분히 직접 수정할 수 있다. 아래에서 사이드바 고정, 사이드바 사이즈 변경, 그리고 썸네일·대표이미지 숨기는 방법까지 순서대로 정리해본다.

워드프레스 사이드바 고정하는 기본 CSS

테마 CSS 수정

먼저 사이드바 고정은 테마의 style.css를 직접 편집하거나, 워드프레스 관리자에서 [테마 → 사용자 정의하기 → 추가 CSS] 메뉴를 이용해 CSS를 추가하는 방식으로 적용할 수 있다.

/* 제너레이트 프레스(GeneratePress) 테마 예시 – 우측 사이드바 고정 */
/* Sticky Sidebar in GeneratePress */

@media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

위 코드는 PC 해상도(769px 이상)에서만 #right-sidebar 영역을 sticky로 만들어 스크롤해도 화면 상단에 고정되도록 만든 예시다. 사용하는 테마에 사이드바 고정 옵션이 있으면 체크만으로 해결할 수 있지만, 무료 버전에서는 이런 기능을 지원하지 않는 경우가 많아 CSS로 직접 처리하는 편이 깔끔하다.

사이드바 너비·레이아웃 간격 조정

사이드바에 위젯, 애드센스 광고, 배너 등을 넣다 보면 기본 폭이 답답하거나 너무 넓게 느껴질 수 있다. 이럴 때는 #sidebar, #container 같은 래퍼 요소의 width와 margin을 조정해 전체 레이아웃 균형을 맞춰주면 된다.

#sidebar {
  width: 250px; /* 원하는 사이드바 크기로 변경하세요 */
}

#container {
  margin-right: 270px; /* 사이드바 너비 + 여유 간격 (예: 20px) */
}

사용하는 테마에 따라 사이드바 ID·클래스 이름이 다를 수 있으니, 브라우저 개발자 도구(F12)로 해당 영역의 선택자를 먼저 확인한 뒤, 위와 같은 방식으로 폭과 여백을 조정하는 게 좋다.

#secondary를 활용한 사이드바 크기·고정 위치 설정

/* 사이드바 크기 설정 */
#secondary {
  width: 300px; /* 원하는 사이드바 크기로 변경하세요 */
}

/* 사이드바 고정 */
#secondary {
  position: fixed;
  top: 50px; /* 고정할 위치를 원하는 값으로 변경하세요 */
}

많은 테마에서 #secondary는 사이드바 영역을 의미한다. width로 사이드바 폭을 조절하고, position: fixed와 top 값으로 스크롤 시 고정 위치를 지정할 수 있다. 필요하다면 right 또는 left 값을 추가해서 화면 어느 쪽에 붙일지도 함께 조정 가능하다.

워드프레스 사이드바 고정 CSS

고정 위치를 더 세밀하게 맞추고 싶다면 top 값을 조정하면서 헤더 높이나 상단 배너 유무에 따라 자연스럽게 어울리는 위치를 찾으면 된다.

WP Sticky Sidebar – Floating Sidebar On Scroll for Any Theme

코드 수정이 부담스럽다면 WP Sticky Sidebar – Floating Sidebar 같은 전용 플러그인을 사용해 별도 CSS 없이도 스크롤 고정 사이드바를 구현할 수 있다. 다만 플러그인이 많아질수록 성능에 부담이 되니, “CSS로 가능한 것은 직접 처리”하는 쪽이 속도 면에서는 유리하다.

티스토리 사이드바 고정해제 사이즈 조절 태그

워드프레스 메인 및 포스팅 썸네일 대표이미지 숨기기

워드프레스 대표 썸네일 이미지 숨기기

사이드바 정리가 끝났다면, 이제 포스팅 상단에 자동으로 뜨는 워드프레스 썸네일 대표이미지를 화면에서 숨기고 싶을 수 있다. 특히 텍스트 중심 글에서는 큰 이미지가 먼저 나오는 것보다, 제목 → 본문 → 중간 삽입 이미지 순으로 자연스럽게 흐르도록 구성하는 편이 가독성에 좋다.

.post-thumbnail {
    display: none;
}

위 CSS를 추가 CSS에 넣으면 .post-thumbnail 클래스를 사용하는 대표이미지가 화면에서 보이지 않게 된다. 다만 이 방법 역시 이미지 파일 자체는 로드되기 때문에 속도 개선 효과는 제한적이라는 점을 기억해야 한다.

대표이미지 자체의 로드를 원천 차단하고 싶다면 functions.php에서 대표이미지 지원을 끄는 방법도 있다.

// 대표 이미지 비활성화 예시
remove_action( 'wp_head', 'rel_canonical' );
remove_action( 'wp_head', 'wp_generator' );

// 대표 이미지가 표시되지 않도록 함
function disable_featured_image() {
    remove_post_type_support( 'post', 'thumbnail' ); // 포스트에서 대표 이미지 비활성화
    remove_post_type_support( 'page', 'thumbnail' ); // 페이지에서 대표 이미지 비활성화
}
add_action( 'init', 'disable_featured_image' );

이 코드를 차일드 테마의 functions.php에 추가하면 포스트·페이지 전체에서 대표이미지 기능 자체가 꺼진다. 편하긴 하지만 모든 콘텐츠에서 대표이미지를 사용할 수 없게 되므로 메인 목록 썸네일이나 SNS 공유용 썸네일이 필요한 사이트라면 CSS + 조건부 코드로 “어디에서만 숨길지”를 세밀하게 조정하는 편이 더 안전하다.

워드프레스 싱글페이지 대표이미지 숨기는방법

결국 워드프레스 사이드바와 썸네일 대표이미지는 레이아웃, 사용성, SEO를 동시에 건드리는 요소다. 사이드바를 적당한 폭으로 고정시키고, 포스팅 상단 대표이미지 노출을 조절해두면 방문자는 콘텐츠에 더 집중할 수 있고 사이트 운영자는 광고 배치, 내부 링크, 속도 최적화까지 한 번에 손볼 수 있다.