워드프레스 썸네일 크기 조정

워드프레스의 카테고리나 블로그 리스트 페이지에 표시되는 특성 이미지(글 썸네일)의 크기를 조정하고 싶은 경우가 있을 수 있습니다. 특성 이미지를 표시하는 함수는 the_post_thumbnail()입니다. 이 함수는 반드시 Loop 내에서만 사용되어야 하고 포스트의 특성 이미지를 가져오려는 경우에는 get_the_post_thumbnail($id, $size, $attr )을 사용해야 합니다.

워드프레스 썸네일 크기 조정

기본적인 이미지 크기는 "thumbnail", "medium", "large", "full"이 있으며 이러한 크기는 워드프레스 관리자의 미디어 패널(설정 > 미디어)에서 구성 가능합니다.

다른 크기를 추가하여 사용하려면 다음과 비슷한 함수를 추가하면 됩니다.

function custom_thumbs()
{
add_image_size( 'thumb-small', 200, 200, true );
add_image_size( 'thumb-medium', 520, 9999 );
add_image_size( 'thumb-large', 720, 340 );
}
add_action( 'after_setup_theme', 'custom_thumbs' );
// Source: wordpress.org

이를 적용하려면 테마 템플릿 파일(예: content.php, category.php...)에 다음과 같은 형태로 추가할 수 있습니다.

<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'thumb-small' ); } ?>
2 Column layout in category in WordPress

예를 들어, 이 테마의 카테고리나 블로그 리스트에 표시되는 특성 이미지 크기가 약간 어중간하여 2개의 컬럼으로 글을 나열할 때에는 보기가 안 좋아집니다. 그래서 위의 add_image_size 함수를 사용하여 별도의 크기를 만들어 사용하여 컬럼의 크기에 맞게 조정할 수 있습니다.

현재 아카이브(index.php, category.php...)에 표시되는 썸네일 이미지를 조정하려면 이 방법을 통해 사용자 정의된 특성 이미지 크기를 사용할 수 있습니다.

참고:


6개 댓글

  1. 안녕하세요, 썸네일관련 궁금한게 있어서요.
    .post img{aspect-ratio:16/9!important;}
    해당 코드를 사용자정의 css에 적어넣으면 작동은 제대로 되는데, 코드에 문제가 있다는 듯이 aspect-ratio 부분이 빨간글씨로 나타납니다. 별다른 문제는 없는데 그냥 빨간글씨로 변한상태로 사용해도 되는지 궁금합니다!

    1. 정확한 것은 모르겠지만, 워드프레스 사용자 정의하기의 CSS 섹션에서는 CSS 속성의 몇 글자를 입력하면 그에 해당하는 CSS 속성들이 표시되지만(예를 들어, m을 입력하면 margin, margin-bottom... 등 m으로 시작하는 속성들이 선택할 수 있도록 표시됨), aspect-ratio는 이러한 속성 집합에 등록되어 있지 않아서 빨간색으로 표시되는 것 같습니다. 워드프레스에 aspect-ratio 속성도 등록해 줄 것으로 요청해볼 수 있을 것 같습니다.

      https://www.screencast.com/t/idtWYLkXk

  2. 안녕하세요.

    혹시 섬네일을 만드는 이미지의 부분? 을 제가 지정해서 저장하는 기능이나 플러그인이 없을까요?

    예를들어 사진이

    1111
    2222
    3333
    4444
    5555

    이렇게 긴거라고 하면 자동으로 생성될때는

    3333
    4444
    요 부분이 잘려서 되더라구요.

    그런데 저는

    1111
    2222

    이 부분을 잘라서 섬네일로 만들고 싶은데
    그렇게 나오도록 원본을 편집을 해버리면 원본이
    1111
    2222
    3333

    이런식으로 잘려버리더라구요... (4444/5555 부분을 삭제해야함)

    찾아보니 테마별로 리제네레이트 하는것만 나와서요 ㅠㅠ
    섬네일을 만들 이미지의 영역을 제가 설정할수 있는 그런 기능이 필요해서요....
    혹시 정보가 있다면 공유해주시면 감사하겠습니다.

    1. 썸네일 크기를 확인하여 특성 이미지를 썸네일 크기의 비율에 맞게 만들면 특성 이미지로 지정해도 잘리지 않고 제대로 나올 것 같습니다.

      그리고 페이스북 등 SNS에서 공유할 때 권장하는 크기가 있습니다. 그 크기를 고려하여 적당한 크기의 이미지를 특성 이미지로 지정하되, 썸네일 비율에 맞게 특성 이미지를 만드시면 효과적이지 않을까 생각됩니다.

      페이스북 공유 시 썸네일 규격에 대해서는 다음 글을 참고해보세요:

      https://www.thewordcracker.com/basic/sns-%EA%B3%B5%EC%9C%A0-%EC%8B%9C-%EC%8D%B8%EB%84%A4%EC%9D%BC-%EB%AC%B8%EC%A0%9C/

      하지만 질문 내용은 썸네일로 지정하는 이미지가 긴 경우에 해당하는 것 같네요. 그러면 썸네일 크기에 맞게 잘릴 것 같습니다. 썸네일 크기 자체를 변경해야 할 것 같은데요. 테마 파일을 수정하는 작업이 필요할 수도 있을 것입니다. 테마에 따라 썸네일 크기를 지정하는 옵션을 제공하기도 합니다.

      예를 들어, 이 블로그에 사용된 GeneratePress 테마에서는 특성 이미지 크기를 지정할 수 있는 옵션을 제공합니다.

      https://www.screencast.com/t/MYyQQRKOeE8d

      하지만 상황에 맞지 않게 너무 길게 썸네일 크기를 지정하면 보기가 좋지 않을 것 같습니다.

      1. 답변감사합니다.

        저는 섬네일을 길게 만들거나
        원하는 크기로 만드려는게 아니라
        이미지의 파일에서 특정 영역을 지정해서 (top, middle, bottom 정도의 느낌으로) 섬네일 만들고 싶은겁니다.

        어떤 사진에 위에는 구름이고 아래에 사람이 있으면
        구름 일부와 사람 정수리까지 잘려서 섬네일이 생성되는 것을 막으려는거지요 ㅠㅠ
        (하늘쪽이나 사람 얼굴쪽이나 둘중 하나로 몰아서 지정하기 위해)
        제가 사용하는 테마는 newspaper인데 혹시 여기에도 테마에서 지원하는 기능은 없을까요?

        감사합니다.

      2. 특성 이미지에 사용할 이미지를 별도로 만들어서 특성 이미지로 지정해보시면 어떨까요?
        뉴스페이퍼 테마의 경우 썸네일 크기를 확인한 후에 비율에 맞는 이미지를 만들 수 있을 것입니다.

        가령, 썸네일 요소 검사를 해보면 썸네일 크기를 알 수 있습니다.
        예시:
        https://www.screencast.com/t/5uHL7bc8

        예시에서는 218x150px 크기입니다. 그런 경우 536x300px (218x150px의 두 배) 크기로 원하는 이미지를 하나 만들어서 해당 글의 특성 이미지로 지정하시면 원하는 대로 표시될 것 같습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.