[워드프레스] 썸네일 표시 할 때 클래스 추가하는 방법

워드프레스에서 글 목록을 표시 할 때나 개별 포스트에서 썸네일(특성 이미지)을 표시 할 때 보통 the_post_thumbnail 함수를 사용하는데 이 함수를 이용해 클래스(class)를 추가하는 방법을 알아봅시다.

the_post_thumbnail

the_post_thumbnail 함수의 기본 사용법은 아래와 같습니다.

the_post_thumbnail( [이미지사이즈], [추가설정] )

이미지사이즈

이미지사이즈 부분에는 post_thumbnail, medium, large, full 과 같은 기본적으로 설정된 이미지 사이즈나 사용자가 직접 추가한 이미지 사이즈가 있다면 그 이름을 그대로 적으면 됩니다.

추가설정

추가설정 부분에서는 title, alt, class, src 등을 설정 할 수 있습니다. string 이나 array 형식으로 투입할 수 있습니다.

클래스 추가 방법

클래스를 추가하는 방법은 위 추가 설정 부분에서 class 항목을 투입해 주면 됩니다. 예를 들면 아래와 같습니다.

the_post_thumbnail( 'post-thumbnail', ['class' => 'entry-list-item-thumbnail'] );

이렇게 설정할 경우 the_post_thumbnail 함수를 통해 표시된 img 태그의 class 속성에 entry-list-item-thumbnail 이라는 클래스가 추가된 것을 확인 할 수 있습니다.

이제 스타일시트에서 entry-list-item-thumbnail 클래스에 원하는 설정을 넣으면 됩니다.

참고자료

• the_post_thumbnail(), WordPress Code reference