내가 이 마음에 드는 테마를 적용시키고 가장 거슬렸던 것중에 하나가 포스트 하단에 붙는 Related Post 영역이다. 썸네일 사이즈에 따라 들쑥날쑥하게 영역이 잡히는 것이 어찌나 거슬리던지.
위의 사진은 비교적 나은 사진이지만, 비율차이가 큰 경우는 정말 계단에 맞먹는 레이아웃으로 표현됐다.
Try
처음엔 크롬의 개발자 도구로 CSS를 조금 만져봤는데, 포스트의 Featured image와 동일한 클래스를 가지고 있어서 연관글 썸네일을 만지면 피처드 이미지도 영향을 받고 있는 것이다.
Catch
그래서 오늘은 이 녀석을 잡기로 하고, /wp-admin/theme-editor.php에 들어가서 single.php라는 녀석을 찾아 해당 영역을 뒤졌다.
//Start related posts 주석을 발견하고, 이미지를 보아하니 <?php asalah_post_thumbnail('masonry_blog'); ?> 라는 애가 들어가 있다. 해당 함수를 banner.php 에서 찾아보니 역시나 포스트 이미지면 다 같은 처리를..
그래서 클래스를 새로 만들어 할당하기로 하고, 워드프레스 Codex에서 썸네일을 불러올 수 있는 함수 Function Reference/the post thumbnail를 찾아보았다.
▲ 친절하게 예제가 있어서 그대로 복사...
▲ ...붙여넣기. 물론 클래스를 새로 할당해야 하므로 a 태그 안에 <div class...>를 선언하고 잘 닫아주었다. (처음엔 안닫아서 소스가 엉망이...)
▲ 여튼 새로운 클래스가 잘 적용되어서 CSS없는 날것으로 표현되고 있다. 나는 CSS를 잘 모르지만, 원래 테마의 CSS 스타일이 있으니까 그대로 복사해와서 워드프레스의 Custom CSS 페이지에 오버라이딩 시켜줬다.
▲ 당연히 클래스명은 바꿔줘야하고, 잘 적용되어서 원래의 테마랑 똑같은 스타일을 표현하고 있다! 원래는 가변적이었던 높이를 고정으로 바꾸고나니, 타이틀은 정렬이 잘 되어있지만, 이미지가 잘려보이는 것처럼 비어있게 되었다. 문제가 없는 것처럼 백그라운드 컬러를 넣고보니
▲ 음 하지만 역시 여전히 어색하다. 그냥 이미지 비율을 포기하고 썸네일에 꽉차게 좌우로 늘려야겠다.
▲ 이미지 비율이 깨지는 포스트는 살짝 어설프긴 하지만, 이미지가 이제 고정너비와 높이를 가지고 있으니 마음에 평화가 찾아왔다. 흰색 이미지는 배경이 없어서 디자인버그처럼 보이는 문제가 있으니 얇은 선을 그려주었다.
Return
아래 소스는 최종 CSS.
비개발자로서 평소에 Codex 를 보면서 음 이렇게 하면 되겠구나 했던 적은 많은데, 실제로 적용해보고 그게 성공한건 오늘이 처음인 것 같다. 왠지 모를 뿌듯함과 함께 테마 업데이트 시키면 다 날아가겠지하는 허무함에 글을 작성해둔다. 나중에 참고하렴 미래의 나에게.
