brunch

매거진 IMPREZA 테마 활용

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 22. 2022

#12-2. 포트폴리오 상세 페이지 만들기

미니멀 디자인 워드프레스 포트폴리오 홈페이지

먼저, 참고 템플릿의 주요 콘텐츠인 포트폴리오(project)의 상세 페이지를 체크해 보겠습니다.

화면 넓이의 50% 해당되는 영역에 내용이 표시됩니다. 제목, 부가 정보들, 그 아래 사진들이 표시되는데 클릭하면 슬라이드 형태로 볼 수 있는 갤러리 기능도 있습니다. 아래쪽에는 연관 포트폴리오 표시, 그리고 contact 페이지로 연결되는 링크 버튼이 나옵니다.

이제 확인된 포트폴리오 콘텐츠의 레이아웃을 만들어 보겠습니다.

1. 포트폴리오 포스트 타입 이용 설정

워드프레스를 설치하면 기본적으로 정의된 포스트 타입으로 페이지(page)와 글(post)을 이용할 수 있습니다. 워드프레스의 장점 중 하나는 원하는 포스트 타입을 마음대로 추가하여 사용할 수 있는데 유료 테마의 경우 대부분 포트폴리오(portfolio)라는 포스트 타입은 기본적으로 쉽게 사용 가능하도록 미리 개발이 돼 있습니다. Impreza의 경우도 옵션 설정을 이용해서 포트폴리오를 사용하겠다 설정만 하면 따로 코드를 추가할 필요 없이 바로 사용이 가능해집니다.

※ 참고 :

https://developer.wordpress.org/reference/functions/register_post_type/

Advanced 옵션 탭에서 Portfolio를 'On' 하게 되면, 포트폴리오 설정 탭이 추가가 되고, 여기서 slug나 메뉴에 표시되는 이름을 바꿀 수도 있습니다. (기본은 portfolio인데 참고 템플릿처럼 project라는 이름으로 사용하고자 할 때)

이제 포트폴리오(project) 콘텐츠들도 추가, 편집, 관리를 할 수 있게 됐습니다.

2. 콘텐츠 편집 방법 결정 및 적용

참고 템플릿을 보면 각 포트폴리오 편집 시 고려해야 할 부분은 크게 세 가지입니다.

- 제목 / 부가정보 / 갤러리

페이지 빌더가 있기에 매번 같은 템플릿으로 내용을 작성해도 되겠지만, 상단에 공통적으로 나오는 부가 정보까지 매번 편집을 하는 건 번거로운 일이 될 수 있습니다. 이럴 땐 워드프레스의 custom field를 이용하여 부가 정보는 따로 작성을 하고 약속된 위치에 정보를 표시하는 방법을 이용하면 좋습니다.

그럼 이걸 코드 작업을 일일이 해야 하느냐? 그럴 필요 없이 이미 잘 개발된 플러그인이 있으니 그걸 설치하면 되겠습니다. > https://wordpress.org/plugins/advanced-custom-fields/

※ https://brunch.co.kr/@oksambari/16

CMS로서의 워드프레스 활용법

워드프레스 활용 이야기 | 워드프레스가 왜 좋은 것인가? 알려져 있는 많은 장점들이 있지만, 저에게 좋은 서비스 툴이라고 내세울 수 있는 특징 하나만 묻는다면 안정적이면서 잘 짜인 연결고

brunch.co.kr/@oksambari/16

플러그인을 설치 및 활성화하면, 다양한 종류의 필드를 만든 다음, 어떤 콘텐츠 편집에 이용할 것인지 지정할 수 있습니다. 기획 및 디자인상 표시될 필드들을 생성 후 포트폴리오 편집 시 이용하겠다 설정 후, 편집 화면을 보면 방금 약속한 필드들이 추가된 걸 볼 수 있습니다.

원래의 편집 공간은 이제 페이지 빌더를 이용, 갤러리 표시를 위한 이미지 등록용으로 이용합니다. 그리드 요소를 사용하여 표시될 이미지들을 선택 후 표시하는데 클릭했을 때 동작을 popup 형태로 설정해 주면, 검은 배경의 슬라이드 갤러리도 표시를 할 수 있게 됩니다.

(※ 이미지 클릭 시 이미지 하나만 집중해서 보면서, 슬라이드 형태로 넘겨 보는 것은 jQeury를 이용한 플러그인들을 이용하면 구현이 가능합니다. 구글에서 'jquery lightbox gallery' 검색. 따라 하기 사이트에선 Impreza Theme에 개발된 방식을 이용)