워드프레스 GeneratePress 테마 글 목록 디자인하는 법(아카이브 커스텀)

워드프레스 사이트를 GeneratePress 테마를 이용하여 구성할 때, 사이트 블로그 메인에 나오는 글 목록의 디자인을 수정하고 싶을 때가 있을 것입니다.

이 글 목록 디자인을 잘 해놓는다면, 사용자에게 내 사이트 글을 더 잘 보이게 하여 더 많은 트래픽과 체류시간을 확보할 수 있습니다.

오늘은 GeneratePress 테마 글 목록 디자인을 어떻게 할 수 있는지 그 방법에 대해 알아보도록 하겠습니다.

참고로, 워드프레스 사이트에 GeneratePress 테마가 적용되어 있어야 하고, 유료 버전 라이센스가 있어야 가능하겠습니다.

GeneratePress 테마 유료 버전

GeneratePress 테마에 관해서는 제가 가장 많이 사용하고 있는 테마 중 하나여서, 이 테마에 대해 많은 글을 썼는데요.

이 테마의 장점에 대해 간략하게 설명해보자면, 수익형 워드프레스 블로그를 운영하기 위한 현존하는 가장 최상의 유료 테마라고 말씀드릴 수 있을 것 같습니다.

가장 가볍고 빠른 테마 적용과 심플한 구조와 레이아웃을 제공하고 있습니다. 무엇보다 초보자가 처음 테마를 적용하여 사용할 수 있다는 것이 큰 장점이라고 생각이 됩니다.

수익형 블로그를 운영하는데 있어서 가장 중요한 것이 페이지 로딩 속도인데요. 이 페이지 속도를 가장 빠르게 최적화한 테마라고 볼 수 있습니다.

GeneratePress 테마 유료 버전 추천하는 이유

빠른 속도와 쉬운 테마 적용에 맞추어져 있기에, 정교하고 퀄리티 높은 웹사이트 구성에는 잘 맞지 않을 수 있습니다.

블로그를 운영함에 있어서는 유료 버전을 사용하면, 충분히 웬만한 기능 구현과 디자인이 가능하다는 점에서 제가 추천드리는 테마 중 하나입니다.

GeneratePress 테마 유료 버전 확인하러 가기

GeneratePress 테마 글 목록 디자인을 하기 위한 조건

GeneratePress 테마 글 목록 디자인을 하기 위해 먼저 해야 할 설정이 있는데요.

바로 유료 버전 설치와 Site Library 테마 템플릿을 적용해야 합니다.

1. GeneratePress 유료 버전 설치

위에서 언급하였다시피, GeneratePress 테마 글 목록 디자인을 하려면 유료 버전이 필요합니다. 아래 글을 참고하여서 유료 버전 라이센스를 구입 및 설치를 진행해주시면 되겠습니다.

GeneratePress 테마 유료 버전 설치 및 활성화 방법 보러가기

2.GeneratePress Site Library 테마 템플릿 적용

글 목록 디자인을 설정하려면 Site Library라는 테마 템플릿이 활성화가 되어야 합니다.

아래 글을 참고하여 Site Library 기능을 활성화하시면 되겠습니다.

GeneratePress 테마 Site Library 활성화하는 법

GeneratePress 테마 글 목록 디자인하기

워드프레스 관리자 페이지에서 [모양(외모) > 사용자 정의] 메뉴에 들어가줍니다.

좌측 메뉴에서 [Layout > Blog]로 이동합니다. 위 화면에 보이는 파란색 글씨로 된 Loop Template Element를 클릭합니다.

그러면 내가 적용한 테마 템플릿에서 적용된 다양한 Element 요소를 확인할 수 있습니다. 글 목록 디자인 편집은 Blog/archive loop template 요소에서 할 수 있습니다.

‘편집’을 눌러서 편집 화면으로 가줍니다.

다음과 같이 글의 제목, 발행날짜, 표시될 썸네일 이미지, 글 설명 요약글, 버튼 등 글 목록 아카이브를 구성하는 요소에 대한 디자인을 세부적으로 설정을 할 수 있습니다.

제목 글자 디자인 설정

제목은 가독성이 좋고, 보기 편하게 글자 크기가 커야 좋습니다.

우선 제목에 해당하는 요소를 클릭합니다.

Font SIZE는 40으로 설정하였습니다. Font Weight는 600 혹은 Bold가 가장 무난한 것 같습니다.

썸네일 이미지 설정

저는 썸네일 이미지를 조금 더 작게 설정하려고 합니다.

이미지 요소를 먼저 마우스로 클릭하여 선택을 해줍니다.

우측 메뉴의 Block Settings에서 Size를 최대 사이즈로 설정하고 WIDTH는 80으로 줄여줍니다.

적절한 Padding과 Margin값도 설정을 해줍니다.

버튼 디자인 설정

Borders에서 모서리 둥금을 처리할 수 있으며, Spacing에서는 버튼의 Margin, Padding 등을 지정하여 버튼의 모양을 설정할 수 있습니다.

다음과 같이 디자인을 바꾸어 좀 더 클릭을 할 수 있게 만들어보았습니다.

수정된 GeneratePress 테마 글 목록 디자인

다시 [외모(모양) > 사용자 정의]로 돌아가면, 다음과 같이 수정된 글 목록 디자인을 확인할 수 있습니다.

이렇게 GeneratePress 테마 유료 버전을 이용한 글 아카이브 디자인을 해보았는데요. 좀 더 사용자가 보기 쉽게 설정한다면, 더 유익한 사용자 경험을 제공하는 블로그를 구성할 수 있을 것입니다.

아래 GeneratePress 테마를 이용한 수익형 블로그 최적 설정을 위한 방법과 팁도 확인해보시고 적용하시면 도움이 되실 것이라 생각이 듭니다.

<추가로 볼만한 글>

워드프레스 GeneratePress 테마로 글 목록 요약글 글자수 설정방법 보러가기 GeneratePress 테마 이용한 연관 글 추가 방법 보러가기