brunch

매거진 IMPREZA 테마 활용

라이킷 9 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Feb 11. 2022

#11-2. 콘텐츠 분류 계획, 카테고리 목록 만들기

'펜트하우스'도 워드프레스 사이트

참고사이트의 콘텐츠 분류 내용을 확인해 보겠습니다.

총 세 가지의 글 형식(post type)을 사용 중이고 메뉴를 통해 분류된 콘텐츠의 목록을 볼 수 있도록 기획된 것으로 판단됩니다. 이건 목록의 주소와 body 태그에 적용된 클래스명들을 보고 확인할 수 있었습니다.

메뉴 Entertainment, Lifestyle, Ses, Tech, Trends 5개는 글(post)의 카테고리를 메뉴에 등록해 놓은 겁니다.

'pets'라는 글 형식을 추가해서 해당 콘텐츠의 목록이 표시되는 주소를 메뉴에 등록해 놨습니다.

'legacy'라는 글 형식을 추가해서 해당 콘텐츠의 목록이 표시되는 주소를 메뉴에 등록해 놨습니다.

이제 콘텐츠 목록 및 상세 페이지 구성 내용을 확인해 보겠습니다.

카테고리 메뉴를 클릭해서 열어 보면, 자식 카테고리들의 콘텐츠들 모두가 표시되고 있습니다. 목록에서 하위 카테고리 이름을 클릭하면 이제 자식 카테고리만의 목록이 나오는데, 이때에는 카테고리 이름은 가려집니다. [ Entertainment(부모) > Movies/TV(자식) ]

글과 추가된 글 형식(post type)의 목록과 상세 페이지는 서로 다른 레이아웃을 가지고 있습니다. 즉, 총 3가지 목록 및 상세 페이지 템플릿이 존재합니다.

( post 글 목록, 글 상세 페이지 )

( legacy 글 목록, 상세 페이지 )

( pets 글 목록, 상세 페이지 )

! 해결 과제

3가지의 목록과 상세 페이지들을 만드는 것이야 어렵지 않은 부분인데, 글의 목록에 레거시(legacy)의 글이 포함이 돼서 표시되어야 한다는 해결 과제가 있습니다. 아마도 레거시 관련 콘텐츠도 같은 종류의 분류가 있고, 각 주제에 맞게 카테고리 글 목록과 함께 표시되도록 조치를 한 것으로 보이는데요, 만약 이걸 조치하려면 php 파일 내에서 코드로 개발을 하거나, pre_get_posts라는 워드프레스 훅을 이용해서 카테고리 주소에 대한 쿼리를 조정해야 하는 작업이 필요해 보이네요.

>> 목록에서 'LEGACY'를 클릭하면 자식 카테고리가 아닌 'LEGACY' 메뉴 페이지로 이동 / 글 제목이나 사진 클릭 시 'legacy' 글 형식의 상세 페이지로 이동 ( post와 legacy 글이 공존 )

이 해결 과제를 풀어 보느라 초기화했다가 다시 만드는 과정도 거치기도 했는데, 두 가지 글 형식을 한꺼번에 보여주는 부분은 저도 처음 보는 것이라 이후 따로 테스트를 해 봐야 정확한 해법을 알 수 있을 것 같습니다. 이번에는 알고 있는 내용을 가지고 최대한 쉽게 해결을 하는 쪽으로 적용해 봤습니다. 이렇게도 해결이 가능하구나 참고해 보시면 좋겠네요.

해결 방법 :

- 각 주제별 카테고리 아래 legacy라는 하위 카테고리들을 추가 (slug는 다르나 이름은 같게) > 자연스럽게 카테고리 글 목록에도 legacy 콘텐츠 표시

- 각 주제별 legacy 하위 카테고리들의 콘텐츠를 모아, 'legacy'라는 이름의 페이지에 모아 보여줌 > 모든 레거시 콘텐츠를 한 페이지에 묶어 보여줄 수 있음

- 'legacy' 하위 카테고리들은 하나의 공통된 묶음을 갖기 위해 글에 추가된 분류 체계(CPT 플러그인 활용)로 묶어줌 (main_category) > 그래야 글 상세 페이지에서 레거시 콘텐츠들 사이에서 전후 글 순환이 가능해짐

- 목록에서 'LEGACY'라는 카테고리 제목을 클릭 시에는 '/legacy' 페이지로 템플릿 리다이렉트 > 자식(하위) 카테고리 목록이 아닌 모든 레거시 콘텐츠가 있는 페이지로 이동

(※ 관련 내용은 다음 글 레거시 관련 목록 레이아웃을 만들 때 더 자세히 다루겠습니다.)

구현해야 할 내용들이 다 파악이 되었으니 이제 글 목록과 상세 페이지를 만들어 볼 차례입니다.

목록을 만들려면 콘텐츠들이 있어야겠지요. 이번에도 'fakerpress'로 더미 콘텐츠들을 추가했습니다.

더미 콘텐츠들을 만들기 전 우선 글의 카테고리도 자동으로 지정될 수 있도록 카테고리들부터 만듭니다.

카테고리를 만든 다음, 각 주제별 하위 카테고리들을 지정해서 더미 글들을 만들어줍니다. 목록과 상세 페이지의 상단에 표시될 이미지를 위해 가로 1320px, 세로 585px의 이미지도 자동 등록되게 했습니다. 큰 주제별로 50개씩 총 250개의 글을 만들었습니다.

이제 본격적으로 이번 글의 핵심인 카테고리 목록 템플릿을 만들 차례입니다.

카테고리 목록 템플릿 만들기

글의 기본 목록 화면은 상단에 타이틀, 그리고 이어지는 글의 목록 이 두 가지면 템플릿이 만들어지는 간단한 구조입니다. 목록의 레이아웃 디자인만 잘 구현을 하면 되겠네요. (만든 템플릿은 테마 옵션을 통해 연결해야 합니다.)

한 페이지당 총 13개의 글이 불러와져서 표시가 되면서 첫 번째 글은 모양이 살짝 다른 구조입니다.

처음에는 쉽게 12개씩 아래쪽 그리드 모양만 구현을 해서 적용을 했다가, 뭔가 오기가 발동해서 디자인대로 한 번 해보자 변경을 했습니다. flex 박스를 넣어서 css를 이용해서 순서 바꾸기와 글자 조정만 추가를 하면 되더라고요.

가로 형태의 flex wrap을 기본으로 만들고, 이미지와 오른쪽 정보 부분의 넓이를 100%로 주면 자연스럽게 세로 형태가 됩니다. 세로 형태일 때 요약글은 숨김 처릴 했습니다. (display:none)

첫 번째 목록 글에 대한 조치의 핵심은 이렇습니다.

- 한 줄에 몇 개의 글들이 보이는지 설정을 하게 되면 넓이 %가 지정이 되는데, 첫 번째 글은 100% 넓이를 갖도록 수정합니다.

- 이미지/내용 모두 넓이가 100%였던 것을 원하는 넓이로 수정하고(둘을 더해서 100이 되도록), 좌우의 순서를 바꿔줍니다. (order:2)

- 992px 미만에서는 넓이와 순서만 바꿔주면 참고사이트와 같이 표시가 됩니다.

css 코드는 카테고리 목록이 제일 주가 되므로, 테마 옵션의 Custom css부분에 추가를 했습니다.

이제 목록을 위한 템플릿에서 그리드 요소를 설정합니다.

카테고리 주소가 열리면 이 주소에 대한 글들이 표시되도록 하고, 페이지네이션 내비게이션으로 페이지가 전환되도록 합니다. (버튼 디자인은 테마 옵션에서 만들기 가능)

각 글 하나는 위에서 만든 기본 레이아웃으로 표시되도록 하고, pc화면에서는 한 줄에 4개, 모바일에서는 2개씩 표시되도록 했습니다.

결과 화면.

> https://oks-dev.tk/logohouse/category/entertainment/

(※ 테스트 사이트를 해외 호스팅으로 옮겨 놓은 관계로 접속이 느릴 수 있습니다.)

+ 참고사이트의 목록 화면들을 보면 두 가지 추가 조치 내용이 있습니다.

바로 각 부모 카테고리별로 대표색이 있다는 점과, 자식 카테고리 목록에서는 카테고리 이름이 숨겨진다는 것인데요, 워드프레스의 개발 방법을 살짝만 이용하고 css를 몇 줄 추가해 주면 적용이 가능한 조치입니다.

초반에 body 태그의 클래스명들을 보고 이 페이지가 뭐구나라고 판단을 했듯이, 워드프레스는 body 태그에 각종 정보들을 클래스명으로 추가합니다. 만약 원하는 클래스명을 넣고 싶으면 여기와 연결된 훅(Hook)을 이용해서 조치를 할 수 있게 해 놨는데요, 바로 'body_class'라는 훅입니다.

자식 테마의 functions.php 파일에 body 태그에 클래스명들이 추가될 때, 내가 원하는 것도 추가해 주라는 약속을 해줍니다. (> 자식 카테고리 목록이라면 'child-category'를 넣어서 자식이라는 정보 추가 / 자식 카테고리 페이지에도 '부모 카테고리 slug'를 추가해서 이 카테고리의 부모가 뭔지 정보 추가)