brunch

매거진 IMPREZA 테마 활용

라이킷 12 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Feb 13. 2022

#11-4. 글 상세 페이지 템플릿 만들기

'펜트하우스'도 워드프레스 사이트

글 목록이 나오는 페이지들에서 사진이나, 글 제목을 클릭하면 내용이 나오는 상세 페이지가 열립니다. 이번에는 이 상세 페이지를 준비하는 과정입니다.

참고사이트의 경우 크게 세 가지의 레이아웃을 이용 중인데요, 일반 글, pes 글, 그리고 legacy 글용 상세 페이지들입니다.

공통적으로 대표 이미지가 맨 상단에 표시됩니다.

가장 많은 양을 차지하는 글(post) 상세 페이지에는 좌측에 로고가 표시되는 공간이 존재합니다.

그다음 레거시 카테고리 글의 경우 글의 상세 페이지와 거의 비슷한데 왼쪽의 로고 공간이 없이 글 내용이 더 넓게 표시되는 레이아웃입니다.

사이드 영역을 채우는 베너나, 위젯 등도 각기 다르게 표시

별도의 글 형식인 pes 관련 글의 상세 페이지는 카테고리나 작성자 정보 없이 타이틀, 본문, 전후 내비게이션, 그리고 오른쪽 사이드 영역만 있습니다.

이제 순서대로 템플릿을 제작해 봅니다.

1. 글(post) 상세 페이지 템플릿 만들기

'Impreza > Content templates'에서 'Single - Post'라는 이름의 템플릿을 하나 만들었습니다. 그다음 테마 옵션을 통해 앞으로 글은 이 템플릿을 이용해서 상세 내용을 표시하라고 설정해 줍니다.

대표 이미지(post image)가 표시되는 섹션 아래에는 칼럼을 세 개로 나눠서 표시될 화면 요소들을 넣습니다. 워드프레스로 작성한 글 내용 위쪽으로 글의 카테고리 정보, 제목, 작성일, 작성자가 표시되는데 한꺼번에 중앙 정렬과 공간을 갖도록 세로형 wrapper로 묶어서 표시했습니다.

글의 본문 아래에는 이 글에 설정된 모든 카테고리와 태그들이 표시되는데, 참고사이트와 같이 카테고리와 태그를 같이 표시될 수 있게 가로형 flex wrapper안에 카테고리와 태그들이 옆으로 늘어서게 한 다음, css로 ', '표시와 공간을 추가했습니다.

글 아래쪽에는 전, 후로 같은 카테고리의 글들을 계속 이어볼 수 있게 내비게이션을 넣었습니다.

오른쪽 사이드 영역에는 베너 이미지와 카테고리, 보관함(월별 글 묶음) 위젯을 넣었는데 페이지 빌더를 이용한 화면 편집 시 '외모 > 위젯'에서 사용되는 각종 워드프레스 기본 위젯들도 쓸 수 있습니다.

글의 본문 아래에는 같은 카테고리 내의 글 몇 개를 좌우 슬라이드 형태로 원하는 개수만큼 표시될 수 있도록 '캐러셀' 요소를 넣었습니다. 연관 글을 디자인대로 표시하기 위해 1:1 비율의 이미지와 타이틀이 나오는 레이아웃도 하나 추가했습니다.

이렇게 하면 이제 이 템플릿을 통해 글이 표시가 되는 것을 볼 수 있습니다.

> https://oks-dev.tk/logohouse/provident-vel-rerum-non-tempore/

(※ 테스트 사이트를 해외 호스팅으로 옮겨 놓은 관계로 접속이 느릴 수 있습니다.)

2. 레거시 카테고리 글 상세 페이지 템플릿

1에서 만든 레이아웃과 유사하고 칼럼의 수와 넓이만 살짝 다릅니다. 그러므로 1번의 템플릿을 복사해서 만들면 되겠습니다. 템플릿을 복사 후 왼쪽에 있던 로고 이미지용 칼럼은 제거, 그리고 전체 칼럼 크기를 다시 설정해 줍니다. 오른쪽의 사이드 영역도 원하는 베너나 위젯, 연관 글 등 기본적인 글의 템플릿과 다르게 구성이 가능합니다.

이때 레거시 글은 레거시 글들 사이에서만 전, 후 이동이 되어야 하므로, 전/후 내비게이션 요소를 '메인 카테고리(legacy)'로 설정을 해야 합니다. (※ 모든 레거시 글들을 순서대로 읽을 수 있게)

이제 이 템플릿을 연결하는 작업이 남았는데요, 전에 다른 과정에서 특정 카테고리에 기본 목록 템플릿과 다른 원하는 목록 템플릿으로 바꿔서 설정할 수 있었던 것 같이, 글의 상세 내용 표시를 위한 템플릿도 카테고리에 따라 다르게 설정이 가능합니다.

모든 레거시 글들은 현재 같은 '메인 카테고리 Legacy'로 묶여 있습니다. 이 분류의 편집을 들어가 보면, 이 분류만의 싱글 페이지를 설정할 수 있는 옵션이 있습니다. 즉, 메인 카테고리가 레거시로 돼 있는 모든 글은 이제 1번의 기본 글 상세 페이지 템플릿이 아니라, 2번의 레거시 전용 상세 페이지 템플릿으로 글이 표시될 수 있습니다.