본문에서 특성 이미지 숨기기 – Twenty Fifteen 테마

Hide featured image on specific post.

최근들어 상단에 크게 특성 이미지 Featured Image를 보이도록 하는 워드프레스 테마들이 많이 나오고 있다.

kukie_net_2015-03-19-at-9.22.30-PM
이런식으로…

이미지가 아주 예쁘거나 하면 저렇게 크게 들어가도 괜찮지만, 목록용으로 작게 봤을 때만 예쁜 이미지를 넣거나 했을때는 조금 곤란하다.

나도 기존에는 작은 특성 이미지를 사용하고 있던 사람 중 한명이다.
그래서 이번에 새로나온 Twenty Fifeen 테마를 새로 적용하면서, 특성 이미지를 글에 따라서 숨기기/보이기를 선택할 수 있도록 적용해보았다.

특성 이미지 자체를 삭제해도 되지만, Twenty Fifeen 테마는 본문 하단에 ‘이전 글, 다음 글’ 부분에 특성 이미지가 백그라운드로 들어가서 좀 예쁘게(?) 보이기 때문에 특성 이미지 자체를 빼고 싶진 않았다.
그래서 사용자 정의 필드Custom Field를 이용해서 본문에서 특성 이미지를 숨길지 보일지 선택할 수 있도록 작업했다.


테마 수정하기

본문 파일 중 특성 이미지를 표출하는 곳의 코드를 수정한다.

본문 파일 : content.php
수정할 곳 : 아래 참고

<?php
	// Post thumbnail.
	twentyfifteen_post_thumbnail(); // 이 부분을 삭제
?>

그리고 아래 코드를 넣어준다.

<?php
$shouldHideFeaturedImage = get_post_meta($post->ID, 'hide_featured_image', true);
if ( $shouldHideFeaturedImage != 'yes' ) {
 if ( has_post_thumbnail() ) {
    the_post_thumbnail('medium');
    }
}
?>
  • line 3 – hide_featured_image 는 본인이 원하는 이름으로 넣어도 된다.
  • line 7 – medium은 특성 이미지로 나오는 이미지 사이즈이다. 나는 large로 해도 본문 가로 사이즈보다 약간 작기 때문에 ‘orginal’로 설정했다.

적용법

글을 작성할 때 ‘사용자 정의 필드‘에 위에서 지정한 항목을 넣어주면 된다.
plugin_custom_field_suite2

  • 이름 : hide_featured_image
  • 값 : yes (Hide) or no (Show)

yes로 지정하고 글을 저장하면 본문에서 특성 이미지가 보이지 않게 된 걸 확인할 수 있다.

참고) 저렇게만 수정하면 포스트 목록과 페이지에는 여전히 특성 이미지가 나온다.
그 부분도 동일하게 하려면 해당 파일을 찾아서 위와 동일하게 수정해주면 된다.


플러그인으로 조금 편하게 적용

글을 쓸 때, 혹은 수정할 때 사용자 정의 필드를 일일히 손대려면 귀찮은 일이다.
그래서 Custom field를 관리/적용할 수 있는 플러그인을 통해 나름 GUI로 접근할 수 있도록 해두면 편리하다.

Plugin – Custom Field Suite

다른 플러그인도 써봤는데, 비주얼 컴포저와 충돌이 나서 본문 수정이 불가능했다.
이 플러그인은 문제 없이 작동했다.
요래조래 옵션을 만지고 나면 사이드바에 넣어서 편리하게 사용할 수 있다.

plugin_custom_field_suite
아래 두 개는 개인적으로 사용하는 다른 필드

임시 방편 : CSS로 숨기기

야메(?)로 아래처럼 CSS를 이용해서 그냥 숨기는 방법도 있다. ^^;

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

– 끝 –