온라인 매거진 만들기
워드프레스는 글을 주제별로 분류한 카테고리별로 목록 주소가 만들어집니다. [도메인/category/(카테고리 슬러그)]
글 내용이 공통된 템플릿 파일(single.php)을 통해 표시가 되는 것처럼 각 카테고리 주소의 화면은 테마의 카테고리를 위한 템플릿에 의해 표시됩니다. > category.php (※ 워드프레스 템플릿 계층 ) 즉, 워드프레스 사이트에서 카테고리 목록 화면을 준비한다는 것은 테마에 있는 템플릿 파일을 수정하거나 또는 만드는 작업을 해야 하는 걸 의미합니다. (! 페이지로 특정 카테고리에 있는 콘텐츠를 불러다 표시를 하는 방법을 쓰면 두 가지 모양의 화면이 사이트에 공존하게 되어 주의해야 합니다.)
그러면, 파일을 가지고 작업을 해야 하는 것인가?
디자인대로 목록 화면을 만들려면 원칙은 그래야 하지만, 위의 기본적인 원칙을 가지고 Impreza 테마는 사이트를 더 쉽게 만들 수 있도록, 어드민에서 템플릿을 만든 다음 이걸 이용해서 화면을 표시할 수 있도록 개발이 돼 있습니다. (※ 테마 옵션에서 지정한 템플릿이 있으면 그거로 표시하고 없으면 category.php를 이용해서 표시)
참고사이트에서 카테고리 목록의 화면은 어떻게 구성을 했는지 확인해보겠습니다.
- 카테고리 주소들로 만들어진 주 메뉴를 누르면 타이틀로 카테고리의 이름이 표시됩니다.
- 그 아래에는 pc에서는 3 칼럼으로, 모바일에서는 2 칼럼으로 [이미지+제목]이 표시되는 카드 형태의 목록이 나옵니다.(마우스를 올렸을 때에는 붉은색 보더 표시)
- 카테고리 안에 또 다른 세부 분류가 더 있는 경우에는 하위 카테고리들의 콘텐츠만 한 번 더 분류해서 볼 수 있게 내비게이션이 추가됩니다.(제목은 부모 카테고리 이름으로 유지)
우선 작업한 결과를 먼저 보여 드리면, '이렇게 쉽나?'라고 생각할 수도 있습니다. 현재 보고 있는 카테고리 화면의 제목은 워드프레스에서는 '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) 거기에 몇 개씩 불러올지는 설정> 읽기에서 지정한 글 개수가 사용이 됩니다. (쿼리 기본 개수)
여기까지 하면 기본 카테고리 템플릿이 완성됩니다. 메뉴에서 카테고리를 눌러서 잘 표시되는지 확인합니다.
참고로 따라 하기 제작을 위해 저는 임시로 Fashion과 Shopping 카테고리에 서브 카테고리들을 만들었습니다.
기존에 작업을 하던 방식을 잠시 떠올려보면, category.php를 복사하여 category-fashion.php를 만들거나 category.php에서 비교 구문을 둬서 이 카테고리의 하위 카테고리가 있냐 비교를 하고, 있으면 하위 카테고리들을 불러다 표시해 주고...... 비교 구문과 커스텀 쿼리문을 이용해서 정보들을 표시해야 했습니다.
Impreza 테마의 경우 각 카테고리별로 따로 템플릿을 지정할 수 있는 방법이 있습니다. 쉽게 이 방법을 이용하면 각 카테고리 주소별로 서로 다른 모습을 표시할 수 있습니다. 즉, Fashion 및 그 아래 서브 카테고리들에는 별도의 템플릿을 적용하는 겁니다.
템플릿을 새로 만들지 않고 이미 완성된 category용 템플릿을 하나 복사합니다. 이름은 'Category(fashion)'이라고 지었습니다. 달라지는 부분은 제목을 'Fashion'이라는 이름으로 지정해 버린 것과 그 아래 메뉴가 하나 추가되는 겁니다.
연결될 메뉴를 'category-fashion'이라는 이름으로 하나 만들었습니다. 여기에는 부모 카테고리 및 그 아래 카테고리들이 추가됩니다. 그다음 Fashion 카테고리는 '전체'라는 이름으로 변경합니다.
이제 Fashion 카테고리 및 그 하위 카테고리들에는 따로 만든 템플릿을 지정해줍니다.
패션 하위 카테고리의 주소를 열어서 제대로 표시되는지 확인해 보겠습니다. 이제 패션 관련 카테고리들에서는 하위분류 내비게이션이 추가된 모습이 잘 표시되는 것으로 보입니다.
추가로, 워드프레스 사이트에서 '외모> 메뉴'에서 내비게이션을 만드는 이유는 워드프레스가 현재 열린 페이지와 메뉴의 관계를 파악해서 각 메뉴에 class명으로 정보들을 알아서 표시를 해 주기 때문입니다. 이걸 이용하면 css를 이용해서 현재 위치를 쉽게 표시할 수 있게 됩니다.
+ shopping 카테고리 및 하위 카테고리들을 위한 템플릿도 위 방법과 같이 만들면 되겠습니다.
위 내용을 한 번 더 요약을 해 봅니다.
1. 카테고리들을 위한 템플릿을 만들어서 '테마 옵션> Archives Layout'에 지정하면 글의 카테고리들 주소는 이 템플릿을 통해 표시가 됩니다. (기본 템플릿)
2. 1번의 기본 템플릿이 아닌 별도의 템플릿으로 카테고리를 표시하려면, 카테고리 편집에서 별도의 템플릿을 지정할 수 있습니다. (별도 템플릿)
> 카테고리 템플릿 적용 예:
https://oks-dev.tk/vmagazine/category/fashion/trend-fashion/
이제 남은 부분은 메인 페이지에 원하는 글들을 가져다가 카테고리 목록과 조금 다른 모습으로 표시하는 과정입니다.
계속...
A'rchives Layout