워드프레스 썸네일 설정:Generatepress무료 테마

오늘은 워드프레스 썸네일을 설정하는 방법을 정리해 보겠습니다. 지금 제가 운용하고 있는 워드프레스 블로그는 Generatepress 무료 테마를 사용하고 있는데요, 썸네일 없이 글만 작성하고 있으니 뭔가 허전해 보여서 오늘 날을 잡고 한번 도전을 해보았습니다.

저와 같이 워드프레스 초보분들은 매우 막막하실 텐데 같이 한번 해보시면 금방 썸네일을 추가하실 수 있습니다.

썸네일이란?

‘썸네일’은 원래 큰 이미지나 비디오를 작은 버전으로 축소한 것을 말합니다. 주로 웹페이지나 멀티미디어 파일 관리에서 큰 파일을 일일이 열어보지 않고도 내용을 미리 파악할 수 있게 도와주는 작은 이미지를 뜻합니다.

이는 사용자가 콘텐츠를 빠르게 둘러보고 원하는 정보를 쉽게 찾을 수 있게 해 주며, 데이터 사용량을 절약하고 로딩 시간을 단축하는 효과도 있습니다.

최근에는 썸네일을 보고 그 콘텐츠를 클릭할지 말지 결정하게 하는 중요한 요인의 역할도 합니다.

워드프레스 썸네일 설정 작업 순서

저는 말씀드린 것과 같이 Genaratepess 무료 테마를 사용하고 있으므로, 추가 CSS에 코드를 삽입하는 방법을 사용하겠습니다. 유료 테마를 구매하면 좀더 쉽게 할 수 있겠지만, 그건 추후에 해보려고 합니다.

순서는 아래와 같습니다.

글을 작성하는 편집기 페이지에서 오른쪽 밑에 있는 특성 이미지 칸에 원하는 썸네일 이미지를 추가해줍니다. 아래와 같은 형태의 칸입니다.

이렇게 특성 이미지를 넣고 나면 Home 화면과 포스트 페이지에 아래와 같이 썸네일 이미지가 매우 크게 나타납니다. 이렇게 해서는 썸네일 역할을 할 수가 없겠죠.

우선은 포스트 상세 페이지에서 제목 밑에 나오는 썸네일 이미지가 안 보이게 해주어야 합니다. 이를 위해 워드프레스의 대쉬보드-외모-사용자 정의하기-추가 CSS 순서로 클릭해 줍니다.

다음으로 CSS 코드를 아래와 같이 넣어 주겠습니다.

.single-post .wp-post-image {
    display: none;
}

한번 테스트해 보시고요, 혹시나 작동이 안 하는 경우는 썸네일 이미지에 적용된 CSS 클래스나 ID가 위의 코드와 달라서일 수 있습니다.
그럴 경우는 썸네일 이미지에서 마우스 우클릭해서 ‘검사’라는 메뉴를 실행합니다. 그러면 저의 경우는 아래와 같이 표시되는데요. 중요한 부분은 아래 노란색 음영 표시한 곳입니다.
확인해 보시고 “wp-post-image” 부분이 저와 다르다면, 그것만 따로 복사해서 위의 코드에 넣어주시면 됩니다.

<img width="592" height="593" src="https://treekim.co.kr/wp-content/uploads/2024/02/썸네일.webp" class="attachment-full size-full wp-post-image" alt="" itemprop="image" decoding="async" fetchpriority="high" srcset="https://treekim.co.kr/wp-content/uploads/2024/02/썸네일.webp 592w, https://treekim.co.kr/wp-content/uploads/2024/02/썸네일-300x300.webp 300w, https://treekim.co.kr/wp-content/uploads/2024/02/썸네일-150x150.webp 150w, https://treekim.co.kr/wp-content/uploads/2024/02/썸네일-120x120.webp 120w" sizes="(max-width: 592px) 100vw, 592px">

다음으로 Home 화면에서의 썸네일 이미지를 조정해 보겠습니다. 추가 CSS에 아래의 코드를 입력합니다.
이는 글 제목 위에 크게 나타나는 썸네일 이미지를 조정해서, 왼쪽에는 썸네일을 배치하고 오른쪽에 글이 표시되도록 만들어줍니다.

.post-image {
    float: left;
    margin-right: 30px;
}
.post-image img {
    width: 170px; 
    height: auto;
    border: 1px solid #000000;
    border-radius: 7px;
}
.post {
    overflow: hidden;
}
.entry-summary {
    padding-left: 30px;

위와 같이 입력하고 나면 아래와 같은 워드프레스 썸네일을 만들 수 있습니다.

위의 코드에서 조금씩 수정해 주면 여러분들이 원하시는 조정을 할 수 있습니다.
전체 코드의 상세 내용은 아래와 같습니다. 클릭하시면 큰 이미지로 볼 수 있습니다.

어떠신가요? 그리 어렵지 않죠? 전체 코드를 한 번 더 아래와 같이 쓰겠습니다.

.single-post .wp-post-image {
    display: none;
}
.post-image {
    float: left;
    margin-right: 30px;
}
.post-image img {
    width: 170px; 
    height: auto;
    border: 1px solid #000000;
    border-radius: 7px;
}
.post {
    overflow: hidden;
}
.entry-summary {
    padding-left: 30px;

위의 코드 입력 후 워드프레스 썸네일이 이쁘게 잘 만들어졌다면 성공입니다. 혹시 잘 안되는 부분이 있다면 저에게 댓글을 남겨주시고요