brunch

매거진 IMPREZA 테마 활용

라이킷 11 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Nov 10. 2021

#4-3. 글 상세 내용이 표시되는 템플릿 만들기

IMPREZA 테마로 카카오 블로그 따라 만들기

메인 화면 맨 아래 최신 글 목록에서 하나의 글을 클릭하게 되면 글의 상세 내용을 보는 페이지로 이동을 하게 됩니다. 이제 이런 글의 내용이 표시되는 템플릿을 원하는 디자인대로 만드는 과정이 필요합니다.

템플릿을 만든다는 것에 대한 의미를 먼저 알면 좋습니다. 워드프레스에서 글(post)의 상세 페이지는 대개 테마의 파일들 중 single.php라는 파일에 의해 화면이 표시가 됩니다. (※ https://developer.wordpress.org/themes/basics/template-hierarchy/) Impreza 테마의 장점 중 하나는 이 템플릿 파일에 비교 구문을 두어서 만약 어드민에서 설정한 템플릿 구조가 있다면 그걸 사용해서 화면을 표시하라는 규칙을 적용할 수 있는 방법이 제공된다는 점입니다. php 코드 파일을 열어 수정할 필요 없이 페이지 빌더를 이용해서 화면 레이아웃을 마음대로 만들 수 있게 된 겁니다.

디자인에 따라 어떤 구조를 만들어야 하는지부터 알아봅니다. 콘텐츠 템플릿은 Impreza > Content templates에서 만들 수 있습니다. 'Single Post'라는 이름의 템플릿을 하나 만들었습니다.

크게 3개의 로우(섹션)로 나뉜 구조입니다.

1번은 타이틀과 작성일이 표시가 되고 있습니다. (sns 공유 기능은 필요시 플러그인으로 날짜와 같은 라인으로 오른쪽에 정렬시키면 되겠습니다.) 2번에는 글 편집기에서 작성한 글의 콘텐츠 전부와 그 아래 글이 가진 태그들, 그리고 작성자 정보가 표시되는 부분, 그리고 오른쪽에는 사이트 전체의 주요 태그(지정한 태그 노출), 전체 태그가 표시되는 부분이 칼럼으로 나뉘어 있습니다. 3번에는 이 글의 연관 글(같은 카테고리 또는 태그를 가진 글들 중 몇 개)이 표시됩니다. 이를 통해 완성된 전체 템플릿 구조도 비교를 위해 미리 소개를 했습니다.

그러면 각 섹션을 어떻게 구성했는지를 소개해 보겠습니다.

1번 섹션

로우의 아래쪽으로 칼럼의 콘텐츠가 정렬하면서 공간이 존재하는 구조입니다. 배경으로는 이 글의 특성 이미지(featured image)가 사용이 되고 있습니다.

이건 모든 글의 기본적인 레이아웃이 될 템플릿을 제작하는 것이므로 각 글이 열릴 때 현재 글의 타이틀, 작성일이 알아서 표시가 되어야 합니다. 템플릿 파일에서 작업 시에는 개발용 태그들을 사용하게 되는데요, 이걸 페이지 빌더에서 사용할 수 있게 개발이 돼 있는 것으로 보시면 되겠습니다.

이제 각 글을 열면 h2 태그로 지정된 타이틀과 아래 작성일이 표시되고, 배경 이미지로는 특성 이미지가 표시되는 걸 볼 수 있습니다. 이때 배경이 흰색 여백이 있다면 글자가 제대로 표시가 안 되겠지요. 이런 걸 방지하기 위해 백그라운드 > 그 위에 오버레이(반 투명 박스) > 그 위에 콘텐츠가 있게 할 수 있습니다. 로우 설정에서 오버레이를 추가해 주면 되겠습니다.

2번 섹션

먼저 로우 내에 칼럼을 나눠주겠습니다. 로우는 총 12개의 칼럼으로 나눌 수 있고 간단한 분수식을 넣으면 원하는 대로 배치할 수 있습니다. 왼쪽과 오른쪽 칼럼 사이에 디자인대로 구현을 위해 빈 공간(1/12)을 하나 넣었습니다.

왼편에는 크게 글의 내용, 글에 지정한 태그들, 작성자 정보를 넣어줍니다.

사이트의 기획상 여러 작성자들이 있고 각각의 작성자 페이지가 나오는 구조이므로, 프로필 설정에서 각 작성자의 설명 및 그라바타를 설정해야 합니다. 그라바타에 가입을 하면 이 메일 주소와 일치하는 프로필 사진이 자동으로 연동됩니다.

오른편에는 전 사이트에서 사용 중인 태그들을 공통으로 표시되게 됩니다. 참고로 Impreza의 '그리드(Grid)' 요소는 글만 가져와서 표시하는 요소가 아니라, 워드프레스 관련 콘텐츠를 불러오는 거의 모든 개발 내용을 대체할 수 있는 요소라 보시면 되겠습니다. 위쪽에는 지정된 태그들이 표시되도록 한 것이고, 아래쪽에는 전체 태그들이 표시되도록 했습니다. 각 태그들은 #이 없는 상태이고, 버튼처럼 보이게 하면서, 아래쪽 태그들만 한 줄에 여러 개 나오도록 해야 하기 때문에 이 부분은 css를 추가해서 해결해야 합니다.

3번 섹션

글과 같은 분류(카테고리 또는 태그)를 가진 연관 글들이 표시가 되어야 하는 섹션입니다.

메인 페이지의 최신 글 리스트에서는 3개의 칼럼을 가진 리스트가 돌아가는 형식이었기 때문에 캐러셀 요소를 이용해서 글 하나의 디자인만 만들어 적용을 할 수 있었지만 세로로 열을 가진 형태는 이 케러셀 요소로는 구현이 어려웠습니다. (가로로 전환이 되는 형태, 한 슬라이드 당 보이는 칼럼수를 지정하는 방식, 화면 사이즈에 따라 각 칼럼의 넓이를 알아서 계산) 그래서 여기는 3개의 글을 불러올 수 있는 그리드를 3개 사용해서 구현하는 방식을 사용해 봤습니다.

3개의 그리드 중 맨 처음 것만 처음 보이게 한 다음, 위쪽의 좌우 버튼을 클릭하면 다른 그리드가 나오는 것을 처리하기 위한 과정입니다.

원리는 이렇습니다. 첫 번째 그리드에만 편집 화면에서는 active 클래스를 넣어줍니다. 그리드 세 개를 모두 숨기는 css(display:none)를 적용하고, active인 것만 display:block으로 바꿔주어 해당 그리드만 나오게 하는 방식입니다. 등장 효과를 위해 fadeIn이라는 애니메이션을 추가했습니다.

이걸 전환하는 것은 위쪽 좌우 버튼을 이용하면 되겠습니다. 버튼 클릭 시 이전 또는 다음 그리드 요소에 active를 넣는 것은 jQuery를 이용해서 적용했습니다. 처음과 끝을 체크해서 순환되게 하면 되겠네요. (왼쪽 클릭했는데 0보다 작으면 맨 끝 그리드로, 오른쪽 클릭했는데 총 개수보다 많으면 처음으로)