#15-3. 카테고리 상위 페이지 만들기
Vogue 워드프레스 사이트 따라 만들기
참고 사이트의 콘텐츠들은 헤더에 있는 내비게이션 메뉴들과 같이 총 5가지로 나뉘어 있습니다. 메뉴 중 하나(예:Fashion)를 클릭하면 그 주제의 모든 글을 조금씩 모아 보여주는 페이지가 나오게 됩니다. 타이틀 아래에는 큰 주제 안의 세부 카테고리 링크들이 표시가 되어 한 번 더 원하는 분류의 글들만 모아보기가 가능하도록 해 놓았습니다.
이걸 워드프레스 어드민에서 운영자가 관리를 할 모습을 추측해 보면 이렇습니다.
워드프레스에는 기본적으로 글(post)을 분류하는 방법으로 '카테고리'와 '태그'를 이용할 수 있는데, 그중에 '카테고리'를 이용해서 Fashion이라는 부모 카테고리를 만들고, 그 아래 6개의 자식 카테고리들을 만들어 놓고, 글을 쓸 때 카테고리를 하나씩 지정을 하면 딱 참고 사이트와 같은 구조대로 글들을 분류해서 표시할 수 있게 됩니다.
그리고 글의 카테고리를 만들게 되면, 같은 분류의 글을 모아 보여주는 카테고리 목록 주소가 만들어지고, 이제 '외모>메뉴'에서 내비게이션도 만들 수 있게 됩니다. 이렇게 만든 내비게이션 메뉴를 이후에 페이지나 목록 템플릿을 만들 때 타이틀 아래 표시되도록 할 겁니다.
분류(카테고리)와 메뉴 구성이 완료되었으니 이제 패션 카테고리들의 글들과 자식 카테고리들이 메뉴로 표시되는 페이지를 만들어 보겠습니다.
패션(Fashion) 페이지 만들기
'Fashion'이라는 이름의 페이지를 하나 만들고, 메인 페이지와 같은 리스트 레이아웃들을 사용해서 그대로 섹션을 복사해서 구성하면 빠르게 완료할 수 있겠습니다.
먼저, 페이지의 타이틀(이하 자식 카테고리들에서도 동일한 이름)을 적어주고, '심플 메뉴(simple menu)' 요소를 이용해서 위에서 만든 'fashion-menu' 내비게이션 리스트를 표시해 줍니다.
여기서 굳이 '외모>메뉴'에서 만든 리스트를 연결해서 표시하는 이유는,
1) 현재 열린 페이지와 리스트에 있는 메뉴와 동일한지 워드프레스가 알아서 체크를 해 줍니다. (class명에 'current-menu-item'을 추가)
2) 한 곳에서 공통으로 들어간 페이지들의 내비게이션을 관리할 수 있게 됩니다.
그래서 현재 열린 페이지와 동일한 메뉴에는 css를 통해 글자가 다른 것보다 굵게, 그리고 아래에 보더가 보이도록 바꿀 수 있게 됩니다.
다음으로 이어지는 것은, 세로형 카드 레이아웃의 글 하나와 일반 레이아웃의 글 4개가 표시되는 섹션입니다. 이건 메인 페이지의 섹션을 그대로 복사하여 붙여 넣기를 하면 됩니다. (어떤 글을 불러오는지만 바꾸면 됨)
섹션을 복사하여 이용하는 방법
메인 페이지 편집에서 복사하고자 하는 섹션의 편집 버튼을 누른 뒤, 위쪽의 설정 버튼을 클릭하면, 이 섹션을 템플릿으로 저장할 수 있는 버튼이 보입니다.
알아보기 쉬운 이름을 넣어서 저장하면, 선택한 섹션과 그 안에 있는 내용 전체가 하나의 템플릿으로 만들어지게 됩니다.
이제 편집 화면 위쪽의 파란 영역에 있는 'Templates'라는 버튼을 누르면 방금 저장한 템플릿 섹션이 보이게 되고, 클릭 시 맨 아래쪽에 템플릿으로 저장한 구조가 그대로 붙게 됩니다.
다시 Fashion 페이지 편집으로 와서 템플릿 목록에서 방금 저장한 'section-name_name'을 클릭하면, 메인에 있던 섹션이 그대로 카피가 된 걸 볼 수 있습니다.
한가지, 참고 사이트는 오른쪽에 베너가 일정 영역을 차지하고 계속 스크롤이 되는데, 메인에 있던 건 베너 영역이 없던 섹션입니다.
만약 정 베너를 놓아야 하고, 같은 구조를 써야 한다면 로우 자체를 3/4와 1/4로 나눈 다음, 내부 로우를 그 안에 넣는 방식으로 적용은 가능합니다. 한 번 비교해 보세요.
마찬가지로 아래쪽에 표시하고 싶은 리스트가 있다면 메인 페이지의 것을 활용하여 복사 후 구성할 수 있습니다.
맨 마지막의 그리드만 추가 설명을 하면, 이 페이지는 패션(Fashion)이라는 큰 주제 아래의 모든 글들을 표시하는 곳입니다. 그래서 처음엔 최신글 12개를 불러와서 표시를 하고, 스크롤을 내릴 때 12개씩 더 붙는 방식으로 구성을 하게 되는데, 이때 분류를 최상단 부모 카테고리를 선택하면 되고, 만약 위쪽에 표시했던 글과 중복되지 않는 글들만 표시하고 싶다면, 'Exclude items'라는 옵션을 통해서 최신 글 리스트에서는 표시가 안 되게 할 수도 있습니다. (! 이걸 개발로 구현을 하려면 꽤 복잡합니다.)
여기까지 하면 패션이라는 카테고리 이하, 자식 카테고리들의 전체 글들을 표시하는 페이지가 완성됩니다.
> https://oks-dev.tk/vmagazine2/fashion/
다음은 이 페이지의 구조와 유사한 각 카테고리들로 분류된 글들만 표시되는 목록의 템플릿을 만드는 과정이 필요합니다. 어떤 건 페이지라고 하고, 어떤 건 템플릿이라고 하는 이유도 설명해 보겠습니다.
계속...
