brunch

매거진 IMPREZA 테마 활용

라이킷 6 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Sep 11. 2024

#15-4. 카테고리 템플릿 만들기

Vogue 워드프레스 사이트 따라 만들기

먼저, 페이지로 글들을 모아 보여주는 것과, 워드프레스의 템플릿 구조를 활용하여 글들을 표시하는 차이부터 설명을 해 보겠습니다.

참고한 V 사이트의 경우 글들을 모아 보여주는 방법으로 '페이지(page)'를 활용했습니다. 하위 카테고리의 글들도 마찬가지로 페이지로 제작을 한 것으로 확인됩니다. (body 태그의 class명으로 확인)

즉, 모든 목록들을 '페이지(page)'로 제작했다 보면 될 거 같습니다. (페이지 약 25개 쓰임)

그래서인지 글의 상세 페이지에서 목록으로 가는 주소 또한 별도로 가공된 주소가 쓰여 있는 게 보입니다.

비교 :
워드프레스의 카테고리 주소 > [도메인]/category/fashion/celebrity-style
참고사이트의 목록으로 가는 주소 > [도메인]/fashion/celebrity-style

(글 상세 페이지에서 카테고리명 클릭 -> 해당 카테고리의 글을 볼 수 있는 페이지로 이동)

테스트를 위해 카테고리 주소를 한 번 직접 입력해 봤습니다.

> [도메인]/category/fashion/celebrity-style

그러니, 패션의 상위 페이지로 자동 이동을 하네요.

> [도메인]/fashion

카테고리로 글을 분류를 하되 카테고리들의 기본 목록 주소는 막고, 특정 페이지로 리다이렉트(강제 이동)를 하는 것 같습니다.

어떤 기획 의도가 있으니 이렇게 구성을 한 것일 건데, 전체 글을 한 곳에 모아 보여주려고 할 때에는 페이지로 제작을 하면 편리했겠지만, 나머지 자식 카테고리들의 글 목록도 페이지로 모두 제작을 한 목적은 잘 파악이 되질 않네요. 왜냐하면 하위 카테고리들은 딱 그 카테고리의 글들만 보여주는 단순 구조였기 때문입니다. (그 말은 공통 템플릿 하나로 모두 표시 가능하다는 것)

앞에서 글을 주제별로 나눌 때 카테고리를 이용할 수 있고, 그러면 각 카테고리의 주소가 만들어지고, 그걸 메뉴로 등록 및 활용할 수 있다고 했습니다.

예를 들어 따라 하기 사이트에서 '외모>메뉴'에서 카테고리 주소로 만든 메뉴 '패션 트렌드'를 클릭했다고 하면, 워드프레스가 만들어준 이 주소로 이동을 합니다.

https://oks-dev.tk/vmagazine2/category/fashion/fashion-trend/

그러면, 약속된 테마의 템플릿 우선순위에 의해 이 주소는 어떤 템플릿 파일로 화면을 준비할지 찾은 다음, 그 템플릿의 내용대로 최종 html로 화면을 표시하게 됩니다.

이해를 돕기 위해 아주 기본적인 테마의 코드들만 있는 'underscores'라는 테마를 다운로드하여서 카테고리 주소가 열리는 파일을 열어 보면 이렇습니다. (※ category.php가 없으니 그보다 상위의 archive.php로 글들이 표시)

php 쿼리 코드 없이 방문한 주소에 의해 어떤 글을 데이터베이스에서 불러올지 워드프레스가 알아서 판단해서 가져다가, while이라는 반복문에 의해 글 하나하나를 표시해 주는 방식입니다. 참고로, 저 while문 안에 앞에서 여러 번 반복한 '그리드 레이아웃'으로 만든 구조 하나를 html과 php 코드로 만들고 css로 스타일을 잡아주는 작업업을 하게 됩니다.

이걸 코딩 없이 무지 간단하게 만들어 놓은 게 Impreza 테마의 '템플릿 > Page Templates'이고 페이지 편집 방식으로 템플릿 제작이 가능해졌습니다. 템플릿의 구조는 앞서 패션(fashion) 페이지를 이미 만들었기에 재 사용할 섹션 두 개만 복사해서 붙여 넣기 하면 끝입니다.

차이라면, 그리드의 설정에서 보일 글들을 임의로 지정을 하는 게 아니고, 이 템플릿이 열리는 주소의 콘텐츠들을 가져다 알아서 보여주는 것으로 설정해야 한다는 것입니다. (주소에 맞는 글을 불러다 줌)

목록 템플릿 상에서 한 번에 불러오는 글의 수는 기본적으로 '설정>읽기'에 입력된 값으로 정해집니다. 3 칼럼 4줄로 계속 아래로 이어지는 것이니 12개로 설정합니다. 마지막으로 이 템플릿으로 카테고리 주소가 열리게 하려면 테마 옵션에서 만든 템플릿을 연결하면 됩니다.

이렇게 하면, 페이지 하나와 템플릿 하나로 패션과 이하 카테고리들 목록 모두를 표시할 수 있는 방법이 완성됩니다.

> 페이지로 만든 패션(전체) 글 목록 : https://oks-dev.tk/vmagazine2/fashion/

> 카테고리 템플릿으로 열리는 자식 카테고리 글 목록 : https://oks-dev.tk/vmagazine2/category/fashion/fashion-trend/

> ! 대신 부모 카테고리 주소도 만들어진 상황 : https://oks-dev.tk/vmagazine2/category/fashion/

이건 필요시 리다이렉트로 위에 만든 페이지로 강제 이동시킬 수 있음

추가로, 하위 카테고리별로 목록이 표시되는 것은 공통이지만 상단에 제목과 메뉴의 구성이 바뀌어야 합니다. 만약 정말 하나의 템플릿으로 모두 해결을 하려면 위에 있는 타이틀과 메뉴는 자동 변경을 해 줄 조치가 필요합니다. (참고 사이트는 콘텐츠가 총 5개로 분류가 돼있음)