[워드프레스] GeneratePress 특성이미지 제거(숨기기)

#wordpress #셋팅하기 #적용하기 #특성이미지 #이쁘게만들자

안녕하세요, 배곧동개발자 입니다.

티스토리에서 워드프레스 넘어오시는 분이 급격히 많아지는 지금, 저처럼 워드프레스 초반 셋팅에 버벅이시는 분들이 많이 있으실거라 생각합니다.

그런분들을 위해 제가 겪는 문제들이 무엇무엇이 있었고 어떻게 풀어갔는지에 대해 하나하나 포스팅해볼까합니다.

1. GeneratePress 특성 이미지의 문제점

블로그를 하면서 항상 해오던 것이 가장 상단에 이번 포스팅에 대한 제목을 이미지로 표시하던 것이였습니다. 이뻐보이기도 하고 이뻐보이기도 하니까요!

GeneratePress를 이용해서 블로그형태의 폼을 만들고 글을 쓰다보니 “특성이미지”라는 것이 있었고, 상단에 이미지를 기재하는 것이 비슷하다 생각하여 사용해봤습니다.

하지만 결과는 저의 예상과 조금 달랐지요. 먼저 “글 내용의 상단”에 표시되리라 생각했던 이미지는 정말 “글의 상단”인 제목 위쪽으로 표시되었으며 리스트페이지에서까지 보여지며 상당히 거슬리는 모양이더라구요.

그렇다고 검색에 유리하다는 특성이미지를 아예 안올릴수는 없고 고민이 되었습니다.

2. 해결 방법을 찾아보자

그래서 저는 해결방법이 없을까 하고 이것저것 눌러보며 고민하던차에 이런걸 보게되었습니다.

명색이 개발자, 그것도 웹개발자인 저에게는 너무도 친숙한 css. 저걸 이용해서 특성이미지를 컨트롤해보면 어떨까 생각을 했고 바로 실행에 옮겼지요.

3. GeneratePress 특성 이미지 숨기기

어떻게 처리를 할까 생각해봤습니다. “리스트페이지에서는 이미지를 왼쪽, 글을 오른쪽으로 배치하게 바꿔보고 메인페이지에서는 가운데정렬을 좀 해볼까?” 라고 생각을 하며 진행을 해보다보니 뭔가 전체적인 틀이 깨지는 느낌이 조금 들더라구요.

그래서 그냥 맘편히 다 없애버리자 마음 먹었습니다. 아, 여기서 없앤다는거는 데이터는 그대로 둬서 검색에는 방해되지 않게하지만 눈에만 보이지 않게끔 처리하는 것입니다.

4. 리스트페이지 숨기기

방향성은 숨기는 것으로 정했으니 리스트페이지를 소스 먼저 까봤습니다.

보시면 리스트페이지의 이미지는 post-image라는 class로 되어있습니다. 간단하게 이것을 display:none 시켜줘봅시다.

/* 리스트페이지 특성이미지 제거 */
.post-image{display: none;}

싹 사라진거 보이시나요? 이렇게 꼴랑 한줄 추가해줌으로써 리스트페이지에서 특성이미지를 숨겼습니다.

5. 디테일페이지 숨기기

디테일페이지에서는 어떻게 할까요? 위에 리스트페이지와 동일합니다.

먼저 해당 이미지를 특정해야합니다. 소스를 뜯어보니 featured-image라는 class로 되어있습니다. 여기서 조심하셔야할건 featured-image라는 클래스를 다른곳에서 사용하는지 먼저 검색해보셔야합니다.

만약에 다른곳에서 사용한다면 특성이미지 제거하려다가 다른 내용이 안보일 수 있습니다만 제가 검색해본 결과 다른곳에서 사용하지 않습니다.

/* 디테일페이지 특성이미지 제거 */
.featured-image {display: none;}

이렇게 하여 본문상단에 표시되던 특성이미지까지 숨겨줬습니다. 잘 따라오고 계시지요?

6. 정리

자, 마지막으로 정리를 해보자면! 위에 저 두가지를 합쳐서 아래와 같이 저장해놓으시면 됩니다.

.post-image, .featured-image {
    display: none;
}

혹시라도 수정하셨는데 뭔가가 겹쳐서 사라진다? 그러면 댓글로 알려주시면 확인하고 처리 해드리겠습니다.

사실상 이제 시작한 저한테는 아직은 블로그보다 불편한 워드프레스 입니다. 하지만 워드프레스, GeneratePress는 이렇듯 CSS를 사용자가 수정하여 꾸밀 수 있게 제공해줍니다.

저와 같은 개발자들에게는 너무도 반가운 기능이고 앞으로 불편한거 있으면 하나씩 수정해가며 저에게 맞게, 더 편하게 만들어볼 계획입니다.

물론 그 과정은 차근차근 포스팅해볼 계획이니 함께 만들어가봅시다.

이만, 배곧동개발자 였습니다.