#4-4. 카테고리별 목록 템플릿 만들기 (2)
IMPREZA 테마로 카카오 블로그 따라 만들기
#4-4. 카테고리별 목록 템플릿 만들기 (1) 글에서 이어집니다.
공통된 목록 화면이 지난번 완성이 됐습니다. 이제 각 카테고리별로 다른 콘텐츠가 나오도록 각 카테고리의 템플릿을 만들어 볼 차례입니다.
2. Blog 카테고리용 템플릿 만들기
Archive용 공통 목록 템플릿이 이미 제작이 됐으므로 이걸 재사용합니다. Impreza > Content templates 목록에서 템플릿 제목에 마우스 커서를 올려보면 'Duplicate' 버튼이 있습니다. 이걸 클릭하면 같은 구조의 템플릿이 하나 복사가 됩니다.
단, css 적용 내용(페이지 빌더 톱니 모양을 눌러서 적용한 것)은 복사가 되지 않는데요, 이 시점에서 앞서 적용한 css들을 한 번 정리하는 작업을 했습니다. 'Single Post'와 'Archive' 콘텐츠 템플릿에 적용된 css, 그리고 이후 각 카테고리 템플릿에서 공통으로 적용할 css들을 Theme option > Custom code로 이동했습니다. 이러면 매번 각 템플릿에다가 똑같은 css를 적어 넣을 필요가 없게 됩니다.
Blog 카테고리용 템플릿에 추가되어야 할 섹션을 체크해 보니 크게 3개의 섹션입니다.
- 기본 목록 위에 대표 콘텐츠들을 캐러셀 형태로 표시되는 섹션
- 브런치 매거진(외부 링크)으로 연결되는 캐러셀이 나오는 섹션
- 브런치 글(외부 링크)로 연결되는 글 목록들이 나오는 섹션
1) 블로그 카테고리의 대표글 캐러셀
대표 글들 목록은 앞서 메인 페이지에서 표시했던 구조와 동일합니다. 메인 페이지에서 섹션을 복사한 다음 블로그용 카테고리 템플릿에서 재 사용을 하면 되겠습니다.
그다음 최신 글을 불러오되, 블로그의 글들 중에서 'featured'라는 태그를 가진 글들만 가져오게 한다면 원하는 글을 상단에 노출시킬 수 있게 됩니다. 메인 페이지에서는 전체 글의 최신 글들을 보여줬다면 여기서는 카테고리와 태그를 이용해서 가져올 글들을 제한하는 겁니다.
추가로 메인 페이지에서 좌우 버튼을 눌러서 캐러셀이 동작하게 했던 스크립트도 카테고리에서 이용되게 해야겠지요. 간단한 컨디션 체크용 조건문(is_category())을 추가함으로써 해결이 가능합니다.
여기까지 하면 첫 번째 섹션은 해결이 되겠습니다. 새로 만든 Blog 카테고리만의 템플릿을 적용하려면 글 > 카테고리 편집에서 이 카테고리만의 콘텐츠 템플릿을 지정해 주기만 하면 됩니다. (테마 옵션에서 지정한 목록 레이아웃보다 우선권을 가짐)
2) 외부 링크로 가는 글들 캐러셀 섹션 (메거진 링크들)
링크를 클릭하면 새 창에서 외부 링크의 주소가 열리는 글들이 등장합니다. 이걸 적용하는 방법으로 두 가지를 생각해 볼 수 있습니다.
가. 외부 링크용 글 형식(post type)을 하나 추가해서 관리를 하는 방법
나. 위 대표 글들과 마찬가지로 특정 카테고리나 태그를 지정해서 해당 분류의 글들은 지정한 외부 링크로 열리게 하는 방법
좀 더 쉽게 바로 사용할 수 있는 방법으로 [나] 방법을 사용해 보겠습니다.
여기서 태그를 사용하면 전체 태그들이 보이는 곳이 있으니 사용이 어렵겠네요. 카테고리 분류는 주 메뉴에서만 링크가 등장하고 있으니, 외부 링크용 글들을 따로 묶을 수 있도록 카테고리 분류를 이용하면 될 듯합니다. > brunch-magazine / brunch-post
(※ 한 번 더 확인해 보니 Open Source 카테고리에서도 외부 링크들이 나오네요. 나중에 추가하겠습니다. > Github)
두 섹션에 적용할 그리드 디자인을 적용해 보려면 우선 콘텐츠가 있어야 하므로, 외부 링크용 두 카테고리에 임시 글들을 생성해 줬습니다. FakerPress를 사용하면 되겠습니다.
외부 링크로 가는 글이 되려면 우선 외부 링크를 어딘가에서 적을 수 있어야겠지요. 이 정보는 custom field라고 해서 글의 부가 정보로 저장이 되는 추가 정보 형태로 입력이 되어야 하는데, Impreza의 경우는 이미 외부 링크용 글들을 쉽게 만들 수 있도록 이와 관련된 편집 화면 메타 박스를 개발이 돼 있습니다. 글 편집할 때 Custom Link 필드에 연결할 url 주소를 적어주기만 하면 일단 글은 준비가 됩니다.
다음으로 카드 모양의 그리드를 하나 만들어 줘야 합니다. 카드 모양 그리드는 이미 만들어진 게 있었습니다. 이걸 복사해서 차이나는 부분만 편집하도록 합니다. 이미지가 공간 안으로 들어가는 부분과 위쪽 타이틀과 설명문이 자체 높이를 가질 수 있도록 wrapper를 하나 더 추가했습니다.
기존 grid와의 차이가 있다면 바로 아래 부분인데요, 글을 클릭했을 때 글의 상세페이지로 가는 게 아니라, 아까 커스텀 주소로 입력한 url이 새 창으로 열리게 조치를 해 줍니다. 즉, 이 그리드는 기본적으로 클릭할 때 커스텀 주소들 사용이 되도록 약속을 하는 것입니다.
적용할 섹션의 구조가 위에 추가했던 Featured Posts 섹션과 거의 같습니다. (그리드 디자인, 배경색 변경, 타이틀 옆 텍스트만 다름) 위 섹션을 하나 더 추가한 다음 그리드 디자인만 새로 만든 것으로 변경 후 저장합니다. 그리고 현재까지 적용한 내용을 확인해 보면, 클릭하면 새 창으로 열리는 캐러셀이 잘 적용된 것을 볼 수 있습니다. 단, 좌우 버튼을 클릭하면 이 페이지에 있는 다른 캐러셀도 같이 동작을 하는 문제가 발생하네요.(동일한 클래스에 동일한 구조이므로) 스크립트를 수정해 줘야 할 듯합니다. jQuery에는 class명으로 요소를 찾을 수 있는 다양한 방법이 있습니다. 클릭한 요소(this)에서부터 가까운 부모 섹션을 찾은 다음 그 안에서 숨겨진 좌우 버튼을 찾는 방법으로 다시 수정을 했습니다. 즉, 좌우 버튼과 같은 섹션에 있는 캐러셀만 동작을 하도록 수정을 한 것입니다.
3) 외부 링크로 가는 글들 캐러셀 섹션 (브런치 글 링크들)
글의 상세 페이지용 템플릿을 만들 때 그리드 3개를 좌우 버튼으로 노출하던 구조를 다시 사용하면 될 듯합니다.
복사된 섹션에서 타이틀과 불러올 글을 변경합니다. 여기서도 커스텀하여 만든 캐러셀 구조를 사용할 수 있어야 하니 single 글에서 작동하는 스크립트를 여기서도 작동하게 해 줘야 합니다. 블로그 카테고리에서만 추가 사용되므로 is_category('blog')라는 체크 방법을 추가하면 되겠습니다.
하얀 박스 형태의 그리드 디자인을 만들어 적용해야 할 차례입니다. 먼저 참고 사이트를 통해 디자인을 확인해 보겠습니다.
공간 내에 3가지 정보가 1열로 나열이 돼 있어야 하고, 모바일에서는 타이틀은 한 줄로, 나머지는 붙어서 세로로 표시가 되는 구조입니다.
공간(padding)을 가진 폭 내에서 세 정보를 세로 정렬로 노출을 할 때에는 flex css 스타일을 사용하면 편리합니다. 저는 이렇게 만들어서 적용을 해 봤습니다. 여기서 사용한 Horizontal Wrapper는 flex 스타일을 적용하는 구조라 보시면 되겠습니다.
3. Events 카테고리용 템플릿 만들기
먼저, 참고 사이트로부터 디자인을 확인해 봅니다. 상단에는 대표 글이 캐러셀로 표시되는데 여기서는 1 칼럼으로 돌아가는 구조입니다. 그리고 사이드 칼럼 부분에 베너 형태의 외부 주소로 가는 링크가 존재하네요.
대표 글이 보이고 리스트가 나오는 것까지는 2번의 Blog 카테고리 구조와 비슷합니다. 방금 제작한 Blog 콘텐츠 템플릿을 복사한 뒤 필요 없는 걸 제거하면 더 빠르겠습니다. 템플릿을 복사한 다음 아래 필요 없는 섹션은 제거한 다음, Featured Posts의 콘텐츠를 Events 카테고리의 것으로 설정합니다. 그리드 디자인은 동일하되 캐러셀 구조에서 1개씩 전환이 되도록 칼럼 수를 조정합니다.
오른쪽 태그가 나오는 구조 아래 베너 형태의 콘텐츠가 들어가야 합니다. (※ 베너는 시간 관계상 이미지로 대체했습니다) 기존에 다른 목록 템플릿에서는 오른쪽의 3/12 칼럼 내 영역 자체에 css를 이용해서 흰 배경의 공간을 만들어 줬는데요, 여긴 아래로 붙어서 베너 콘텐츠가 또 붙어야 하는 구조이기에 수정이 필요했습니다. 그리드를 만들던 때와 마찬가지로 공간을 자체적으로 주기 위해 Vertical Wrapper를 이용하는 구조로 변경했습니다. 여기까지 하면 Events 카테고리 템플릿도 완료됩니다.
4. Open Source 카테고리용 템플릿 만들기
다른 카테고리와의 차이가 있다면 상단에 외부 주소(Github 주소)로 연결되는 캐러셀이 나오는 부분이네요. 나머지는 기본 목록 구조와 같습니다.
3번의 Events 카테고리용 템플릿을 복사해서 사용했습니다. Github 카테고리의 글들만 캐러셀에서 나오도록 하고, 디자인에 맞게 그리드를 하나 새로 만들었습니다.
만든 콘텐츠 템플릿을 Open Source 카테고리용 템플릿으로 지정하고 카테고리 주소를 열어 보니 잘 표시되는 걸 볼 수 있습니다.
5. Support 카테고리용 템플릿 만들기
이 카테고리 템플릿에서는 상단에 지원자를 위한 메일을 보내는 것을 안내하는 섹션과 맨 아래 'Support Lists' 로고들이 나오는 섹션이 추가되어야 합니다.
위쪽 섹션은 약간 카드 모양의 그리드와 유사한 모양인데요, Image + Vertical Wrapper 조합으로 만들 수 있습니다. 여기서 모바일에서는 이미지가 1:1 비율로 변형된 게 나와야 한다는 것인데 이미지를 pc용, 모바일용 두 개를 넣고 css 또는 이미지 요소의 디자인 설정 탭에서 쉽게 설정이 가능합니다.
버튼은 메일을 보낼 수 있는 링크가 걸려 있습니다. 버튼의 링크를 'mailto:email' 형태로 넣으면 클릭했을 때 기기의 기본 메일 프로그램이 자동으로 실행되도록 할 수 있게 됩니다.
거의 막바지 작업입니다. 아래쪽 로고들이 5개의 칼럼으로 나열이 되는 구조가 남았습니다. 각각의 로고 이미지를 넣어도 되고, 참고 사이트처럼 여기도 마찬가지로 pc용과 모바일용의 이미지를 따로 노출해도 되겠습니다.
마찬가지로 카테고리 설정에서 Support용 템플릿을 지정하고 해당 카테고리 주소를 열어 보면, 의도한 대로 잘 표시가 되는 것을 볼 수 있습니다.
현재까지의 작업 참고 : https://oks-dev.tk/techblog/category/blog/
기본 목록을 위한 템플릿(Archive)이 완성이 된 다음, 각 카테고리용 템플릿을 따로 만들어서 카테고리 편집 화면에서 지정할 수 있다! 이게 위 내용을 요약한 핵심입니다. 원래는 이 작업이 가능하려면 꽤 복잡한 코드 작업을 했어야 했는데요, 테마가 이 구조를 잘 활용할 수 있도록 개발이 잘 돼 있다 보니 수고로움이 훨씬 줄어든 겁니다.
이제 거의 복잡한 작업은 완료가 되었다고 판단이 되고, 나머지는 태그와 작성자의 링크를 위한 목록 화면, 그리고 검색 결과 화면을 위한 템플릿 제작이 진행되면 될 듯합니다.
다음으로 계속...
