brunch

매거진 IMPREZA 테마 활용

라이킷 11 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 19. 2021

#7-4. PHOTO 갤러리 페이지

그리드 디자인 사이트 만들기

이번 과정에서는 사업장 이미지 갤러리를 표시하는 페이지를 제작하는 방법을 소개해 보려고 합니다.

먼저 참고사이트의 기획 및 디자인 의도를 파악해 보면 아래와 같습니다.

- PHOTO 페이지에는 전체 사업장 사진들이 표시됩니다.

- SORT 메뉴 중 상점 버튼을 누르면 photo의 하위 페이지 개념의 페이지 주소로 이동하고 각 상점의 갤러리가 표시됩니다.

- 사진 위에 마우스를 올리면 hover 효과가 나타나고 클릭 시 갤러리 이미지들을 하나씩 볼 수 있는 라이트박스 모드가 시작됩니다.

그런데, 참고사이트에서 몇 가지 문제점이 확인이 되어 이 부분에 대한 해결 방법부터 찾아야 했습니다.

1. 좌상단 주 메뉴에서 현재 위치 표시가 정확히 작동을 하지 않습니다. (외모 > 메뉴가 아닌 단순 ul 구조로 퍼블리싱을 한 것으로 판단)

2. 주소에 php 확장자가 나오는 것으로 보아 워드프레스의 페이지 구조가 아닌 별도의 php 파일을 이용해서 페이지를 구성한 것으로 보입니다.

문제점에 대한 해결 방법을 확인해 보겠습니다.

첫 번째,

워드프레스에서 간편하게 html ul 리스트를 이용해서 메뉴를 만들지 않고, '외모 > 메뉴'에서 메뉴를 관리하고, 헤더에서 이걸 불러다 보여주는 방식으로 메뉴를 표시하는 데에는 이유가 있습니다.

wp_nav_menu( array $args = array() ) 함수를 통해 메뉴가 표시가 되면 메뉴에 기본적인 클래스명들이 자동으로 붙게 됩니다. 현재 메뉴의 아이디는 몇 번인지, 페이지인지, 현재 보는 페이지와 같은 메뉴인지 또는 현재 보는 페이지의 부모 페이지인지 등 각종 정보들을 워드프레스가 알아서 클래스로 추가해 주기 때문에 이 클래스를 잘 활용해서 css를 적용할 수 있게 되는 것이죠.

두 번째,

특정 이미지들만 불러오는 페이지를 만들기 위해 별도의 php 파일을 만들어 메뉴로 구성을 할 필요 없이, 워드프레스의 페이지로 제작을 하면 됩니다. 페이지 빌더가 있기 때문이기도 하고, 위 첫 번째 내용에서도 나왔듯이 그래야 모든 프로세스가 잘 맞물려 돌아갑니다. 워드프레스의 템플릿 구조에 따라 만들어진 파일이 아닌 경우 워드프레스는 이걸 제대로 인식을 하지 못 합니다.

해야 할 작업들이 확인되었으니, 이제 Impreza 테마와 페이지 빌더의 특징을 활용하여 PHOTO 갤러리 페이지 및 그 하위 페이지들을 만드는 과정을 진행합니다.

Impreza 테마의 장점 중 하나는 미디어 첨부 파일에도 카테고리를 부여할 수 있게 이미 개발이 돼 있다는 겁니다. Impreza > Theme option > Advanced > 'Media Categories' 기능을 켜면 사진에 대한 카테고리도 만들 수 있고, 사진 첨부 시 해당 이미지에 카테고리를 지정할 수 있게 됩니다.

카테고리와 같은 분류를 할 수 있으면 좋은 점은 무엇일까요?

페이지 편집 시 '그리드(Grid)' 요소를 이용해서 한꺼번에 분류된 이미지들을 불러올 수 있습니다. 더불어 그리드 요소로 첨부파일들을 불러올 수 있으니 목록 디자인도 마음대로 할 수 있습니다.

마우스를 올렸을 때 검은 호버 박스를 추가한 'Photo Grid' 레이아웃을 하나 만들고 그리드에 연결합니다.

클릭하면 라이트박스 형태로 이미지들을 볼 수 있는 기능도 이미 적용할 수 있는 방법이 있습니다. 'Opens a post image in a popup'으로 각 그리드의 링크를 조정해 주면 라이트박스 기능이 작동합니다.

나머지 정보들은 앞 과정에서 준비된 레이아웃 기준들을 이용해서 페이지에 배치하면, 간편하게 PHOTO 페이지가 완성될 수 있습니다.

각 상점에 대한 갤러리 페이지는 이 완성된 'PHOTO' 페이지를 그대로 복사하여 이용합니다. 불러올 이미지들 카테고리는 페이지에 맞는 것으로 제한하고, 부모(Parent) 페이지로 'PHOTO'를 지정합니다. 그러면 'PHPTO'와 'SHOP-1'은 부모 자식 관계가 됩니다. (자식 페이지 주소가 열리면 주 메뉴 > 부모 페이지에 current-page-ancestor라는 클래스가 추가되어 css로 현재 위치 상태를 표시할 수 있음 )