brunch

매거진 IMPREZA 테마 활용

라이킷 11 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Nov 17. 2021

#4-5. 작가, 태그 목록 템플릿 만들기

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

주요 카테고리별 목록이 지난번 완성이 됐습니다.

참고 사이트의 기획과 디자인을 보면 작가를 클릭하면 해당 작가(author)가 작성한 글들이 목록으로 나오고, 글에 지정한 태그를 클릭하면 같은 태그로 묶인 글들이 목록으로 나오는 것을 볼 수 있습니다. 이제 이 두 목록을 위한 템플릿을 만들 차례입니다.

타이틀이 나오는 섹션만 다르고 아래 목록과 페이지네이션이 나오는 방식은 동일하네요. 기본 목록을 위한 템플릿에서 복사 후 수정을 하면 되겠습니다. 각 템플릿을 만든 후 테마 옵션에서 연결을 해야 할 부분부터 먼저 설명을 드리면, Impreza > Archive Layout 메뉴를 들어가 보면 태그와 작가 목록을 위해 템플릿을 지정하는 부분이 있습니다. 만약 설정을 안 하면 그 위에 지정한 Archive 템플릿(기본 목록용 템플릿)이 적용이 되고 따로 설정을 하면 다르게 화면을 만들 수 있게 되는 겁니다. 이건 워드프레스의 템플릿 우선순위와 같은 개념의 것이니 한 번 참고해 보세요. > https://wphierarchy.com/

Impreza 테마가 아니라도 만약 어떤 테마를 커스텀을 할 때에도 이 순서를 알고 테마 파일을 준비하거나 수정을 하면 되겠습니다.

1. 작가(author) 별 글 목록 템플릿 만들기

기본 목록 템플릿 Archive를 복사해서 수정합니다. 타이틀 섹션에서 제목과 설명문을 빼고, 'Post Author' 요소를 대신 넣고 사진(크기 지정), 위치, 프로필 정보가 화면에 표시되도록 설정합니다. 옵션에는 스타일을 지정을 할 수 있는 부분들이 없어서 글자 크기나 사이 공간 등은 css를 추가해서 수정을 하면 되겠습니다. 단, 이미 목록에서 표시되는 작성자 정보 표시가 이미 있어서 스타일 지정이 중복되지 않도록 클래스명을 지정해서 스타일을 적용해야 합니다.

만든 템플릿을 적용 후 글 목록에서 'admin' 아바타를 눌러서 작성자 페이지를 열어 보니, 문제가 하나 발견됩니다. 바로 메뉴에는 없는 분류의 글이지만 외부 링크로 가는 글들도 post로 적은 게 있어서 이것들도 같이 표시가 되는 것이죠. 이런 경우를 위해 작성자의 글을 가져올 때 특정 카테고리 글들은 제외를 하게 해야 합니다.

워드프레스는 DB에 저장된 콘텐츠를 가져올 때 이 동작을 쉽게 제어할 수 있는 방법을 제공합니다.

> https://developer.wordpress.org/reference/hooks/pre_get_posts/

작가의 주소를 인터넷 브라우저로 열면 작가가 작성한 모든 글을 가져오는 게 기본 동작이지만 이 중에 특정 카테고리를 제외를 하는 방법은 테마의 functions.php 파일에 코드를 몇 자 적는 것으로 제어할 수 있습니다. 이걸 적용 후 다시 작성자 페이지를 열어보면 이제 네 가지 메뉴에 있는 카테고리의 글들만 표시되는 걸 볼 수 있습니다. 참고로, 카테고리의 아이디는 카테고리들 목록에서 마우스를 카테고리 이름 위로 올려보면 어드민 화면 왼쪽 아래에 정보들이 표시가 되는데 여기서 쉽게 확인 가능합니다.

2. 태그(tag) 별 글 목록 템플릿 만들기

마찬가지로 기본 목록 템플릿 Archive를 복사해서 수정합니다. 디자인상 페이지의 타이틀 앞에 'Tag /'라는 텍스트가 추가가 필요합니다.

가로로 화면 요소로 나열이 되어야 하므로 flex 스타일을 적용하기 위해 'Horizontal Wrapper'를 추가했고, 'Post Title'요소 앞에 텍스트로 'Tag /'를 추가해줬습니다. 타이틀(태그명이 표시)은 배경과 글자색, 공간이 적용이 되어야 하므로 요소의 디자인 탭에서 css 속성들을 설정해 줬습니다.