brunch

매거진 IMPREZA 테마 활용

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Nov 24. 2021

#5-2. 포트폴리오 목록, 상세 페이지 템플릿 만들기

IMPREZA 테마로 포트폴리오 사이트 만들기

참고사이트를 보면 포트폴리오 목록 화면이 도메인 주소 첫 화면에서 바로 나오고 있습니다. 메인 페이지를 하나 만들고 그 안에 포트폴리오 콘텐츠들을 불러와서 부여주는 목록(Grid)이 준비가 되면 되겠습니다. 여기에 상단에 필터링 기능이 있어야 하고요.

목록을 만들기 위해서는 우선 콘텐츠가 있어야겠죠. 이번에도 FakerPress 플러그인을 이용해서 임시 콘텐츠를 만들어 사용합니다. 목록에서 사용되는 대표 이미지의 사이즈는 735x490으로 확인이 되고, 이 사이트에서는 전체 이미지를 이 사이즈로 통일을 해서 이용 중입니다.

참고로 최소 이미지의 사이즈는 어느 시점에 1 칼럼의 뷰로 전환이 되는지와도 관련이 있습니다. 디자인상 767px까지는 1 칼럼으로 반응형 디자인이 정의가 돼 있고, 좌우 양쪽의 공간(15px)을 빼면 대표 이미지가 가로 735px이면 거의 모든 화면에서 이미지가 꽉 차게 보일 수 있다는 게 됩니다.

FakerPress 플러그인 설치 후 콘텐츠 분류용 카테고리 3개를 만들어준 뒤, 총 18개의 임시 콘텐츠를 만들었습니다. 포스트 타입을 '포트폴리오'로 지정을 하고, 분류는 'Portfolio Categories'로 지정, 대표 사진 사이즈는 735x490으로 만들어지도록 설정했습니다.

1. 포트폴리오 목록 만들기

콘텐츠가 있으니 이제 목록 디자인을 만들 차례입니다. 디자인을 살펴보면 처음에는 대표 이미지들만 3개의 칼럼으로 나뉘어 표시되었다가, 마우스를 올리면 반투명 배경 위로 타이틀이 등장하는 방식입니다.

표시 방식이 확인되었으니 이제 Impreza > Grid Layouts에서 그리드 레이아웃 하나를 추가합니다. 새로 구성하기 전에 '템플릿'을 클릭해 보니 비슷한 방식의 그리드 템플릿이 이미 있네요. 클릭해서 구조를 불러온 뒤 일부를 수정해서 이용하겠습니다.

디자인에 없는 카테고리 요소는 빼고, 비율을 이미지 크기대로 조정했습니다. 그리고 마우스를 올렸을 때(hover) 효과에서 Vertical Wrapper에서는 색을 조정했고, 타이틀 요소에서는 아래쪽에 있다가 원래 위치로 오는 것으로 수정을 했습니다.

이제 메인 페이지에 'Grid'요소를 추가해서 포트폴리오 콘텐츠를 가져다 표시하는 설정을 해 줍니다. '필터' 탭에서 필터가 되는 '포트폴리오 카테고리'를 지정해 주면 목록 상단에 콘텐츠가 필터링되는 기능이 추가됩니다.

요소 옵션에 미리 준비된 필터의 모습과 디자인이 살짝 다르네요. 이 부분은 css를 추가해서 해결해 줍니다.

2. 포트폴리오 상세 페이지 템플릿 만들기

목록에서 포트폴리오 하나를 클릭하면 해당 포트폴리오의 상세 내용이 나오는 페이지로 이동이 됩니다. Impreza 테마를 이용하면 이 화면도 어드민에서 콘텐츠 템플릿을 만들어 적용할 수 있습니다.

▼ 구조는 간단한데 여기서 기존의 다른 작업 과정 설명과 조금 다른 설정이 적용이 되는데요, 포트폴리오는 각 포트폴리오 상세 내용도 페이지 빌더를 사용해서 구성합니다. 그래서 'Post Content'로 포트폴리오의 편집 내용을 불러오면 섹션 아래 섹션이 들어가 버리는 상황이 발생할 수 있습니다. 이걸 막기 위해 Post Content 요소의 설정에는 안쪽 또는 바깥쪽 섹션 하나를 무시하라는 설정을 해 줄 수 있는데, 디자인상 포트폴리오 편집 시 칼럼도 나누고 해야 하므로 바깥 섹션을 무시하라는 설정을 했습니다.

3. 포트폴리오 편집

이제 각 포트폴리오 편집 시 마음대로 페이지 빌더를 이용해서 내용을 구성할 수 있습니다. 참고사이트를 보면 오른쪽 설명문은 화면 스크롤 시 고정이 되어 표시가 되는데, 이건 칼럼 설정에서 적용할 수 있는 방법이 있습니다. (※ 이미 테마에 스크립트 개발이 돼 있는 것)

하나의 샘플용 로우가 완성이 되면 로우를 빌더의 템플릿으로 저장을 할 수 있고, 템플릿화 하면 매번 로우를 하나하나 만들 필요 없이 클릭으로 로우 하나씩을 통째로 추가를 할 수 있습니다.

또는 아예 만들어진 템플릿을 포트폴리오의 기본 구조로 미리 세팅도 가능합니다. (WPBakery 페이지 빌더 > 일반 설정) 이렇게 설정해 놓으면 앞으로 새 포트폴리오를 추가하면 아예 기본 템플릿이 적용되어서 시작할 수도 있게 됩니다.

페이지 빌더를 가지고 콘텐츠를 편집하는 장점이 있으니 특정 포트폴리오는 또 다른 디자인의 페이지를 만드는 것도 물론 가능합니다.

여기까지 적용하고 사이트를 방문해 보면 이제 포트폴리오 목록과 상세 페이지까지 완성된 모습을 볼 수 있습니다. > http://oks-together.hol.es/portfol/

(※ 전, 후 포트폴리오로 이동하는 양쪽 내비게이션은 테마에 있는 기본 방식을 이용했습니다)

Impreza 테마의 장점은 템플릿을 어드민에서 만들어 적용하는 것 외에도, 페이지 빌더가 테마 개발자에 의해 많은 부분 간소화되고 직관적으로 커스텀 개발이 돼 있다는 부분도 있습니다.

간혹 테마를 설치하면 메뉴가 엄청나게 많아지고 각종 안내문에 이 설정은 여기서 저 설정은 저기서 하는 등 시간이 지나면 제작한 사람도 살짝 헷갈리게 만드는 기존 사용해본 몇몇 테마와는 많은 차이가 있어서 저는 이 테마를 접한 이후 다른 게 눈에 들어오지 않게 되었습니다. 혹 나에게 맞는 테마 찾기가 어려우셨다면 아 이렇게 만들면 굉장히 편리하겠구나 하고 참고가 되셨으면 하네요.

다음에는 블로그 글(post)을 위한 목록 템플릿과, 상세 페이지 템플릿을 만드는 과정으로 이어집니다.

계속...

keyword