본문 바로가기

워드프레스 싱글페이지 썸네일 제거하는 다양한 방법

ggqudrndl 2025. 4. 3.

워드프레스 싱글페이지에서 대표이미지(특성 이미지)를 숨기는 다양한 방법을 알아봅니다. CSS 코드 추가, 플러그인 설치, 테마 설정 변경 등 테마별 맞춤 해결책으로 본문 상단의 썸네일을 효과적으로 제거하고 블로그 디자인을 개선해보세요. 초보자도 쉽게 따라할 수 있는 단계별 가이드를 제공합니다.

워드프레스 대표이미지의 이해와 숨기는 이유

워드프레스에서 블로그를 운영하다 보면 게시물마다 대표이미지(특성 이미지)를 설정하게 됩니다. 이 이미지는 블로그 목록 페이지에서 썸네일로 표시되어 독자들의 시선을 끌고 SEO에도 도움이 됩니다. 하지만 싱글페이지(개별 게시물)에서는 본문 상단에 동일한 이미지가 크게 표시되어 가독성을 해치거나 디자인적으로 불필요할 수 있습니다.

많은 블로거들이 목록 페이지에서는 썸네일을 유지하면서 본문에서만 대표이미지를 숨기고 싶어 합니다. 이는 다음과 같은 이유 때문입니다:

  • 본문 내용과 중복되는 이미지 제거
  • 페이지 로딩 속도 개선
  • 깔끔한 디자인 유지
  • 본문 상단 공간의 효율적 활용

이 글에서는 워드프레스 싱글페이지에서 대표이미지를 숨기는 다양한 방법을 알아보겠습니다.

 

👇👇👇 내용 자세히 보기  👇👇👇

CSS를 사용하여 대표이미지 숨기기

가장 간단한 방법은 CSS 코드를 추가하여 대표이미지를 숨기는 것입니다. 이 방법은 테마에 관계없이 적용할 수 있으며, 특별한 플러그인 설치 없이도 가능합니다.

단계별 CSS 적용 방법

  1. 워드프레스 관리자 대시보드에 로그인합니다.
  2. 외모(모양) > 사용자 정의하기로 이동합니다.
  3. 추가 CSS 섹션을 선택합니다.
  4. 아래 CSS 코드를 입력하고 저장합니다.

테마에 따라 적용해야 할 CSS 코드가 다를 수 있습니다. 가장 일반적인 코드는 다음과 같습니다:

.post-thumbnail {
    display: none;
}

또는 다른 테마의 경우:

.attachment-post-thumbnail {
    display: none;
}

GeneratePress 테마를 사용하는 경우:

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

Twenty Seventeen 테마를 사용하는 경우:

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

CSS 코드를 적용한 후 싱글페이지를 확인하면 대표이미지가 더 이상 표시되지 않는 것을 확인할 수 있습니다. 이 방법은 이미지가 실제로 로드되지만 화면에 표시되지 않도록 하는 방식입니다.

플러그인을 사용하여 대표이미지 숨기기

CSS 코드 수정이 부담스럽거나 더 유연한 방법을 원한다면, 플러그인을 사용하는 것이 좋은 대안입니다.

추천 플러그인: Conditionally display featured image on singular posts and pages

이 플러그인은 긴 이름을 가졌지만 기능은 매우 단순합니다. 각 게시물마다 대표이미지를 본문에 표시할지 여부를 선택할 수 있게 해줍니다.

플러그인 설치 및 사용 방법:

  1. 워드프레스 관리자 대시보드에서 플러그인 > 새로 추가로 이동합니다.
  2. 검색창에 "Conditionally display featured image" 또는 "단일 게시물 및 페이지에 특성 이미지를 조건부로 표시"를 입력합니다.
  3. 플러그인을 설치하고 활성화합니다.
  4. 게시물 작성/편집 화면에서 특성 이미지 섹션에 새로운 옵션이 추가됩니다: "Display featured image in post lists only, hide on singular views." (게시물 목록에만 특성 이미지를 표시하고 단일 보기에서는 숨깁니다.)
  5. 이 옵션을 체크하면 해당 게시물의 본문에서는 대표이미지가 표시되지 않습니다.

이 플러그인의 가장 큰 장점은 게시물별로 설정을 다르게 할 수 있다는 점입니다. 일부 게시물에서는 대표이미지를 표시하고, 다른 게시물에서는 숨길 수 있습니다.

테마 설정을 통한 대표이미지 숨기기

많은 프리미엄 워드프레스 테마들은 싱글페이지에서 대표이미지를 표시할지 여부를 설정할 수 있는 옵션을 제공합니다.

주요 테마별 설정 방법

1. Avada 테마:

  • Avada > Theme Options > Blog > Blog Single Post로 이동
  • Featured Image / Video on Single Post 옵션을 Off로 설정

2. GeneratePress 프리미엄:

  • 워드프레스 > 외모 > 사용자 정의하기 > Layout > Blog로 이동
  • Post 탭에서 Display featured images 옵션을 체크 해제

3. Neve 테마:

  • WordPress > 모양 > 사용자 정의로 이동
  • 레이아웃 > 단일 게시물을 선택
  • 헤더 레이아웃이 "일반"인 경우, 요소 순서 섹션에서 썸네일 요소 옆의 눈 아이콘 체크 해제
  • 표지 헤더 레이아웃을 사용하는 경우, 레이아웃 섹션에서 추천 이미지 숨기기 옵션을 켜기로 전환

4. Newspaper 테마:

  • 워드프레스 대시보드 > Newspaper > Theme panel > Post Settings > Featured images로 이동
  • Show Featured Image 옵션을 끄기

테마 설정을 통한 방법은 모든 게시물에 일괄적으로 적용되며, 테마 업데이트 후에도 설정이 유지된다는 장점이 있습니다.

테마 파일 수정을 통한 대표이미지 제거

더 근본적인 해결책을 원한다면 테마 파일을 직접 수정하여 대표이미지가 아예 로드되지 않도록 할 수 있습니다. 이 방법은 사이트 성능에 약간의 이점을 줄 수 있지만, 테마 업데이트 시 변경사항이 사라질 수 있으므로 반드시 차일드 테마를 사용해야 합니다.

주의사항

테마 파일을 수정하기 전에:

  1. 반드시 차일드 테마를 만들어 사용하세요.
  2. 파일 수정 전 백업을 만들어두세요.
  3. 기본적인 PHP와 HTML 지식이 필요합니다.

수정 방법 예시

Twenty Seventeen 테마의 경우, header.php 파일에서 특성 이미지를 표시하는 코드를 찾아 제거할 수 있습니다. 다른 테마에서는 single.php 또는 content.php 파일을 확인해보세요.

각 방법의 장단점 비교

방법 장점 단점
CSS 추가 간단하고 빠름, 테마 업데이트에 영향 없음 이미지는 여전히 로드됨(성능 이슈)
플러그인 사용 게시물별 설정 가능, 사용 편리 추가 플러그인으로 인한 부하 가능성
테마 설정 안정적, 테마 업데이트 후에도 유지 모든 테마에서 제공하지 않음
테마 파일 수정 이미지 로드 자체를 방지(성능 향상) 테마 업데이트 시 재설정 필요, 기술적 지식 요구

결론

워드프레스 싱글페이지에서 대표이미지를 숨기는 방법은 여러 가지가 있으며, 각자의 상황과 기술 수준에 맞는 방법을 선택할 수 있습니다. 초보자라면 CSS 추가나 플러그인 사용을, 프리미엄 테마 사용자라면 테마 설정을, 기술적 지식이 있는 사용자라면 테마 파일 수정을 고려해볼 수 있습니다.

중요한 것은 블로그의 디자인과 사용자 경험을 최적화하는 것입니다. 대표이미지를 숨기는 것이 콘텐츠 가독성과 사이트 성능을 향상시킨다면, 위에서 설명한 방법 중 하나를 선택하여 적용해보세요.

자주 묻는 질문

Q: CSS로 대표이미지를 숨겼는데도 여전히 보입니다. 어떻게 해야 하나요?
A: 테마마다 대표이미지를 표시하는 CSS 클래스가 다를 수 있습니다. 브라우저의 개발자 도구를 사용하여 정확한 클래스명을 찾아 CSS 코드를 수정해보세요.

Q: 일부 게시물에서만 대표이미지를 숨기고 싶습니다. 가능한가요?
A: 네, 'Conditionally display featured image on singular posts and pages' 플러그인을 사용하면 게시물별로 설정할 수 있습니다.

Q: 대표이미지를 숨기면 SEO에 영향이 있나요?
A: 본문에서만 숨기고 HTML 구조에는 여전히 존재한다면 SEO에 큰 영향은 없습니다. 검색 엔진은 여전히 이미지의 alt 텍스트와 메타데이터를 인식합니다.

Q: 테마를 업데이트하면 CSS 설정이 사라지나요?
A: 워드프레스 '사용자 정의하기'의 추가 CSS에 적용한 코드는 테마 업데이트 후에도 유지됩니다.

Q: 대표이미지를 완전히 제거하는 것과 CSS로 숨기는 것의 차이점은 무엇인가요?
A: CSS로 숨기는 경우 이미지는 여전히 로드되지만 표시되지 않습니다. 완전히 제거하면 이미지가 로드되지 않아 페이지 로딩 속도가 약간 빨라질 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

댓글

티스토리툴바