brunch

매거진 IMPREZA 테마 활용

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Nov 12. 2021

#4-4. 카테고리별 목록 템플릿 만들기 (1)

IMPREZA 테마로 카카오 블로그 따라 만들기

이번엔 글 목록이 나오는 템플릿을 만들 차례입니다.

참고사이트를 보면 글들의 목록을 주제별로 분류하여 보여주고 있습니다. 크게 네 가지 주제로 분류가 돼 있고 각 주제별로 목록 위아래에 약간 다른 콘텐츠들이 보이고 있습니다. 우선은 이 공통적인 부분(붉은색 박스)부터 만들고 차이가 나는 부분을 이후에 만들면 작업이 수월할 듯합니다.

먼저, 본격적인 제작 과정 시작 전 워드프레스의 카테고리 주소에 대해 한 번 알아보는 게 좋겠습니다.

워드프레스에서는 글을 분류를 하는 방법을 적용하게 되면 분류 자체에도 주소가 생깁니다. 이 주소는 설정 > 고유 주소에서 설정한 규칙대로 url이 만들어지게 되고요. 이 주소를 방문하면 테마의 목록을 위한 템플릿 파일(index.php < archive.php < category.php 템플릿 우선순위)에 의해 해당 주소에 맞는 콘텐츠를 불러다 표시를 해 줍니다.

그런데, 참고사이트의 기획 및 디자인을 보면 각 카테고리별로 다른 구조가 표시되는 부분이 존재합니다. 이걸 해결하려면 어떻게 해야 할까요?

첫 번째, 테마의 템플릿 파일을 이용할 경우 category.php(공통 목록 레이아웃)을 만든 다음 category-blog.php, category-events.php와 같이 각 카테고리별로 다른 레이아웃을 다르게 만들 수 있습니다. 단, 이 방법은 코드를 열어서 직접 수정을 할 수 있어야겠지요.

두 번째, 최근에는 페이지 빌더가 개발이 잘 돼 있다 보니 아예 페이지에다가 원하는 글들을 표시하고 이걸 이용하는 방법도 많이 사용합니다. 이 차이는 다음 두 주소를 보면 알 수 있을 듯합니다. 왼쪽은 페이지에서 글 목록을 만들어 구성을 한 것이고, 오른쪽은 워드프레스의 카테고리 주소를 통해 화면이 표시된 것입니다. 참고사이트의 경우 대분류에 대한 링크(카테고리 링크)는 오직 메뉴에만 나오기 때문에 이런 방법도 가능해 보입니다. 기본 리스트 화면도 디자인을 통일시켜 놨기에 혹시 어딘가에 있을 카테고리 링크 버튼을 눌러서 주소를 열어도 크게 이질감이 없을 듯합니다.

저의 경우는 Impreza 테마에는 처음 언급한 category.php를 기반으로 각 카테고리별로 다른 템플릿을 노출하는 방법과 유사한 방법을 적용할 수 있어서 아래 제작 과정 소개에는 이 방법을 쓰도록 하겠습니다.

> 각 카테고리별 템플릿을 따로 제작해서 적용

1. 공통적인 구조 제작 (타이틀 섹션 + 목록 + 태그들)

네 종류의 주제별 글 목록에서 공통적으로 등장하는 붉은 박스 부분부터 제작을 해 봅니다.

이전에 single-post 템플릿 중에 공통부분이 존재합니다. 타이틀 부분과, 오른쪽 태그가 나오는 부분인데요 이렇게 재활용이 가능한 부분이 있다면 섹션을 페이지 빌더의 템플릿으로 저장을 한 다음 다른 곳에서 재 사용을 하면 편리합니다.

Single Post의 섹션 편집을 누르면 박스 안에 톱니 모양의 버튼이 존재합니다. 'Save as template'를 클릭해서 템플릿 이름을 지정후 저장합니다.

목록 화면들을 위한 기본 템플릿을 제작하기 위해 'Archive'라는 콘텐츠 템플릿을 새로 만들었습니다. 저장된 템플릿을 사용하기 위해 좌상단에 있는 버튼을 클릭하면 위에서 저장한 Section-xxx 템플릿들이 보이는데요 각각 클릭하면 페이지 빌더 편집기에 저장했던 구조대로 추가가 됩니다. css 정의들 중에서도 재 사용이 필요한 태그에 대한 스타일 부분을 복사해서 적용해 줍니다.

복사된 템플릿 구조를 토대로 이제 'Archive' 템플릿만의 편집을 할 차례입니다.

타이틀 섹션에서 카테고리의 이름의 태그를 h1으로 변경(font size 조정)을 했고, 카테고리의 설명글을 불러올 수 있는 요소로 'Post Content' 요소를 사용했습니다. 그 아래에는 칼럼 위에 타이틀이 나오게 되는데 이를 위해 로우를 하나 추가해 줬습니다.

이제 태그 왼쪽으로 카테고리의 글들(페이지당 5개씩)을 디자인대로 표시하기 위해 그리드(Grid) 디자인을 추가해야 합니다. 참고사이트의 목록 디자인을 참고해 보면, 글이 각각의 공간을 가지고 카드 형식으로 표시되고 있습니다. 내 공간을 가지려면 가장 먼저 요소들을 감싸는 테투리가 되는 요소를 넣는 게 중요합니다.

기본 카드 구조(흰 배경에 테두리가 있는 박스)가 만들어진 다음에는 이제 필요한 요소를 하나씩 추가하면 되겠네요.

목록 디자인이 완료가 되었다면 이제 페이지당 5개씩 글 리스트가 표시되도록 해야 합니다. Grid 화면 요소를 넣고, 그리드 레이아웃을 위에 만든 'Archive basic grid'를 지정하고, 1열로 간격은 16px로 설정하면 디자인대로 리스트가 표시될 겁니다. (※ 한 페이지에 몇 개의 글이 나오는가에 대한 기본적인 개수는 설정 > 읽기에서 설정한 값이 적용됩니다.)