워드프레스 테마에서 썸네일 활성화 하고, 표시하기

🕓2017.03.23 📈3

워드프레스 테마를 만들거나 이용할 때, 해당 테마에서 썸네일(Featured Image, 특성 이미지)을 사용 가능 하도록 하기 위해서는 functions.php 파일에서 활성화를 시켜줘야 합니다.

썸네일 활성화 하기

아래 코드를 functions.php 파일에 추가 하여 테마가 포스트 썸네일을 지원하도록 만들어 줍니다.

add_theme_support( 'post-thumbnails' );

이제 포스트를 작성 할 때 썸네일을 추가 하는 파트가 보입니다.

썸네일이 지정된 포스트의 경우 썸네일을 표시 하기 위해 the_post_thumbnail 함수를 사용하면 됩니다.

<div>
    <?php the_post_thumbnail(); ?>
</div>
<div>
    <?php the_content(); ?>
</div>

the_post_thumbnail 함수에는 파라미터를 사용할 수 있습니다. 원하는 이미지 사이즈의 이름을 파라미터로 입력 해주면 됩니다.

<?php the_post_thumbnail('medium'); ?>

워드프레스에서는 기본적으로 thumbnail / medium / large / full 의 사이즈 형태를 제공합니다.

포스트에 지정된 썸네일이 있을 경우에만 표시 하기 위해서는 has_post_thumbnail 함수를 사용하여 지정된 썸네일이 있는지 확인한 후 표시 해주면 됩니다.

<div>
    <?php 
        if ( has_post_thumbnail() ) {
            the_post_thumbnail();
        }
    ?>
</div>

워드프레스는 기본적으로 그림 파일을 업로드 하면 상황에 맞게 각기 다른 사이즈의 이미지를 사용하기 위해서, 여러개의 사이즈로된 이미지를 각기 다른 파일로 저장합니다.

기본적으로 지정된 썸네일의 사이즈는 150×150 픽셀의 정사각형의 크롭된 이미지이지만, 누군가는 가로로 긴 형태의 썸네일을 사용하고 싶을때가 있잖아요. 그때는 기본 썸네일의 사이즈를 functions.php 파일에서 다른 사이즈로 바꿔주면 됩니다.

set_post_thumbnail_size(160, 90, true)

위 코드를 사용 하면 가로 160px, 세로 90px 의 크롭된 이미지 사이즈로 기본 썸네일 사이즈가 변경 됩니다.

만약 기본 썸네일 사이즈를 변경하지 않고, 새로운 사이즈를 입력 하고 싶다면 아래 코드를 이용하면 됩니다.

add_image_size('image-size-name', 160, 90);

그리고 실제 사용을 위해서는 위에서 설명한 파라미터 부분에 이미지 사이즈 이름을 적으면 됩니다.

the_post_thumbnail('image-size-name');