#1-4. 목록 페이지 만들기 (키워드)
IMPREZA 테마로 brunch 사이트 따라 만들기
구독자가 원하는 콘텐츠를 볼 수 있도록 워드프레스에도 분류 방법들이 존재합니다. 대표적인 것이 글의 카테고리와, 태그, 작성자와 같은 것들이고 링크로 존재하다가 클릭 시 해당 목록 화면이 표시가 되도록 구조적으로 잘 설계가 되어 있습니다.
이번에는 브런치에서 사용하는 키워드 분류 화면을 워드프레스에서는 어떻게 표시해야 하는지에 대하여 이야기해 보려고 합니다.
해야 할 작업
1. 검색이 가능한 헤더, 스티키 시 목록의 타이틀이 가운데 표시되는 헤더로 새로 준비
2. 분류의 하위분류 키워드를 버튼 형식으로 나열 (쇼트 코드)
3. 글 목록의 새 레이아웃 준비
4. 사이드바 (with 작가 목록)
1. 키워드 목록 페이지를 위한 헤더
브런치 사이트의 키워드 화면을 보면 키워드 타이틀과, 서브 키워드들의 목록 버튼이 표시되다가, 스크롤 시 헤더는 스티키가 되면서 목록의 타이틀이 헤더 중앙에 표시됩니다. 헤더 빌더에는 아쉽게도 목록의 타이틀을 자동으로 표시하는 요소는 없어서, 이건 약간의 코딩 작업이 필요합니다.
우선은 <div> 태그에 id라는 이름을 부여합니다. 이후 방문자가 키워드를 눌러서 목록 화면의 주소가 열리게 되면, 어떤 목록의 화면인지를 체크해서 타이틀을 이 div 태그 안에 입력을 해 주면 됩니다. 워드프레스에서는 현재 어떤 화면을 보고 있는지 체크를 하는 방법(conditional tags)과 목록 화면의 타이틀을 얻을 수 있는 함수를 제공하고 있어서 아래와 같은 간단한 코드로 해결이 가능합니다.
2. 현재 표시되는 분류와 연관되는 분류 표시
분류 1 > 분류 1-1, 분류 1-2, 분류 1-3...... 과 같은 서브 개념의 분류가 존재한다고 할 때, 분류 1이 기준이 되어서 같은 부모 분류의 하위분류들을 나열하는 방법을 적용해 보았습니다.
먼저, 카테고리(키워드 개념) 목록 페이지를 위한 탬플릿을 하나 만들고, 테마 옵션에서 탬플릿을 연결해 줍니다.
워드프레스의 편집기 내에 어떤 코드에 의해 나오는 구조는, 나만의 쇼트 코드를 하나 만들어서 추가를 할 수 있습니다.
3. 선택된 키워드가 포함된 글들을 표시하는 레이아웃 만들기
그리드 레이아웃 탬플릿 중 기본이 되는 것 하나를 불러온 뒤, 이미지를 오른쪽으로 옮기고 추가할 요소들을 몇 가지 더 넣은 다음, 카테고리 탬플릿의 그리드 요소에서 디자인으로 선택을 하였습니다.
이때 표시할 콘텐츠는 현재의 쿼리(링크가 이미 목록을 표시하는 주소!) 아이템을 선택하면 알아서 맞는 콘텐츠들을 모아서 보여줍니다. 페이지 처리는 브런치와 같이 스크롤 시 글이 계속 추가되는 방식을 선택합니다.
4. 사이드바 (with 작가 목록)
작가의 목록은 현재도 연결 고리에 대해 고민 중이라 일단 영역만 표시를 해 봤습니다. 반응형 디자인에 맞게 알아서 화면이 반응하도록 로우를 3/4 + 1/4로 나눠서 표시를 했습니다. (12조각까지 마음대로 구성 가능)
여기까지 하면 결과는 아래와 같이 표시됩니다.
제일 중요한 페이지가 될 수도 있는 작가의 개인 페이지는 아래와 같이 하면 어떨지 고민 중입니다. 워드프레스에도 작가의 목록 페이지가 있지만 이걸 프런트 앤드에서 마음대로 수정을 하기 위해서는 코드 수정보다는 임프레자의 탬플릿 구조 활용이 더 쉬울 거 같아서 정리가 되는대로 한 번 적용해 보려고 합니다.
