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

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

워드프레스나 티스토리처럼 글을 중심으로 운영되는 플랫폼에서는 글의 내용을 한눈에 보여주기 위해 대표이미지(특성 이미지, Featured Image)를 설정하는 경우가 많다. 대표이미지는 검색 결과나 SNS 공유 썸네일에도 사용되기 때문에 SEO(검색 엔진 최적화)와 노출 효율을 높이는 데 중요한 요소다.

다만 이 대표이미지가 항상 좋게만 작용하는 것은 아니다. 카테고리·메인 목록에서는 썸네일이 필요하지만, 싱글 페이지 본문 상단에 크게 노출되면 가독성을 떨어뜨리거나 화면을 답답하게 만들기도 한다. 그래서 테마·환경에 따라 카테고리/아카이브에서는 그대로 노출하고, 싱글 페이지에서만 대표이미지를 숨기고 싶어 하는 경우가 많다.

워드프레스 대표이미지(특성 이미지) 기본 개념

워드프레스 글 편집 화면에서 특성 이미지(Featured Image)를 설정하면 해당 글을 대표하는 썸네일로 사용된다. 이 이미지는 보통 블로그 리스트, 카테고리·태그 아카이브, 검색 결과, 그리고 SNS 공유 썸네일 등에 활용된다.

문제는 이 Featured Image가 싱글 페이지 본문 맨 위에도 자동으로 출력되는 테마가 많다는 점이다. 글을 읽기 전에 화면 대부분이 이미지로 채워지면 본문 진입까지 스크롤이 길어지고, 모바일에서는 LCP(가장 큰 콘텐츠 로딩 시간)에도 영향을 준다. 이런 경우 디자인과 속도를 위해 대표이미지를 숨기거나 출력 위치를 조정해주는 편이 좋다.

워드프레스·티스토리는 테마 옵션, CSS, functions.php, 플러그인 등 여러 방식으로 대표이미지를 제어할 수 있고, 각 테마·플러그인 설정에 따라 적용 방법이 조금씩 달라진다.

워드프레스 아바다 테마처럼 기능이 많은 테마는 Disable First Featured Image와 같은 옵션으로 싱글 페이지 상단의 대표이미지만 깔끔하게 숨길 수 있다. 반대로 사용하는 테마에 이런 옵션이 없다면 CSS 수정이나 functions.php 코드 추가로 직접 제어해줘야 한다.

• 아바다 테마 다운로드 및 워드프레스 기본 설정 방법
• 워드프레스 아바다 속도 최적화 – 지연로드·CSS 압축 설정

워드프레스 테마디자인에서 CSS로 대표이미지 숨기기

대부분의 테마는 관리자 화면의 [테마 디자인 → 사용자 정의하기] 메뉴에서 추가 CSS를 입력할 수 있다. 이곳에 대표이미지를 숨기는 CSS 클래스를 추가하면 별도 플러그인 없이도 싱글 페이지 상단 이미지를 간단히 감출 수 있다.

대표이미지 안보이게 CSS 수정

추가 CSS 입력창에 아래 코드를 그대로 붙여 넣고 저장하면, 해당 클래스가 붙은 대표이미지는 화면에서 보이지 않게 된다.

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

이 CSS를 적용하면 싱글 포스트 상단의 썸네일만 화면에서 숨겨지고, 카테고리·메인 리스트의 썸네일은 그대로 유지되는 경우가 많다. 다만 이 방식은 어디까지나 “화면에서만 감추는 것”이라 이미지 파일 요청과 로드는 그대로 발생한다는 점은 기억해야 한다.

1. functions.php에서 대표이미지 기능 자체 비활성화

좀 더 강하게 제어하고 싶다면 테마의 functions.php 파일에서 포스트·페이지의 thumbnail 지원을 아예 끌 수도 있다. 이 방법은 대표이미지 기능 자체를 비활성화하기 때문에 섬세한 제어보다는 “특성 이미지 기능을 쓰지 않겠다”라는 선택에 가깝다.

// 대표 이미지 및 일부 head 요소 비활성화 예시
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' );

이 코드를 적용하면 포스트·페이지에서 대표이미지 기능 자체가 꺼지기 때문에, 썸네일을 전혀 사용하지 않을 때만 권장된다. 일부 페이지에서는 대표이미지가 필요하다면 조건문으로 특정 포스트 타입이나 템플릿에서만 제어하는 방식으로 응용하는 게 좋다.

2. WP Rocket에서 Lazy Load 설정 점검

WP Rocket 같은 캐시 플러그인을 사용할 때는 Lazy Load(지연 로딩) 설정도 함께 확인하는 것이 좋다. Lazy Load는 화면에 보이는 시점에 이미지를 불러오는 기능이라 일반적으로는 속도에 도움이 되지만, 대표이미지가 LCP로 잡히는 경우에는 오히려 늦게 뜨는 문제를 만들 수 있다.

WP Rocket에서 Lazy Load를 끄거나 조정하는 기본 흐름은 다음과 같다.

1. WP Rocket 설정 페이지로 이동
2. 미디어(Media) 탭으로 이동
3. LazyLoad 옵션을 필요에 따라 비활성화하거나, 예외 설정을 활용

모든 이미지의 Lazy Load를 꺼버리면 첫 화면은 빨라질 수 있지만, 스크롤이 긴 페이지에서는 다시 손해를 볼 수 있다. 그래서 보통은 첫 화면에 바로 보이는 핵심 대표이미지만 Lazy Load에서 제외하고, 나머지 이미지는 지연 로딩 상태로 유지하는 쪽을 많이 사용한다.

3. CSS로 화면에서만 이미지 숨기기

마지막으로, 이미지 파일은 그대로 로드하되 화면에서만 대표이미지를 감추고 싶을 때는 CSS 클래스로 처리할 수도 있다. 이 방법은 디자인만 정리하고 싶고, 이미지 로딩 자체를 막고 싶지 않을 때 선택할 수 있는 타협안이다.

/* 대표 이미지 숨기기 */
.post-thumbnail {
    display: none !important;
}

위 코드는 .post-thumbnail 클래스를 사용하는 대표이미지를 화면에서만 보이지 않게 처리한다. 이미지 파일 요청은 그대로 들어가기 때문에 속도 최적화 효과는 크지 않지만, 레이아웃을 간단히 다듬는 데에는 충분하다.

티스토리 대표 이미지 누락 - 네이버 다음 문제점 해결 - 노랗IT월드

정리하자면 워드프레스·티스토리 같은 플랫폼에서 대표이미지는 클릭을 유도하는 썸네일이면서, 동시에 레이아웃과 속도에 영향을 주는 요소다. 테마 옵션, CSS, functions.php, 캐시 플러그인 설정을 적절히 섞어 쓰면 싱글 페이지에서는 대표이미지를 깔끔하게 숨기면서도 검색·SNS 노출용 썸네일과 디자인, 가독성까지 함께 챙길 수 있다.