brunch

매거진 IMPREZA 테마 활용

라이킷 12 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Jan 25. 2022

#10-3. 카테고리 목록 템플릿 만들기

온라인 매거진 만들기

워드프레스는 글을 주제별로 분류한 카테고리별로 목록 주소가 만들어집니다. [도메인/category/(카테고리 슬러그)]

글 내용이 공통된 템플릿 파일(single.php)을 통해 표시가 되는 것처럼 각 카테고리 주소의 화면은 테마의 카테고리를 위한 템플릿에 의해 표시됩니다. > category.php (※ 워드프레스 템플릿 계층 ) 즉, 워드프레스 사이트에서 카테고리 목록 화면을 준비한다는 것은 테마에 있는 템플릿 파일을 수정하거나 또는 만드는 작업을 해야 하는 걸 의미합니다. (! 페이지로 특정 카테고리에 있는 콘텐츠를 불러다 표시를 하는 방법을 쓰면 두 가지 모양의 화면이 사이트에 공존하게 되어 주의해야 합니다.)

그러면, 파일을 가지고 작업을 해야 하는 것인가?

디자인대로 목록 화면을 만들려면 원칙은 그래야 하지만, 위의 기본적인 원칙을 가지고 Impreza 테마는 사이트를 더 쉽게 만들 수 있도록, 어드민에서 템플릿을 만든 다음 이걸 이용해서 화면을 표시할 수 있도록 개발이 돼 있습니다. (※ 테마 옵션에서 지정한 템플릿이 있으면 그거로 표시하고 없으면 category.php를 이용해서 표시)

참고사이트에서 카테고리 목록의 화면은 어떻게 구성을 했는지 확인해보겠습니다.

- 카테고리 주소들로 만들어진 주 메뉴를 누르면 타이틀로 카테고리의 이름이 표시됩니다.

- 그 아래에는 pc에서는 3 칼럼으로, 모바일에서는 2 칼럼으로 [이미지+제목]이 표시되는 카드 형태의 목록이 나옵니다.(마우스를 올렸을 때에는 붉은색 보더 표시)

- 카테고리 안에 또 다른 세부 분류가 더 있는 경우에는 하위 카테고리들의 콘텐츠만 한 번 더 분류해서 볼 수 있게 내비게이션이 추가됩니다.(제목은 부모 카테고리 이름으로 유지)

1. 기본 카테고리 템플릿 제작

우선 작업한 결과를 먼저 보여 드리면, '이렇게 쉽나?'라고 생각할 수도 있습니다. 현재 보고 있는 카테고리 화면의 제목은 워드프레스에서는 'the_title()'이라는 코드로 쉽게 표시를 할 수 있고, Impreza 테마로 작업 시에는 디자인대로 Grid layout 하나만 준비를 하면 되기에 더더욱 쉽게 작업을 할 수 있었습니다.

'Impreza > Grid layouts'에서 'Category Grid'라는 이름으로 레이아웃을 하나 만들었습니다. 카드의 크기가 모두 동일해야 하므로 'Set Aspect Ratio' 옵션으로 비율을 강제했고, [ 이미지/타이틀/(보더선을 위한) html ] 순서로 구성을 했습니다. 글 제목은 디자인된 크기의 폰트 사이즈로 일정 공간을 가지고 아래로 붙게 css의 'position: absolute' 속성을 이용해서 아래로 위치시켰습니다.

이제 남은 건 마우스를 올렸을 때 굵은(20px) 보더선이 나오게 하는 것인데, 일단 1px의 투명한 선이 박스 전체를 두르도록 설정하고, 이 선의 이름을 'hover-border'라 지어줬습니다. 이 그리드 레이아웃은 사이트 전체에 사용이 되므로, 마우스를 올렸을 때의 css 스타일 정의는 테마 옵션의 'Custom Code' 부분에 추가해서 적용해 줬습니다. (그리드에 마우스를 올림 > 1px의 투명 보더가 20px의 붉은 보더로 변경)

※

정리하다 보니 만약 사진이 밝은 경우 글자가 잘 안 보이는 것을 대비해서 약간 검은색의 백그라운드가 들어간 것을 빼먹었었네요. 이미지 바로 다음(:after) 투명하지만 살짝 검은 배경을 추가했습니다. (그리드 레이아웃에서 image에 class 이름 추가 > css로 배경 추가)

그리드 레이아웃이 완성이 됐으니 이제 이 레이아웃으로 그리드가 표시될 수 있게 설정하면 되겠습니다. 모바일 화면 사이즈에서는 3>2 칼럼으로 조정하면 한 줄에 2개씩 콘텐츠들이 표시됩니다. 카테고리 주소가 열릴 때 워드프레스는 이 주소라면 어떤 콘텐츠들을 불러와야 하는지 알아서 판단해서 표시해줍니다. (current query) 거기에 몇 개씩 불러올지는 설정> 읽기에서 지정한 글 개수가 사용이 됩니다. (쿼리 기본 개수)

여기까지 하면 기본 카테고리 템플릿이 완성됩니다. 메뉴에서 카테고리를 눌러서 잘 표시되는지 확인합니다.

2. 서브 카테고리 메뉴가 있는 템플릿 만들기

참고로 따라 하기 제작을 위해 저는 임시로 Fashion과 Shopping 카테고리에 서브 카테고리들을 만들었습니다.

기존에 작업을 하던 방식을 잠시 떠올려보면, category.php를 복사하여 category-fashion.php를 만들거나 category.php에서 비교 구문을 둬서 이 카테고리의 하위 카테고리가 있냐 비교를 하고, 있으면 하위 카테고리들을 불러다 표시해 주고...... 비교 구문과 커스텀 쿼리문을 이용해서 정보들을 표시해야 했습니다.

Impreza 테마의 경우 각 카테고리별로 따로 템플릿을 지정할 수 있는 방법이 있습니다. 쉽게 이 방법을 이용하면 각 카테고리 주소별로 서로 다른 모습을 표시할 수 있습니다. 즉, Fashion 및 그 아래 서브 카테고리들에는 별도의 템플릿을 적용하는 겁니다.

템플릿을 새로 만들지 않고 이미 완성된 category용 템플릿을 하나 복사합니다. 이름은 'Category(fashion)'이라고 지었습니다. 달라지는 부분은 제목을 'Fashion'이라는 이름으로 지정해 버린 것과 그 아래 메뉴가 하나 추가되는 겁니다.

연결될 메뉴를 'category-fashion'이라는 이름으로 하나 만들었습니다. 여기에는 부모 카테고리 및 그 아래 카테고리들이 추가됩니다. 그다음 Fashion 카테고리는 '전체'라는 이름으로 변경합니다.

이제 Fashion 카테고리 및 그 하위 카테고리들에는 따로 만든 템플릿을 지정해줍니다.

패션 하위 카테고리의 주소를 열어서 제대로 표시되는지 확인해 보겠습니다. 이제 패션 관련 카테고리들에서는 하위분류 내비게이션이 추가된 모습이 잘 표시되는 것으로 보입니다.

추가로, 워드프레스 사이트에서 '외모> 메뉴'에서 내비게이션을 만드는 이유는 워드프레스가 현재 열린 페이지와 메뉴의 관계를 파악해서 각 메뉴에 class명으로 정보들을 알아서 표시를 해 주기 때문입니다. 이걸 이용하면 css를 이용해서 현재 위치를 쉽게 표시할 수 있게 됩니다.