brunch

매거진 IMPREZA 테마 활용

라이킷 2 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari May 05. 2020

#1-5. 작가(author) 페이지 만들기

IMPREZA 테마로 brunch 사이트 따라 만들기

이번 이야기는 브런치의 작가 소개 페이지를 워드프레스에서는 어떻게 준비해서 표시를 하면 될 것인가에 대한 것입니다.

먼저, 브런치의 작가 페이지를 먼저 살펴보겠습니다.

작가의 구독자 정보, 탭 구조로 소개, 작성한 글들, 글을 묶은 메거진 목록이 표시됩니다. 정보를 얻어와서 표시하는 것과 동시에 작가의 글 목록도 스크롤 시 계속 로딩되어 표시되도록 해야 합니다.

워드프레스에서는 작가(글을 작성한 사람)도 글을 분류하는 하나의 방법이 될 수 있습니다. 이 전에 카테고리 주소가 자동 해석이 되어 카테고리에 있는 글의 목록을 표시하던 방식과 유사합니다. ( 탬플릿 우선순위 )

[도메인/author/(닉네임)] 주소를 방문을 하면 워드프레스는 작가의 글 목록을 표시하는 탬플릿을 준비하여 화면을 표시하게 됩니다. 그래서 기본 주소 및 탬플릿만 잘 활용을 해도 일단 작가의 글 목록을 불러와서 표시하는 부분은 어려움이 없게 됩니다. 정보를 표시하는 방법은 탬플릿 만들기를 최대한 활용하되, 빌더 요소로 부족한 부분은 어쩔 수 없이 약간의 코딩 작업이 필요합니다.

1. 사전 준비

워드프레스 기본 프로필 편집에는 없는 정보들이 브런치 사이트에선 존재하기 때문에 프로필에 이 정보들을 입력할 수 있는 방법이 필요합니다. 워드프레스 플러그인 중에 이러한 필드를 쉽고 빠르게 적용할 수 있는 ACF가 있습니다. 임프레자 테마는 더 나아가 이 ACF를 고려하여 여러 편의 기능들을 개발을 해 놓았고, 테마 옵션 > Addons에도 설치 및 활성화 버튼도 제공하고 있습니다.

간단히 정리하면, ACF를 이용해서 > 프로필 편집 화면에 작가의 여러 정보를 입력하는 필드를 추가하고 > 작가와 연관된 정보로 활용할 수 있게 한다입니다.

2. 작성자(작가) 페이지의 탬플릿 구조 만들기

페이지 빌더로 탭 구조를 추가하였고, 빌더 요소로 표시할 수 없는 작가의 사진 표시, 1번에서 추가한 기타 정보들 표시 부분은 쇼트 코드를 만들어서 연결을 하였습니다.

글 목록 탭에는 그리드 요소를 넣고 주소 자체가 작성자의 글을 불러오는 곳이므로 현재의 쿼리의 글을 표시한다로 선택하면 됩니다.

쇼트 코드로 넣은 구조에 대한 css는 이 탬플릿 내에서만 사용이 될 것이므로, 페이지 편집기 상단의 톱니 모양의 아이콘을 눌러서 이 탬플릿에서만 적용되는 css를 정의해서 스타일을 적용하면 됩니다.

~~3. 나머지 기능들~~

작가를 '구독하기'는 플러그인을 적용하거나 따로 플러그인 제작과 같은 코딩 과정이 필요한 부분이라 일단 생략하였습니다. 메거진과 책은 키워드와 같은 글을 분류하는 또 다른 분류 체계를 추가해야 합니다. 이 또한 기본적인 워드프레스 분류에는 없고, 관련 작업이 오래 소요가 되어 일단 패스하였습니다.

전하고자 하는 핵심은 탬플릿을 제작하고 원하는 기능이나 내용들을 준비하여 탬플릿에 약속을 해 놓으면 유기적으로 연동이 되는 구조를 만들 수 있다는 것입니다.

위 내용을 적용하면 아래와 같은 워드프레스 작성자 페이지가 표시됩니다.