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

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

워드프레스나 티스토리와 같은 플랫폼에서 글을 작성할 때, 해당 글의 내용을 이해하기 쉽게 하기 위해 대표이미지를 생성하는 것은 SEO (검색 엔진 최적화) 및 인터넷 검색에서 노출될 확률을 높이는 데 도움이 됩니다.

하지만 이러한 대표이미지는 카테고리, 싱글 페이지 등에서 표시하거나 숨길 수 있는데, 이러한 설정은 각각의 테마나 환경에 따라 다르게 적용될 수 있습니다.

워드프레스에서의 대표이미지 설정

대표이미지인 "특성 이미지(Featured Image)"는 글을 작성할 때 해당 이미지를 설정하여 추가할 수 있습니다.

이 Featured Image는 글을 블로그에 게시할 때 주로 썸네일 또는 대표 이미지로 활용되며, 검색 결과 등에서도 표시될 수 있습니다.

워드프레스 특성이미지 설정

그런데 때로는 이 Featured Image가 싱글 페이지의 본문 상단에 표시되어 가독성을 저해하는 경우도 있을 수 있습니다. 이런 경우, 해당 이미지를 숨기거나 제거하고자 할 수 있습니다.

이렇듯 워드프레스나 티스토리와 같은 플랫폼에서는 대표이미지를 조작하여 원하는 방식으로 표시하거나 숨기는 옵션을 설정할 수 있습니다. 각각의 테마나 플러그인, 설정에 따라 다양한 방법으로 대표이미지를 활용하며 블로그의 디자인과 가독성을 최적화하는 것이 중요합니다.

Disable First Featured Image

워드프레스 아바다 테마와 같은 테마에서는 이러한 특성이미지를 제거할 수 있는 옵션이 존재합니다.

하지만 현재 사용하는 테마가 특성이미지를 설정할 수 있는 옵션이 없다면 CSS를 통해 제거할 수 있습니다.

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

워드프레스 테마디자인 변경

테마디자인 -> 사용자정의하기로 들어갑니다.

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

추가 CSS를 선택하면 CSS 태그를 추가할 수 있습다.

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

그리고 위 문구를 드래그 복사하여 저장합니다.

그럼 싱글포스트에서 더이상 대표이미지 섬네일이 표시되지 않습니다.

만약 WP Rocket을 사용하고 있을 때 대표 이미지가 여전히 표시된다면, CSS로만 숨기는 방법은 효과가 없을 수 있습니다. CSS에서 display: none을 설정하는 것만으로는 이미지가 로드되는 것을 막을 수는 없고, 단지 화면에서만 보이지 않게 만들기 때문입니다.

1. functions.php 파일에서 대표 이미지 비활성화하기

가장 확실하게 대표 이미지의 로드를 막는 방법은 WordPress의 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');

이 코드는 대표 이미지를 아예 비활성화합니다.

워드프레스 httaccess config.php 위치 및 수정방법

이 코드를 functions.php 파일에 추가하면 더 이상 대표 이미지가 로드되지 않게 됩니다. 다만, 이 코드는 모든 페이지나 포스트에서 대표 이미지가 아예 로드되지 않도록 하므로, 필요한 경우에만 이 코드를 적용할 수 있습니다.

2. WP Rocket에서 Lazy Load 설정 확인하기

WP Rocket에서 Lazy Load 기능이 활성화되어 있으면, 이미지가 화면에 보일 때만 로드됩니다. Lazy Load를 비활성화하거나 대표 이미지에서만 적용되도록 설정할 수도 있습니다.

WP Rocket에서 Lazy Load를 비활성화하려면

1. WP Rocket 설정 페이지로 이동합니다.
2. 미디어 탭으로 이동합니다.
3. LazyLoad 옵션을 비활성화합니다.

이렇게 하면 페이지 내 모든 이미지를 지연 로딩 없이 바로 로딩하게 되지만, 대표 이미지는 여전히 로드될 수 있습니다. Lazy Load만 비활성화하는 대신, 대표 이미지만 Lazy Load에서 제외시키는 것도 가능합니다.

3. CSS를 사용하여 이미지 숨기기 (화면에서만 보이지 않도록)

위 방법들 외에도, CSS로 화면에서만 이미지를 숨길 수 있습니다. 이 방법은 이미지를 숨기고 싶을 때만 유용합니다. 이미지를 아예 로드하지 않고 싶다면 functions.php 파일에서 설정하는 것이 좋습니다.

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

이 코드는 화면에서만 이미지를 숨깁니다.

이미지 파일 자체는 로드되지만, 화면에 보이지 않게 됩니다. 이 방법은 페이지 성능에 큰 영향을 주지 않으므로, 이미지를 로드하는 것은 피하고 싶지 않은 경우에 사용합니다.

워드프레스 대표이미지 안보이게 숨기기 - 노랗IT월드

티스토리 대표이미지 설정 방법 - 노랗IT월드

티스토리 대표 이미지 누락 우리가 할 수 있는 방법 - 노랗IT월드

워드프레스나 티스토리와 같은 플랫폼에서는 대표이미지를 활용하여 글의 내용을 이해하기 쉽게 만들어 SEO와 인터넷 검색 최적화에 도움을 줄 수 있지만 이 대표이미지가 싱글 페이지에서 가독성을 저해하는 경우가 있을 수 있습니다.

워드프레스에서는 "특성 이미지(Featured Image)"라고도 불리는 대표이미지를 설정하여 글에 첨부할 수 있습니

각 테마나 플러그인의 설정에 따라 대표이미지를 싱글 페이지에서 숨기거나 조작하는 옵션을 활용할 수 있습니다. 이렇게 대표이미지를 적절하게 활용하여 블로그의 디자인과 가독성을 최적화하는 것이 중요합니다. 

원하는 스타일과 사용자 경험을 고려하여 대표이미지의 표시 여부를 조절하며, 더 나은 블로그 환경을 구축하는 것을 추천합니다.