‘특성 이미지’ 또는 ‘대표 이미지’라고도 불리우는 이 기능은 이름 그대로 워드프레스의 포스트나 페이지를 ‘대표’하는 이미지입니다. 이 기능은 워드프레스 2.9 버전에 포스트 썸네일(Post Thumbnails)이라는 이름으로 처음 적용 되었다가 이어 3.0 버전부터 특성 이미지(Featured Images)라는 이름으로 변경되어 지금은 혼용해서 사용되고 있죠.
특성 이미지 사용하기
워드프레스 사용자라면 누구나 워드프레스 대시보드의 글 편집기 좌측 하단에 위치한 “특성 이미지” 선택 박스를 통해 이 기능과 만납니다. 여기서 글이나 페이지를 대표할 이미지를 업로드 하거나 지정하면 워드프레스가 그 이미지를 테마에 반영해 주는 방식으로 동작합니다.
특성 이미지 사용법은 이것으로 끝입니다. 정말 간단하죠?
테마 지원
그런데 이 기능은 실은 사용하는 테마에서 지원을 할 경우만 작동하는 기능입니다. 내 테마의 functions.php 파일에서 확인해 보면 아마도 아래와 같은 코드가 추가되어 있는 것을 확인할 수 있을 것입니다.
add_theme_support( 'post-thumbnails' );
이렇게 워드프레스는 테마가 ‘특성 이미지’ 기능을 지원하는지 여부를 테마 개발자에게 맡기고 특성 이미지를 지원하는 테마에 한해 위의 특성 이미지 선택 박스를 표시해 줍니다. 반대로, 위 코드가 없으면 테마가 특성 이미지를 지원하지 않는 것으로 간주하고 특성 이미지 선택 박스를 아예 표시하지 않습니다.
물론 요즘 나오는 대부분의 테마에서 특성 이미지는 당연하게 지원되기 때문에 오히려 특성 이미지를 지원하지 않는 테마를 찾기가 더 어렵긴 합니다.
특성 이미지 출력하기
특성 이미지를 테마에 출력하는 방법은 간단합니다. 테마 템플릿 내에서 특성 이미지가 들어갈 자리에 맞춰 워드프레스의 템플릿 함수 중 하나인 the_post_thumbnail() 함수를 호출하면 됩니다. 다음과 같은 식이죠.
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
그러면 화면의 지정한 위치에 선택한 특성 이미지가 출력되겠죠.
여기서 문제! 이 때 화면에 출력되는 이미지 파일의 크기는 얼마 일까요?
특성 이미지 크기 지정하기
워드프레스에서 이미지 파일을 업로드하면 기본적으로 워드프레스가 다음과 같이 4개의 서로 다른 크기의 이미지를 추가로 생성합니다. 원본 이미지를 포함하면 하나의 미디어 업로드 당 총 5벌의 이미지 파일이 업로드 디렉터리에 생성되는 셈이죠.
- 원본 이미지(Full)
- 쎔네일 이미지(Thumbnail 사이즈, default 150px x 150px max)
- 중간 이미지(Medium 사이즈, default 300px x 300px max)
- 중간 큰 이미지(Medium Large 사이즈, default 768px x 0px max)
- 큰 이미지(Large 사이즈, default 1024px x 1024px max)
이 값은 워드프레스 관리자 대시보드의 “설정 > 미디어” 메뉴에서 확인할 수 있으며, 또한 여기서 각각의 크기에 대한 디폴트 사이즈 값을 변경할 수도 있습니다.
사실, 이 부분은 특별히 특성 이미지와 관련된 기능이라기 보단, 워드프레스에서 썸네일 이미지를 다루는 일반적인 방법입니다. 여기에 대해서는 이미 다른 글에서 좀 더 자세히 다루고 있으니 참고 바랍니다.
어쨌거나, 앞서 테마 파일에서 the_post_thumbnail() 함수를 아무런 인자값 없이 호출할 경우 실제로는 원본 이미지(크기)가 화면에 출력되게 됩니다만, 만약 이 때 the_post_thumbnail('medium') 과 같이 사이즈 값을 지정해 주면 지정한 크기에 맞는 이미지가 화면에 출력될 것입니다.
또는 특성 이미지에 어울리는 별도의 이미지 크기를 추가할 수도 있습니다. 워드프레스 함수 중 하나인 set_post_thumbnail_size() 함수를 테마의 functions.php 파일 내에 다음과 같이 추가해 주면 됩니다.
function my_setup_theme() {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 400, 400 );
}
add_action( 'after_setup_theme', 'my_setup_theme' );
이제 the_post_thumbnail() 함수는 여기서 우리가 새롭게 지정한 post-thumbnail 값의 크기에 맞춰 새로운 이미지를 한 벌 더 생성하게 되고 화면 출력 시에도 해당 이미지를 사용하게 됩니다.
특성 이미지 관련 플러그인
아래 플러그인들은 특성 이미지를 관리할 때 함께 사용하면 도움이 되는 플러그인들입니다.
Regenerate Thumbnails
테마를 교체하거나 특성 이미지의 크기를 변경한 경우 이미 업로드한 이미지 파일들의 크기를 변경할 경우 자주 사용되는 유용한 플러그입니다.
Simple Image Sizes
워드프레스가 기본으로 제공하는 이미지 크기 외에 다양한 크기의 이미지를 추가하거나 이미지 크기를 관리할 때 유용합니다. 썸네일 재생성(regenerate) 기능도 내장되어 있습니다.
Get the Image
이 플러그인인 워드프레스의 기본 the_post_thumbnail()을 확장하여, 포스트콘텐츠, 커스텀 필드 등에서도 썸네일 이미지를 가져올 수 있게 해 줍니다.
0 thoughts on “특성 이미지 다루기”