워드프레스에서 포트폴리오 페이지 만들기

포트폴리오(portfolio)는 왠만한 웹사이트에는 빠지지 않고 등장하는 단골 메뉴죠. 회사 홈페이지, 크리에이터 웹사이트, 개인 블로그 할 것 없이 많은 곳에서 “포트폴리오”, “프로젝트”, “작품”, “작업물”, “레퍼런스” 등 다양한 이름으로 사용됩니다.

오늘은 워드프레스에서 간단하게 포트폴리오 페이지를 추가하는 방법을 소개합니다.

젯팩 포트폴리오(Jetpack Portfolio)

우선 포트폴리오 정보를 입력할 공간이 필요하겠죠. 알다시피 워드프레스를 기본으로 설치하면 생기는 메뉴에는 “글(post)”과 “페이지(page)” 외에 무언가 정보를 입력할 수 있는 공간이 없습니다. 물론 포트폴리오 정보를 글이나 페이지에 추가하고 카테고리나 태그를 이용해 분류해도 안될 건 없지만, 그래도 글 또는 페이지와는 조금 다른 무언가가 있으면 좋겠죠.

이럴 때 워드프레스에서는 커스텀 포스트 유형(Custom Post Type)이라는 것을 사용하죠. 워드프레스에서는 기본 콘텐츠 유형인 글과 페이지 외에도 사용자가 다양한 콘텐츠 유형을 자유롭게 만들어 사용할 수 있도록 하고 있는데요.

워드프레스의 주요 개념

예를 들어 음식 사이트라면 “레시피” 유형, 도서 사이트라면 “책” 유형, 모임 사이트라면 “모임” 유형 등을 만들어 사용하면 되겠죠.

지금 우리가 만들 “포트폴리오” 역시 그런 커스텀 포스트 유형 중 하나로 만들어 사용하면 되는데요. 직접 만들 수도 있지만, 여기서는 플러그인을 사용하기로 하겠습니다. 젯팩(Jetpack) 플러그인을 설치하면 추가되는 기능들 중에 “포트폴리오 커스텀 포스트 유형” 기능을 사용합니다.

젯팩 플러그인을 설치한 후 “Jetpack > 설정 > 쓰기” 메뉴에서 아래로 내려보면 “사용자 정의 콘텐츠 유형”이라는 항목이 보입니다. 이곳에서 “포트폴리오” 유형을 활성화시키기만 하면 됩니다.

그러면 이제 관리자 대시보드 메뉴에 새로 “포트폴리오”라는 이름의 메뉴가 추가된 것을 확인할 수 있을 것입니다. “새로 추가”를 눌러 몇몇 포트폴리오 작품들을 추가해 보세요. 사용법은 통상적인 글이나 페이지 편집 방법과 똑같습니다.

포트폴리오 목록 페이지 만들기

포트폴리오를 모두 입력하였으면 이제 모든 포트폴리오를 한곳에서 보여 줄 목록 페이지를 하나 만들어야 겠죠. 어떻게 하면 좋을까요?

여러 가지 다양한 방법이 있지만, 여기서는 코딩이나 별도 플러그인 없이 처리할 수 있는 가장 간단한 방법을 사용하기로 하겠습니다.

우선 새 페이지를 하나 추가합니다. 페이지 제목은 “포트폴리오”, “작품”, “프로젝트” 등 내 포트폴리오 주제와 관련있는 제목을 부여하면 되겠죠. 여기서는 그냥 “포트폴리오”라고 주겠습니다.

그런 다음, 페이지 내용에는 다음과 같이 간단하게 숏코드를 하나 추가해 주면 됩니다.

[portfolio]

이제 페이지를 저장하고 확인해 보면 다음과 같이 포트폴리오 목록 페이지가 만들어진 것을 확인할 수 있을 것입니다.

정말 간단하죠? 만약 여기서 표시되는 순서나 컬럼 수 등을 변경하고 싶다면 숏코드에 몇 가지 옵션을 추가하기만 하면 되죠. [portfolio] 숏코드에서 사용할 수 있는 다양한 옵션들은 Portfoilo Shortcode 문서를 참조하면 되구요.

쿼리 반복문으로 목록 만들기

대부분의 경우 숏코드 방식으로도 충분하겠지만, 숏코드보다 조금 더 세밀하게 목록의 뷰를 조정하고 싶거나 블록 편집기와 어울리는 조금 더 비주얼한 방식을 선호한다면 숏코드 대신 쿼리 반복문(Query Loop) 블록을 사용할 수도 있습니다. (단, 이 기능은 워드프레스 버전 6.0 이상에서만 가능)

앞서의 포트폴리오 페이지에서 숏코드를 삭제하고 대신 “쿼리 반복문” 블록을 하나 추가합니다.

그런 다음 쿼리 반복문에서 사용할 패턴을 하나 선택해 보겠습니다. 목록에서 각각의 포트폴리오 항목을 어떤 형식으로 표시할지를 정할 수 있습니다. “패턴 선택” 창에서 마음에 드는 패턴을 하나 선택합니다. 나중에 교체 또는 수정이 가능하므로 자유롭게 선택하면 됩니다.

그런 다음, 블록 편집기 우측 블록 제어창에서 “글 유형”을 “프로젝트”로 맞춥니다. “프로젝트”가 우리가 포트폴리오 페이지에서 보여주려는 커스텀 포스트 유형이기 때문이죠.

쿼리 반복문 셋팅이 완료되었으면 저장하고 블록 편집기에서 빠져나와 완성된 포트폴리오 목록 페이지를 확인해 보세요. 마음에 드세요?

워드프레스 6.0이 출시되기 전까지는 쿼리 반복문 블록이 커스텀 포스트 유형을 지원하지 않아 별도의 외부 플러그인을 사용해야 했지만 이제는 워드프레스 기본 기능만으로 쉽게 커스텀 포스트 유형의 목록 페이지를 구성할 수 있게 되었네요. 물론 아직 기능에 부족한 부분이 많긴 합니다만 조만간 더 좋아지겠죠?

오늘 소개할 내용은 여기까지입니다. 내용이 부족한 부분이나 궁금하신 점 있으면 아래 댓글이나 무엇이든 물어보세요 코너로 문의 주시면 답변 드리겠습니다.

읽어 주셔서 감사합니다!