#12-3. 포트폴리오 목록 페이지 만들기
미니멀 디자인 워드프레스 포트폴리오 홈페이지
포트폴리오 콘텐츠들이 준비됐다면 이제 목록(list)을 만들 차례입니다.
우선 참고 템플릿의 Projects 페이지의 디자인 및 동작을 확인해 보겠습니다.
pc 화면에서는 2 칼럼으로 서로 크기가 다른 이미지들이 나열이 되는데, 이미지 위에 마우스 커서를 올리면(hover) 포트폴리오마다 등록된 대표색으로 배경이 덮이면서 제목이 표시되는 동작을 하게 됩니다. (모바일 화면에서는 1 칼럼으로 바뀜)
추가로 공간에 대한 스타일 설정도 확인해 봅니다.
콘텐츠의 양쪽 여백은 padding 40px이고, 리스트에서 포트폴리오 사이의 간격은 32px입니다.
이제 확인된 내용을 가지고 목록을 만들어 보겠습니다.
참고로, 워드프레스 콘텐츠들의 목록은 모두 Loop로 만들어집니다. 데이터베이스에 저장된 콘텐츠들을 불러와서 이용할 때 php의 쿼리문을 안 써도 워드프레스에서 개발한 규칙화된 코드들로 쉽게 콘텐츠들을 활용할 수 있는 것으로 보면 될 듯합니다.
보일 콘텐츠를 불러다 html로 화면에 포함시키는 역할을 Loop가 하고, 거기에 css 스타일 정의를 추가, 필요시 js 스크립트를 추가하여 목록을 만들 수 있게 됩니다.
커스텀 테마를 만들거나 테마를 커스텀하여 제작할 때 주가 되는 작업인데, 시간도 꽤 들게 됩니다.
!!!
'Impreza'가 쉽고 잘 만들어졌다고 생각하는 이유 중 하나는 이런 루프로 만들 수 있는 거의 모든 리스트를 별도 php 파일 내 코딩 없이 어드민 내에서 뚝딱 만들 수 있다는 점입니다. 거기에 스타일까지 마음대로 적용도 가능하고요.
그럼 실제 구성하는 과정을 정리해 보겠습니다.
포트폴리오 리스트를 위한 그리드 레이아웃 만들기
리스트 안에서 표시되는 각 1개의 콘텐츠 조각의 레이아웃을 만드는 거라 생각하면 되겠습니다.
Impreza > Grid Layouts에서 'Project Grid'라는 이름의 레이아웃 하나를 만들었습니다.
포트폴리오의 대표 이미지를 맨 위에 표시합니다. 이미지는 비율 상관없이 이미지의 사진 비율대로 표시가 될 겁니다.
▼ 이미지 아래에 Vertical Wrapper를 두고 그 안에 표시될 제목이 정 중앙에 위치하도록 설정합니다.
제목이 표시될 때 일정 공간을 띄우고 표시될 수 있게 Vertical Wrapper에 Padding을 설정하고, 이미지 위를 모두 덮을 수 있게 position 속성으로 위아래, 좌우 위치를 모두 0으로 설정합니다.(이미지를 다 덮음) 덮어 씌우기 된 영역은 마우스를 올리기 전에는 보이지 않았다가(opacity:0) 마우스를 올렸을 때 보이도록(opacity:1) Hover Effect를 설정했습니다. 각 포트폴리오마다 대표색으로 덮여야 하는데 임시로 #999999라는 색으로 배경색을 입력했습니다.
+ 마우스 호버 시 배경색 바꾸기
jQeury 스크립트를 이용해서 임시로 지정한 #999999 색의 배경색을 바꿀 수 있습니다. 그런데 스크립트로는 일단 화면 구성 요소에 정보가 포함이 돼 있어야 원하는 작동을 만들 수 있습니다.
그래서 그리드 레이아웃을 만들 때 Vertical Wrapper 내에, 화면에는 표시되지 않지만(hidden 클래스 추가), 정보는 포함하도록 Custom Field 정보를 포함시킵니다.
※ Impreza에 미리 약속된 클래스들
https://help.us-themes.com/impreza/modifications/css-helpers/
필요했던 동작을 다시 한번 정리해 봅니다.
-> 마우스를 포트폴리오 이미지 위에 올리면, 대표색으로 이미지를 덮으면서 제목이 표시
배경색만 아까 임시로 #999999로 설정했던 것을 대표색으로 바뀌도록만 하면 되겠지요. jQuery 스크립트 코드가 이 부분을 보완해 줄 수 있습니다.
'.w-grid-item-h' 클래스명을 가진 html 요소 위에 마우스가 올려질 때(mouseenter), 대표색을 가져다가 #999999로 설정한 배경색 대신 대표색으로 바꿈
jQuery는 css의 요소 선택자를 이용할 수 있어서 간단한 몇 줄 코드로 화면에 같은 클래스명을 가진 모든 화면 요소를 대상으로 작동시킬 수 있습니다.
포트폴리오 목록을 페이지에 추가
마지막으로 포트폴리오 목록을 'Projects'라는 이름의 페이지에 추가를 할 겁니다. 그리드 레이아웃이 준비가 됐다면 리스트를 넣는 것은 쉽습니다.
페이지 편집 시 들어갈 내용들과 함께 'Grid' 요소를 추가했습니다. 보일 콘텐츠는 포트폴리오들이고 6개씩 화면이 스크롤되면 계속 아래로 추가되는 방식으로 나오게 했습니다.
'Appearance' 탭에서 처음에 만들었던 그리드 레이아웃을 지정하고, 이미지 사이즈가 다른데 계속 붙어서 표시될 수 있게 'Masonry' 형태를 선택합니다. 칼럼 수는 2개로 사이 공간을 16px로 입력합니다. (16x2=32px 디자인된 간격)
끝으로 모바일 화면을 위해 원하는 사이즈에서 1 칼럼으로 전환되도록 설정하면 되겠습니다.
여기까지 하면 프로젝트를 모아 보여주는 페이지가 완성됩니다.
> https://oks-dev.tk/minimalgrid/projects/
다음은 메인 페이지의 슬라이드를 만들 차례입니다.
계속...
