워드프레스 사이드바 고정 썸네일 제거 CSS 설정

워드프레스 사이드바 고정 및 썸네일 제거 CSS 설정

로

워드프레스나 티스토리 등 CMS 웹사이트를 관리하면서 사이드바를 마우스 횡스크롤을 내리더라도 사이드는 페이지이동과 달리 티스토리 및 워드프레스 사이드바 고정을 하기 위해서는 고정을 지원하는 테마를 사용하느방법이 있으며 대표이미지가 포스팅 상단 및 전면페이지에 표시되는 경우 TTFB (초반 로딩속도)가 저하되기 때문에 필요에 따라 제거할 수 있습니다.

하지만 대부분 유료테마인 아바다 (Avada)와 같은 테마에서만 지원하며 무료테마를 사용하는 경우에는 지원하지 않는 기능이 많고 현재 사용하고 있으며 Generatepress 테마 또한 무료버전에서는 지원하지 않고 유료버전인 GP 플러그인을 사용해야 합니다.

참고 : 워드프레스 위젯 사이드바 모바일 숨기기 및 순서변경

워드프레스 아바다 테마 사이드바 고정방법
노랗 목차 보이기

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

워드프레스 사이드바 고정 및 썸네일 제거 CSS 설정 2

그렇다면 쉽게 워드프레스 사이드바 고정을 하는 방법으로는 워드프레스 테마설정에서 CSS 수정에서 아래와 같이 입력하면됩니다.

.sidebar {
position: fixed;
top: 50px; /* 필요에 따라 조정/
right: 0; 
width: 300px; / 필요에 따라 조정 */
}

설명에따라 style.css 시트를 수정해도 되며 고정 및 위치값을 각각 필요에 따라 조정합니다.

사이드가를 오른쪽이 아닌 좌측으로 고정하고 싶다면 아래와 같이 입력합니다.

.sidebar {
position: fixed;
top: 50px; /* 필요에 따라 조정 /
left: 0; 
width: 300px; / 필요에 따라 조정 */
}

워드프레스 전면 포스팅 썸네일 사진제거

워드프레스 사이드바 고정 및 썸네일 제거 CSS 설정 1

추가로 워드프레스 속도를 개선하기 위해서는 포스팅 상단에 표시되는 썸네일 대표이미지를 제거하느것이 좋으며 이때에 아래와 같이 추가로 CSS 입력합니다.

.page-header-image-single {
display: none;
}

홈페이지 메인 첫화면에서의 썸네일 (대표이미지) 도 제거하고 싶다면 아래 태그를 추가로 입력합니다.

/* 전면 페이지에서 썸네일 제거하기 / / 
Remove featured images from the front page in GeneratePress */

.home .post-image {
display: none;
}

그런데 홈페이지 메인 화면에서 대표이미지(썸네일)를 제거하고 싶을 때 위와 같은 코드를 추가하면 겉보기에는 이미지가 사라진 것처럼 보이지만, 실제로는 해당 이미지 파일이 HTML 구조 안에는 여전히 존재하고 있기 때문에 브라우저는 이를 불러오기 위해 요청을 보냅니다.

이렇게 하면 사용자의 눈에는 이미지가 보이지 않지만, 이미지 자체가 로드되는 과정을 생략하는 것은 아니기 때문에 TTFB(Time To First Byte)나 SEO 관점에서의 속도 개선에는 큰 효과를 기대하기 어렵습니다. 오히려 불필요한 이미지가 계속 포함되어 있으면 구조적으로는 무거운 페이지가 되고, 이미지 alt 태그나 크기 최적화가 미흡할 경우 검색엔진에도 좋지 않은 영향을 줄 수 있습니다.

add_action('generate_before_content', function() {
  if ( is_front_page() ) {
    remove_action( 'generate_post_image', 'generate_post_image' );
  }
}, 9);

실제 속도 향상과 SEO 최적화를 고려한다면 CSS로 숨기기보다는 아예 HTML에서 해당 썸네일 자체를 출력하지 않도록 처리하는 것이 더 효과적인데요 예를 들어, GeneratePress 테마를 사용하고 있다면 functions.php 파일에 아래와 같은 코드를 추가해 대표이미지 출력 자체를 막을 수 있습니다.

add_action('generate_before_content', function() {
  if ( is_front_page() ) {
    remove_action( 'generate_post_image', 'generate_post_image' );
  }
}, 9);

이렇게 하면 브라우저가 이미지를 요청하지 않기 때문에 로딩 시간도 줄고, TTFB에도 간접적으로 긍정적인 영향을 줄 수 있습니다. 또 메인 페이지에서 이미지가 차지하는 영역이 제거되므로 시각적으로도 더욱 깔끔한 구성을 만들 수 있습니다.

참고 : 티스토리 사이드바 마우스 스크롤 시 고정방법

FAQ

워드프레스에서 썸네일을 완전히 제거하면 이미지 SEO에는 불이익이 있지 않나요?

썸네일은 이미지 검색 유입이나 시각적 클릭 유도에 도움을 줄 수 있기 때문에 완전히 제거하면 해당 포스팅의 노출 기회가 줄어들 수 있습니다. 그러나 전면 페이지에서는 속도 개선과 UX 차원에서 제거하고, 실제 포스트 내부에는 이미지를 활용하는 전략이 더 효과적일 수 있습니다.

썸네일 대신 LCP(최대 콘텐츠 페인트) 최적화를 위한 방법은?

대표이미지를 숨기거나 제거한 후에는 텍스트 콘텐츠나 SVG, WebP 등 가벼운 미디어를 활용해 LCP를 최적화할 수 있습니다. WP Rocket이나 FlyingPress와 같은 캐싱 플러그인과 함께 사용하면 Core Web Vitals 점수 향상에도 도움이 됩니다.

.home .post-image 방식 대신 Lazy Load만 써도 되나요?

Lazy Load는 이미지의 로딩 타이밍을 조절하는 방식으로 페이지 전체 용량을 줄이지는 않습니다. 특히 TTFB에는 영향이 없기 때문에 전면 페이지에서 아예 필요 없는 이미지를 HTML에서 제거하는 것이 더 나은 접근입니다.

GeneratePress 외에 대표이미지 출력 제어가 쉬운 무료 테마는?

Astra나 Blocksy와 같은 테마는 커스터마이징 옵션에서 대표이미지 출력 여부를 쉽게 조절할 수 있습니다.

무료 버전에서도 기본적인 대표이미지 비활성화 기능이 제공됩니다.

이미지 제거와 함께 페이지 속도를 높이기 위해 어떤 추가 조치를 할 수 있나요?

사용하지 않는 블록 스타일 제거, Google Fonts 로딩 최적화, style.min.css 압축 및 병합, 외부 스크립트 지연 로딩 등이 있습니다.

WP Rocket, Asset CleanUp 같은 플러그인을 통해 자동화도 가능합니다.

functions.php에 코드 추가 시 오류가 나면 어떻게 하나요?

백업을 먼저 진행한 뒤, FTP로 접속해 functions.php를 원래대로 복원하면 됩니다.

또는 Code Snippets 플러그인을 사용하면 더 안전하게 함수를 추가할 수 있습니다.

대표이미지를 제거했는데도 Google PageSpeed 점수가 낮은 이유는?

이미지 외에도 JavaScript, CSS 렌더링 차단, 서버 응답 속도, TTFB 등이 영향을 줍니다.

이 중 하나라도 병목 현상이 있다면 점수가 낮게 나올 수 있으므로 Lighthouse 리포트를 통해 병목 구간을 확인하는 것이 좋습니다.

CSS로 숨긴 이미지도 검색엔진에 인식되나요?

네, 검색엔진은 HTML 구조를 분석하기 때문에 display:none 처리가 되어 있어도 이미지를 인식합니다.

오히려 숨겨진 콘텐츠가 많을 경우 SEO 페널티를 받을 수 있으므로 완전히 제거하는 방식이 더 권장됩니다.

모바일에서 사이드바가 고정되면 레이아웃이 깨질 수 있는데 어떻게 해결하나요?

미디어 쿼리를 활용해 모바일 해상도에서는 고정이 적용되지 않도록 분기처리하면 됩니다.

예를 들어 아래와 같이 작성할 수 있습니다.

@media screen and (max-width: 768px) {
  .sidebar {
    position: static !important;
  }
}

워드프레스 CSS 변경이 적용되지 않을 때 해결법은?

브라우저 캐시가 원인일 수 있으므로 새로 고침(Ctrl+F5)을 시도하거나, 캐시 플러그인의 CSS 캐시를 삭제해 보세요. 또한 캐시된 HTML을 비우는 것도 중요합니다.

댓글 남기기