#11-3. 레거시(Legacy) 글 모아 보기
'펜트하우스'도 워드프레스 사이트
이번에는 레거시 글들을 참고사이트처럼 운영하려면 어떻게 해야 하는지에 대한 부분을 정리해 보겠습니다.
레거시 글들 작성
각 부모 카테고리 아래에는 레거시(legacy) 관련 글들이 하위(자식) 카테고리로 작성될 수 있게 했습니다. 사이트 글 편집자는 대 분류 아래 자식 카테고리만 잘 선택해서 작성을 하면 되는 상황입니다. Entertainment라는 큰 주제로 묶인 글들은 원하는 모양(그리드 레이아웃)대로 잘 표시가 되고 있습니다.
레거시 글들 모아 보여주기
참고사이트는 모든 분류의 레거시 글들을 모아 보여주는 메뉴가 존재합니다. 이건 페이지를 하나 만들고, 그리드 요소를 이용해서 특정 카테고리의 글들만 보여주기를 하면 처리가 가능합니다. 각 주제별 레거시 카테고리들 5개를 선택해서 글을 표시하게 합니다. (※ 목록 템플릿에서는 이 주소에 맞는 쿼리의 글들을 알아서 보여주라고 하고, 페이지에서는 원하는 글들을 가져다 보여주라고 하는 차이입니다.)
이제 글의 목록이 이제 1 칼럼으로 이미지가 지그재그로 있는 형태로만 바꿔주면 되겠네요.
'Impreza > Grid layouts'에서 레거시 모아 보여주기용 그리드를 위한 레이아웃을 하나 만듭니다. flex 박스 형태를 위한 가로형 wrapper와 안에 들어갈 세로형 wrapper를 이용해서 화면에 표시될 요소들을 넣되, 왼쪽을 33.33333%, 오른쪽을 66.66667%로 지정해서 한 줄에 보이도록 했습니다. (※ 모바일에서는 아래로 내려가도록 둘 다 100%로 변경)
지그재그로 이미지의 위치가 바뀌는 부분은 css로 해결이 가능합니다. 어떤 목록이 있을 때, css 요소 선택자에는 이게 짝수번째인지를 쉽게 체크하는 방법이 있기 때문입니다. [ :nth-child(2n) ] 전체 목록 중 그리드 하나가 짝수일 때만 flex 박스의 특징을 이용해서 두 vertical wrapper의 순서(order)를 바꿔주라는 css를 추가하면 지그재그로 이미지의 위치가 바뀌어 보이게 됩니다. (1 칼럼으로 바뀌는 시점 전까지만)
카테고리 목록 대신 /legacy 페이지로 이동시키기
레거시 글들만 모아 보여주기는 해결됐고, 이번에는 각 분류별 글 목록에서 'LEGACY'라는 카테고리 제목을 클릭했을 때에도 이 페이지로 오게끔 조치를 해야 합니다. 현재는 카테고리 제목을 클릭하면 기본 목록 화면이 나오는 상황입니다.
이건 워드프레스의 template_redirect라는 훅을 이용해서 템플릿들이 로딩이 될 때, 임의의 다른 곳으로 리다이렉트를 시키는 방법을 이용하면 해결이 됩니다. 자식 테마의 functions.php에 레거시 카테고리들 목록이 표시되어야 하는 경우, 대신 특정 페이지로 이동하라는 코드를 추가합니다. 이렇게 하면 레거시 카테고리 목록 템플릿이 열리는 대신 위에서 만든 '/legacy' 페이지가 표시됩니다.
레거시 글의 상세 페이지에서 전/후 글 이동 처리
참고사이트의 경우 한 글에 여러 카테고리와 태그들이 동시에 적용이 되고 있습니다. 레거시라는 카테고리 제목을 클릭했을 때, 모든 레거시 글들이 보이는 페이지로의 이동까지는 됐는데, 글의 상세 페이지를 보다가 전, 후 글을 클릭했을 때 전체 레거시 글들 사이에 이동이 되게 하려면 어떻게 해야 할까요? 카테고리나 태그를 기준으로 순환을 시키면 레거시 글들을 보다가 다른 카테고리의 글로 넘어가는 상황이 발생할 수 있습니다.
이건 워드프레스의 장점이기도 한 분류 체계 추가 방법을 이용하면 됩니다. 글에 카테고리, 태그라는 분류 외에 또 다른 분류를 하나 더해서 사용하는 것이죠. 코딩 대신 어드민에서 쉽게 적용할 수 있는 Addon을 하나 추가해서 분류를 추가했습니다.
기존 레거시 카테고리들 글들에 이제 이 분류를 추가해 줍니다. 기존 글 하나하나를 재 편집할 필요 없이 글 목록에서 일괄적으로 '메인 카테고리'를 지정할 수 있는 방법을 이용하면 되겠습니다.
이제 글을 보다가 전, 후 글을 순환시킬 때 이 '메인 카테고리'라는 묶음 안에서 이동을 할 수 있게 되었습니다. (※ 레거시 글의 상세 페이지 템플릿 만들기는 다른 글로 다시 정리하겠습니다)
여기까지 하면 레거시 글들에 대한 조치는 완료가 됩니다.
> https://oks-dev.tk/logohouse/legacy/
(※ 테스트 사이트를 해외 호스팅으로 옮겨 놓은 관계로 접속이 느릴 수 있습니다.)
정리해 보면,
1. 부모 카테고리 아래에 레거시 글들을 작성해서 표시할 수 있음
2. 레거시 글들을 한 곳에 모아 보여줄 수 있음 (페이지)
3. 레거시 카테고리의 글 목록 대신, 레거시 글들이 모아진 페이지로 이동시켜서 보여줌
4. 레거시 글은 레거시 관련 글들 사이에서 전, 후로 이동하면서 볼 수 있게 됨
다음으로는 글의 상세 페이지 템플릿을 만드는 과정이 이어지면 될 듯합니다.
계속...
