[워드프레스] GeneratePress 테마 포스팅 상단 썸네일 지우기 (무료)

GeneratePress 테마는 워드프레스를 사용하면서 사이트 성능과 속도가 좋다고 소문난 테마입니다. 저도 Onepress를 처음에 설치했다가 GeneratePress로 변경해 보았습니다.

다만 테마의 기본 설정으로는 마음에 들지 않는 것이 많아 여러 수정을 거쳤습니다. 그중 GeneratePress 테마의 포스팅 상단 썸네일 관련해서 수정해보려고 합니다. 유료로 사용하는 것이 아니기 때문에 간단한 CSS 수정으로 테마를 입맛에 따라 세팅해보려고 합니다.

GeneratePress 테마 포스팅 상단 썸네일 없애기

GeneratePress 포스팅 상단 썸네일 화면

 

상단 이미지

 

GeneratePress 테마의 포스팅 글 화면을 보면 제목 상단에 커다란 썸네일이 자동으로 들어와 있는 것을 알 수 있습니다. 이 썸네일이 너무 크게 보이고 있어서 제목이 보이지 않아 가독성이 떨어질 수 있습니다. 또 저는 글에서 본문을 시작하기에 앞서 썸네일 이미지를 추가하고 있는데요, 이로 인해 썸네일 2개가 연달아 보이는 현상도 있었습니다.

썸네일 상단의 이미지를 CSS로 안 보이게 변경해 보겠습니다.

추가 CSS 적용

워드프레스 설정 페이지에서 외모 > 사용자 정의 > 추가 CSS로 진입 시 테마와 상관없이 사용자에게 보이는 최종 CSS를 입력할 수 있습니다.

 

CSS 수정 위치

 

 

 

/* 포스팅 글 상단에 썸네일 뜨는거 가리기 */
.single .inside-article>.featured-image {
    display: none;
}

 

위 CSS 코드의 의미는 포스팅 게시글 내부의 article 영역으로 구분된 곳에 있는 feature-image (썸네일)의 display를 없애겠다는 의미입니다. 이런 방법으로 테마에서 마음에 들지 않는 다른 영역들의 요소도 보이지 않게 가릴 수 있습니다. 이 영역의 이름은 크롬 창에서 F12를 눌러 확인할 수 있습니다.

 

하지만, 아직 손에 익지 않는다면 차차 알아볼 수 있으니 너무 조급해하지 않으셔도 됩니다.

수정 페이지

 

CSS 수정 전 후

 

 

위 CSS 수정 전 후로 썸네일이 지워진 것을 확인할 수 있습니다. 왼쪽 화면은 게시글 제목 보다도 먼저 썸네일 이미지가 width에 꽉 차게 등장하고 있습니다. 오른쪽은 CSS 코드가 적용되어 바로 제목으로 진입하고 있습니다. 아무래도 저의 포스팅 구성상 썸네일은 본문 내부에 작게 표현되는 것이 좋아 보입니다.