워드프레스 입문 초기에는 특성이미지가 도대체 어떤 기능을 하는지 잘 이해하지 못한 상태에서 서버를 여기 저기 옯겨다니다보니 이미지의 링크가 깨진 것을 깨닫지 못하는 경우도 많았고, 이미지 CDN을 사용하는 경우에는 외부 이미지를 어떻게 특성 이미지로 등록해야할지 문제되기도 했다. 때문에 그저 글의 맨앞 부분에 먼저 이미지를 올려놓고 나서 글을 쓰는 방식으로 특성이미지를 대신하는 방식을 많이 사용했는데 2014테마를 적용하고 나서 부터는 기타 여러가지 플러그인들을 테스트하는 과정에서 특성이미지의 중요성을 깨닫게 되었으며 그나마 저장용량의 제한을 덜 받는 서버로 바꾸고 나서 뒤늦게 특성이미지를 등록하게 되었다. 이렇게 하고나니 이제는 Single post의 헤더에 올라와있는 이미지와 바로 뒤에 쫒아오는 글 앞 부분의 이미지가 동일한 경우가 많아서 불필요한 band width의 낭비라고 생각되었고 보기에도 좋지 않았다.
single post에서는 저 중복되는 특성이미지를 보이지 않게 하고싶었다. 뭔지 분명히 방법이 있을 것 같아서 이번에는 대놓고 베테랑님에게 질문을 올렸다. 이번에도 곧 바로 답이왔다.
.single .post-thumbnail img {display: none}
.single .site-content .has-post-thumbnail .entry-header {margin-top: 0}
이런 코드를 스타일 정의가 가능한 곳에 넣어보란다. 스타일 정의가 가능한곳? 그럼 child theme 의 style.css 파일에 넣어보는 것이 일차 순서일것이라고 생각되어 일단 시도해보았지만 처음에는 아무런 반응이 없어서 잊고지냈다 . 그런데 며칠 지나지 않아서 글 쓰기하면서 올린 글들에서 이미지 연결이 않되는 현상이 나타나길래 dropbox cdn 의 문제라고 생각되어 이미지를 cdn에 올리고 더불어서 다른 파일들도 한번 업데이트할 겸 모두 덥어 쓰기를 시도했더니 single post에서 특성이미지가 보이지않는 현상이 나타났다.
어라? 이게 뭐지? 지난 번에는style.css 파일을 cdn 서버에까지 업로드 하지 않았기 때문에 스타일 정의가 제대로 작동하지 않은 것이었다. (처음엔 어쩌면 cashe 때문일 수도 있다고 생각했는데 나중에 보니 cache 에서 admin 등의 known user 에게는 cache가 작동하지 않도록 설정해 놨었기 때문에 cache는 원인이 아닌것으로 생각된다. )
았싸~~~ 이번에도 성공이야….
이렇게 스타일에서 뭔가 변화가 있는 것을 경험하고 나니 이젠 여러가지 다른 것들도 손을 좀 보고 싶다는 욕심이 생긴다.
그런데 저 코드는과연 무얼 의미할까?
첫 줄은 single post의 thumnail image를 표시하지 말라는 뜻인 것 같고, 둘째 줄은 그러고 나면 single post의 thumnail image이 있던 자리가 공란으로 나타날 수도 있으니 thumbnail image을 가진 post는 header부분에 공란을 두지 말고 margin 을 없애라는 뜻인것 같다.
[update: 2014.03.26.] 나중에 생각해보니 두 번째 줄은 header의 윗 부분이 thumbnail 부분까지 침범하도록 , margin-top:-48px 이렇게 되어 있었기 때문에 이걸 조정한 것이다. 이 값이 너무 커서 home 에서도 사실 이미지의 아랫 부분이 잘 안 보이는것이 맘에 들지 않았는데 이번 기회에 이것도 조금 조절했다.
브라우저의 요소검사기에서
media="all"
@media screen and (min-width: 1008px)
site-content .has-post-thumbnail .entry-header {
margin-top: -48px;
}
이 부분의 -48px를 조절했더니 변화가 보이길래 이 코드를 그대로 style.css파일에 넣었더니 변화가 없었고 맨위의 두 줄을 지웠더니 작동했다. (왜 이런 반응을 보이는지는 아직은 잘 모른다. )
.site-content .has-post-thumbnail .entry-header {
margin-top: -20px;
padding-top: 15px;
}
최종적으로 조절한 값이다. padding 값도 조금 조절했다.
소셜댓글