최근 Divi Resources에 재미있는 글이 하나 올라와, 요약해 소개합니다.
Divi 테마 사용법과 관련된 글인데요. 더 정확히는 Divi 테마 기반에서 카테고리 아카이브 페이지를 만드는 방법에 관한 글입니다. 최근 Divi 빌더에 새로 도입된 테마 빌더(Theme Builder)의 활용법을 잘 보여주는 글이기도 하구요.
기존 방식
지금까지 Divi 테마에서 카테고리 페이지 만드는 일은 통상적인 다른 워드프레스 테마에서의 방식과 별반 다를 게 없없습니다. 커스텀 카테고리 목록이 필요하다면, 테마 디렉터리 내에 category.php 템플릿 파일을 만들고 직접 수정하는 방식이었죠.
(같은 벤더 제품이지만) Divi와는 달리, Extra 테마에는 “카테고리 빌더”라고 하여 카테고리 페이지를 만드는 빌더 기능이 별도로 제공되었지만, Divi 테마엔 이 카테고리 빌더 기능이 따로 제공되지 않았습니다. 사실 이 카테고리 빌더는 Divi와 Extra 테마를 구분 짓는 가장 중요한 기능 중 하나이기도 했구요.
테마 빌더 방식
하지만 최근 Divi 테마에 새로 도입된 테마 빌더(Theme Builder)로 인해 상황이 조금 달라 졌습니다. 이제 Divi에서도 직접 템플릿 파일을 건드리는 대신 빌더 기능을 사용해 카테고리 페이지 및 태그 등 각종 아카이브 페이지를 손쉽게 디자인할 수 있는 길이 생겼습니다.
간단하게 한번 만들어 보도록 하죠.
관리자 대시보드 “Divi” 메뉴에서 “Theme Builder” 하위 메뉴를 클릭합니다. 아래와 같이 테마 빌더 기본 화면이 나옵니다.
여기 “Default Website Template” 이라고 되어 있는 부분이 현재 Divi 테마의 기본 템플릿입니다. 예전엔 이게 전부였지만, 이제 “Add New Template” 으로 새로운 템플릿을 추가할 수 있게 되었죠.
“Add New Template”을 클릭하여 새로 템플릿을 하나 추가해 보겠습니다. (이 글을 작성하는 현재, Divi 최신 버전에 한글이 약간 깨지는 버그가 있어 영문으로 진행합니다)
“Add New Template”을 클릭하면 “Template Settings” 창이 뜹니다.
이 창에서는 어떤 템플릿을 어떤 영역에 적용할지를 맵핑할 수 있습니다.
아래로 스크롤해 보면 “Archive Pages” 영역이 표시됩니다. 여기서는 카테고리 페이지와 맵핑할 것이기에 “All Category Pages”를 체크하고 창 하단의 “Create Template” 버튼을 클릭합니다.
그러면 이제 테마 빌더에 All Category Pages 템플릿이 하나 추가되었네요. 사이트의 모든 카테고리 페이지는 이제 이 템플릿을 사용하게 되겠죠.
이제 이 템플릿을 편집하여 카테고리 목록 페이지를 디자인하면 됩니다.
템플릿은 크게 헤더(Header) 부분과 바디(Body) 부분, 그리고 푸터(Footer) 부분으로 나뉘는데, 여기서는 헤더와 푸터 영역은 기존(디폴트) 것을 그대로 사용하고 바디 영역만 변경하기로 하겠습니다.
All Category Pages 템플릿의 “Add Custom Body” 버튼을 클릭합니다. 그런 다음 “Build Custom Body” 버튼을 누릅니다. 기존 라이브러리에서 가져올 수도 있겠지만, 아직 우리는 만들어 놓은 템플릿이 하나도 없기에 새로 만드는 방법을 택합니다.
여기서 “Edit” 버튼을 누르면 Divi 테마 사용자들에겐 익숙한 빌더 모드로 넘어 갑니다.
이번에도 마찬가지로 처음부터 새로 만들어 보기 위해 “Start Building”을 클릭합니다.
빌더에서 “Insert Row” 하여 새 행을 하나 삽입하고,
이어 “Insert Module”에서 “Blog” 모듈을 선택하여 추가해 보겠습니다.
“Blog” 모듈은 Divi에서 기본으로 제공되는 모듈로서, 포스트 목록을 보여주는 기능을 담당합니다.
지금까지 따라 했으면 다음과 같이 빌더 모드에서 화면에 글 목록이 표시되고 “Blog Setttings” 창이 표시될 것입니다.
이제 여기 “Blog Setttings” 창에서 화면에 표시될 부분을 설정해 주면 되겠죠?
다른 건 설정 창에 나와 있는 대로 조정하면 되며, 특히 여기서 중요한 부분은 “Posts Per Current Page” 값을 “YES”로 체크해야 하는 부분입니다. 이 값을 체크해야만 카테고리 페이지에서 지정한 카테고리의 포스트들만 불러오게 됩니다. 예를 들어, “뉴스” 카테고리 페이지라면 뉴스 카테고리의 글들만 표시하게 되죠.
내친 김에 “Blog Settings” 창의 “Design” 탭에서 “Layout”을 그리드(Grid) 방식으로 한번 변경해 보겠습니다.
그러면 이제 빌더 창에서 블로그 목록이 그리드 레이아웃 방식으로 변경됩니다.
저장하고 사이트에서 아무 카테고리 페이지나 한번 접속해서 확인해 보세요!
카테고리 페이지가 그리드 방식으로 변경된 것을 알 수 있습니다. 또한 카테고리 페이지마다 자기 카테고리의 포스트들만 표시되는 것두요.
이런 식으로 카테고리 페이지를 사용자가 빌더 방식을 통해 입맛대로 구현할 수 있다는 게 Divi 테마 빌더의 장점입니다.
물론 아직은 지원하는 모듈이 많지 않고 미리 만들어서 제공되는(pre-made) 템플릿도 적어 당장 써먹기엔 부족함이 있습니다만, 앞으로 Divi가 테마 빌더에 대한 지원을 계속할 것이므로 조만간 좀더 멋진 방법들이 나오리라 기대합니다.
구텐베르크(Gutenberg)가 촉발시킨 ‘빌더 전쟁’이 Divi나 Elementor 같은 유명 빌더 기반 벤더들에게 큰 영향을 미치고 있는 듯 합니다. 알다시피 Elementor에도 테마 빌더 기능이 추가되었고 조만한 구텐베르크도 페이지 단위를 넘어 테마 단위의 블럭을 지원할 예정이니 테마 빌더 시장의 판도가 점점 더 재밌어 질 듯 하네요.
Divi 테마를 사용하시는 분들이라면 테마 빌더도 한번 사용해 보세요! 🙂
참고자료
How to Create a Category Page Template for your Blog Using the Divi Theme Builder
0 thoughts on “Divi 테마에서 카테고리 페이지 만들기”