brunch

매거진 IMPREZA 테마 활용

라이킷 11 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari May 21. 2021

#3-3. 반복 콘텐츠 뷰 만들기

IMPREZA 테마로 미디어 사이트 따라 만들기

페이지 외에 반복적으로 작성 및 노출이 될 콘텐츠가 있는 경우 이것들과 관련된 리스트나 상세페이지를 만들고, 그리고 메뉴에 노출하는 작업이 필요하게 됩니다. 이번 순서는 이 반복 콘텐츠에 대한 뷰들을 만드는 과정입니다.

먼저 사이트의 기획 의도 및 디자인을 확인해 봅니다.

모든 콘텐츠는 글(post)이라는 포스트 타입으로 작성을 하고, 각 메뉴에는 부모 카테고리들의 주소들을 표시하여 원하는 콘텐츠를 볼 수 있도록 하는 것으로 보입니다.

(보도자료는 PRESS의 하위 카테고리)

구현을 해야 할 내용을 정리해 보면,

1. 글들을 크게 4가지 부모 카테고리로 분류 (press, inside, column, multimedia)

2. 각 부모 카테고리는 하위 카테고리로 세분화할 수 있는 메뉴가 존재

3. 각 부모 카테고리별 추천태그가 있음

4. 멀티미디어는 다른 리스트와 다른 방식의 리스트가 표시 (상세 페이지가 상단에 표시)

(! 단 press의 이미지는 따로 포스트 타입을 만들어 표시한 것으로 보입니다. 이 부분은 패스했습니다)

더미 콘텐츠 만들기

해야 할 내용을 확인했고, 이에 대한 탬플릿을 만들기 위해서는 일단은 콘텐츠가 있어야겠지요. 개발 중에는 FakerPress라는 플러그인을 설치해서 더미 콘텐츠를 만들어 볼 수 있습니다. (생성된 이미지와 글은 나중에 일괄 삭제가 가능합니다)

더미 콘텐츠를 만들기 전 우선은 분류를 위한 카테고리, 태그를 만들어줍니다.

그다음, FakerPress > Posts라는 메뉴에서 각 주제별 더미 콘텐츠들을 원하는 개수만큼 만들어줍니다. (※ 카테고리, 태그, 대표 이미지, 본문 내용 등을 알아서 만들어 줌)

카테고리별 탬플릿 만들기

카테고리 목록에서 View를 클릭해 보면 해당 카테고리의 목록 주소가 표시되는데, 아직은 테마에 있는 기본적인 목록 디자인을 통해 이 카테고리의 글들이 표시되는 걸 볼 수 있습니다.

디자인대로 표시를 하기 위한 작업이 필요하겠죠. 테마 파일을 열어서 코드에서 탬플릿을 수정할 필요 없이, Impreza 테마는 이 목록에 대한 뷰(탬플릿)를 페이지 빌더를 이용해서 만들 수 있게 해 놓았습니다.

Impreza > Content templates에서 'Press Category'라는 이름으로 탬플릿을 하나 제작합니다. 카테고리 주소의 레이아웃을 빌더 요소들로 이렇게 구성을 합니다.

post title과 post content 요소는 카테고리 편집 시 적어놓은 제목과 설명문을 알아서 가져다 표시를 해 주는 역할을 합니다.

PRESS 주제의 추천 태그와 하위 카테고리 목록을 표시하는 내비게이션은 운영자는 탬플릿을 열어 수정할 필요가 없이 메뉴에서 관리를 할 수 있게 하고, 이걸 연결합니다. (※ 메뉴 관리에서 태그 목록이 안 보이는 경우에는 화면 우상단 '화면 옵션'을 누르면 체크가 가능합니다)

마지막으로 'Grid' 빌더 요소를 추가해서 이 주소(~~~/category/press)의 쿼리(※ 워드프레스 자체 목록 주소 체계가 있어서 주소는 곧 어떤 콘텐츠들이 표시되는지가 결정)에 대한 글들이 표시되도록 하고, 더보기를 누르면 글이 아래로 더 추가되도록 합니다.

목록에서 각 글 하나의 조각 디자인은 Impreza > Grid Layouts에서 만들 수 있습니다. 좌측에 이미지가 있는 탬플릿을 선택한 다음 일부 수정해서 만들면 더 편리합니다.

여기까지 하면 'press category'라는 탬플릿이 만들어졌습니다. 기획상 각 대분류 부모 카테고리별로 탬플릿이 다 달라지게 돼 있는데요. (내비게이션, 추천 태그 다름. 멀티미디어 탬플릿 다름) 이럴 땐 각 카테고리 편집에서 개별적으로 카테고리 탬플릿을 연결을 하면 되겠습니다. press 부모 카테고리 및 그 하위 카테고리들에 이와 같이 탬플릿을 연결하고 화면을 열어보면 원하는 디자인의 목록이 표시되는 걸 볼 수 있습니다.

태그 목록 탬플릿 만들기

여기서 추천 태그를 누르면 같은 태그를 가진 글들이 모아 보이게 돼 있는데요, 이건 하위 카테고리의 개념이 없기 때문에 공통된 추천태그 메뉴만 있는 다른 목록 탬플릿을 하나 추가해야 합니다. 이미 완성된 press 카테고리 탬플릿이 있기 때문에 이제부터는 복사를 해서 사용을 하면 편리합니다.

'Press Category' 탬플릿을 복사(Duplicate)해서 tag archive 탬플릿을 만들고 불필요한 것들은 빼고 구성을 완료합니다. 태그 목록은 공통된 뷰이기 때문에 각 태그마다 탬플릿을 설정할 게 아니라 테마 옵션 Archives Layout에 공통 설정을 하면 됩니다.

이제 추천태그를 클릭해 보면 공통 태그로 묶인 글들이 표시되는 걸 볼 수 있습니다.

글 상세 페이지 탬플릿 만들기

목록에서 이미지나 제목을 클릭하면 해당 글의 내용이 보이는 상세 페이지가 열리게 됩니다. 마찬가지로 Content Templates에서 'Single Post'라는 탬플릿을 하나 추가합니다. 글의 주제, 타이틀, 작성자, 작성일, 본문, 태그들, 그리고 맨 하단에는 같은 카테고리의 글 2개가 노출되는 그리드를 추가했습니다.

인사이드, 칼럼 카테고리들에 대한 탬플릿 만들기

인사이드와 칼럼은 추천태그와 하위 카테고리 메뉴 두 가지가 press와 다르므로, 태그 탬플릿을 만들던 것과 마찬가지로 복사 후 수정할 부분만 수정해 주면 간단히 완료가 됩니다. 그다음 각 카테고리에서 탬플릿을 연결해 주면 되겠습니다.

멀티미디어 카테고리 탬플릿

기본이 되는 press category 탬플릿을 복사하고, 하위 카테고리 내비게이션은 빼고, 그리드의 디자인을 변경합니다. (리스트 칼럼도 3 칼럼으로 변경)

참고사이트에서는 목록에서 글 링크를 클릭하면 상단에 해당 글의 상세 내용이 바뀌는 방식을 적용했는데, 이건 Ajax 방식에 대한 개발이 필요해서 이번엔 그리드 요소로 바로 적용 가능한 팝업 방식으로 응용해서 적용을 해 보는 거로 대체를 했습니다. (※ 단, 모바일에선 팝업 아닌 링크로 동작함)

상단에 영상이 나오는 상세 글 페이지의 뷰는 멀티미디어 카테고리 내 글에만 적용이 되는 것인데, 카테고리 편집에서 이 부분을 설정 가능합니다.