워드프레스 OnePress 테마 블로그 페이지 썸네일을 정사각형 모양으로 만들기

무료 워드프레스 중 하나인 OnePress 테마의 블로그 페이지(최신 글 페이지)와 카테고리, 태그 등 아카이브 페이지에서 썸네일은 직사각형 모양으로 표시됩니다.

썸네일을 정사격형으로 바꾸고 싶은 경우 간단한 CSS 코드를 사용할 수 있습니다.

워드프레스 OnePress 테마 블로그 페이지 썸네일을 정사각형 모양으로 만들기

무료 워드프레스 원프레스(OnePress) 테마의 블로그 페이지에서는 썸네일이 가로 225px, 세로 150px 크기로 설정되어 있습니다. 유료 버전에서는 이런 부분을 자유롭게 지정할 수 있을 수도 있지만, 무료 버전에서는 블로그 페이지를 세팅할 수 있는 옵션이 제공되지 않습니다.

썸네일의 크기를 변경하고 싶은 경우 CSS를 사용할 수 있습니다. 예를 들어, 썸네일 이미지의 너비와 높이를 동일하게 설정하려면 다음과 같은 CSS 코드로 테스트할 수 있습니다.

/* 
 * OnePress Theme Modification:
 * Ensures that thumbnail images on blog and archive pages are displayed as squares.
 */
 
.list-article-thumb img {
    width: 225px;         /* Set the desired width for the thumbnail */
    height: 225px;        /* Height should match the width to create a square shape */
    object-fit: cover;    /* Ensures the image fills the container without distortion, cropping if necessary */
}

상기 코드를 모양 (외모) » 사용자 정의하기 » 추가 CSS에 추가합니다.

이 코드를 적용하면 PC에서 다음 그림과 비슷하게 썸네일이 변경됩니다.

태블릿 기기에서는 다음과 같이 표시됩니다.

모바일 기기에서는 다음과 같이 표시됩니다.

보다 상세하게 제어하고 싶은 경우 CSS 미디어 쿼리를 사용하여 기기 해상도에 따라 다른 스타일을 지정할 수 있습니다. 기본적인 CSS를 이해하면 어느 정도 커스텀이 가능할 것입니다.

마치며

이상으로 워드프레스 무료 테마 중 하나인 OnePress 테마의 최신 글 페이지와 카테고리 등 아카이브 페이지에서 썸네일 모양을 바꾸는 방법에 대하여 살펴보았습니다.

워드프레스에는 정말 많은 워드프레스 테마가 있습니다. 전문적인 뉴스, 매거진 사이트와 같이 꾸미고 싶은 경우에는 뉴스페이퍼(Newspaper)와 같은 테마를 사용하면 편리하게 원하는 뉴스/매거진 사이트를 만들 수 있습니다.

랜딩 페이지를 쉽게 만들고 싶은 경우에는 엘리멘터나 Divi 테마 등을 사용하면 편리합니다.

워드프레스로 쉽게 랜딩 페이지 만들기 (feat. 엘리멘터, GeneratePress, Divi) - 워드프레스 정보꾸러미

참고

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교