GeneratePress 테마 무료 버전: 컬럼 레이아웃으로 포스트 배열하기

속도가 빠른 것으로 평가 받고 있는 GeneratePress 테마는 무료 버전과 유료 버전으로 제공되고 있습니다. 유료 버전에서는 커스텀이 비교적 자유롭지만 무료 버전에서는 테마 관련 옵션이 제한적이어서 커스텀이 제한적입니다.

이 블로그에 현재 GP 유료 버전이 사용되고 있습니다. 기본적인 CSS를 이해하고 있다면 이 사이트와 비슷하게 레이아웃을 만들 수 있습니다.

무료 버전의 경우에는 CSS, PHP, 자바스크립트 등에 대한 약간의 지식이 있어야 어느 정도 원하는 대로 커스터마이징이 가능할 것입니다. 이 글에서는 간단한 커스텀 CSS를 사용하여 무료 GeneratePress 테마에서 최신 글 페이지와 아카이브 페이지에서 포스트를 그리드 레이아웃으로 나열하는 방법에 대하여 살펴보겠습니다.

GeneratePress 테마 무료 버전: 컬럼 레이아웃(그리드 레이아웃)으로 포스트 배열하기

GeneratePress 테마 유료 버전에서 포스트를 컬럼 레이아웃으로 표시하기

제너레이트프레스 테마는 속도가 빠르지만 레이아웃을 원하는 대로 꾸미려면 유료 버전을 고려할 수 있습니다. 가령, 다음과 같이 컬럼으로 표시되는 형식으로 쉽게 설정이 가능합니다.

워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » Layout » Blog에서 Featured Images의 Archives 섹션에서 Display posts in columns를 체크하여 선택하고 Columns에 열 개수를 지정하면 지정된 열 개수로 포스트가 컬럼 레이아웃으로 표시됩니다.

메이슨리 그리드(Masonry Gird) 레이아웃으로 포스트를 나열하고 싶은 경우에는 Display posts in masonry grid 옵션을 체크하면 됩니다.

GeneratePress 무료 버전에서 포스트를 컬럼 레이아웃으로 표시하기

GP 무료 버전의 경우에는 약간의 커스텀 CSS 코드를 사용하여 쉽게 컬럼 레이아웃으로 만들 수 있습니다.

외모 » 사용자 정의하기 » 추가 CSS 섹션에 다음과 같은 사용자 지정 CSS 코드를 추가하면 위의 그림과 같이 컬럼 레이아웃으로 표시됩니다.

/* Apply grid layout to posts on home page in GeneratePress theme (free version). Grid items will automatically fill up rows and create new ones as needed. Grid columns will have a minimum width of 300px and a maximum width of 1fr (fraction of the available space). Gap between grid items is set to 1.5em. */

.home #main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5em;
}

/* Apply grid layout to posts on archive pages in GeneratePress theme. Grid items will automatically adjust to fit the grid container with a minimum width of 300px and a maximum width of 1fr. Grid will adjust the number of columns based on the width of the grid container and the maximum width of the grid items.   Gap between grid items is set to 1.5em. */

.archive #main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5em;
}

만약 특성 이미지 아래로 제목을 배열하고 싶은 경우에는 다음과 같은 코드로 테스트해볼 수 있습니다.

.inside-article {
  display: flex;
  flex-direction: column;
}

.inside-article .entry-header {
  order: 2;
}

.inside-article .post-image {
  order: 1;
}

.inside-article .entry-summary {
  order: 3;
}

위의 코드를 추가하면 다음과 비슷하게 포스트가 나열될 것입니다.

사이드바 레이아웃 설정에서 사이드바가 표시되지 않도록 설정하면 여러 개의 컬럼으로 포스트가 나열됩니다.

마치며

이상으로 GeneratePress 무료 버전에서 심플한 CSS 코드를 사용하여 최신 글(홈 페이지)과 아카이브 페이지(카테고리 페이지와 태그 페이지 등)에서 포스트를 컬럼 레이아웃으로 표시하는 방법에 대하여 살펴보았습니다. 위의 방법을 참고하여 코드를 보다 정교하게 만들어 원하는 레이아웃으로 만들어보시기 바랍니다.

참고로 유료 버전에서는 Elements 기능을 사용하여, 엘리멘터 페이지의 테마 빌더보다는 불편하지만, 사이트의 각 섹션을 커스텀하는 것이 가능합니다.

• GeneratePress 테마: 페이지마다 다른 헤더/사이드바/푸터 사용하기

참고

• GeneratePress 테마: 카테고리/태그 템플릿 레이아웃 커스터마이징 방법
• 클라우드웨이즈로 워드프레스 시작하기 및 도메인 연결하기
• 워드프레스 뉴스페이퍼 라이선스 해제 및 재활성화