brunch

매거진 IMPREZA 테마 활용

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 29. 2021

#8-3. 뉴스 리스트, 상세 페이지 템플릿 만들기

잡지 뷰 사이트 만들기

스토리(portfolio)와 더불어 참고사이트의 또 다른 주요 콘텐츠인 뉴스(post)의 목록과 상세 페이지를 만들 차례입니다.

우선 콘텐츠가 있어야 가능한 작업들이라 이번에도 FakerPress 플러그인을 이용해서 임시 콘텐츠들을 만들었습니다. 총 15개의 글, 내용에는 5개의 더미 이미지들이 들어가도록, 그리고 목록에서 쓸 대표 이미지는 1000x1300 사이즈로 만들어지도록 했습니다.

의도대로 잘 만들어졌는지 확인해 봅니다. (※ 각 글의 요약글은 이후에 목록에서 쓰이기 때문에 따로 적어줘야 합니다)

콘텐츠가 준비되었으니 이제 본격적으로 목록과 상세 페이지를 만드는 과정을 시작합니다.

1. 뉴스 목록 페이지 만들기

전체 뉴스 콘텐츠들을 표시할 페이지를 하나 만듭니다. 이전에 스토리 목록 페이지와 거의 비슷한 구조이므로, 스토리 페이지 전체를 복사한 다음 붙여 넣고 시작하면 더 편합니다. 그다음, 그리드 요소에서 불러올 콘텐츠와 한 번에 보일 콘텐츠 개수, 그리고 아래 페이지 처리 부분만 설정 내용을 변경하면 되겠습니다.

목록에서의 각 한 개의 콘텐츠가 표시되는 디자인은 'News-grid'라는 그리드 레이아웃을 만들어서 지정했습니다. [ 이미지 / 제목 / 요약글 ]이 나오는 구조이고 사진은 가로가 더 긴 형태로 나오도록 비율을 지정해 줬습니다.

이렇게 하면 목록 페이지는 완료가 됩니다.

2. 뉴스(post) 상세 내용이 표시되는 템플릿 만들기

먼저, 상세 내용이 표시되는 템플릿의 디자인을 파악해 보겠습니다.

페이지와 같은 위치의 선 아래로 왼편에는 타이틀과 텍스트(스크롤 시 고정)가 표시됩니다. 오른편에는 사진들이 표시됩니다. 아래쪽에는 글의 태그들과 연관 글들 4개가 표시되는 구조입니다.

글을 편집하는 화면을 다시 확인해 보겠습니다. 더미 콘텐츠를 만들 때 5개씩 이미지들이 콘텐츠 편집에 들어가도록 했었습니다. 기획 의도상 왼편에는 사진을 설명하는 글이 나와야 하는데, 만약 편집 에디터에서 글도 넣고 이미지도 같이 넣은 다음 이걸 분리해서 사용하려면 뭔가 작업이 필요하게 됩니다.

아예 텍스트를 따로 넣을 방법만 추가된다면 딱 좋을 것 같습니다.

이런 상황을 위해 개발된 플러그인이 이미 있습니다. 워드프레스의 기본 편집 화면에 추가로 어떤 필드를 넣을 수 있게 하는 것인데요, 바로 'Advanced Custom Fields'입니다. 다양한 종류의 필드들을 편집 화면에 추가해서 글의 부가 정보들로 데이터베이스에 같이 저장이 될 수 있게 해 줍니다. 이 좋은 기능을 가진 플러그인을 Impreza 테마 개발자들은 Addon 형태로 Pro 버전을 제공해 줄 뿐 아니라, 더 나아가 페이지 빌더에서 쉽게 쓸 수 있도록 개발까지 더 해 놓았습니다.

▼ 템플릿 파일 내에서 코드 작업으로 정보들을 불러와야 하는 것을 페이지 빌더에서 쉽게 연결해서 표시할 수 있도록 해 놓음

그럼 이제 글 편집 화면에 필드를 넣어보겠습니다. 플러그인을 설치하고 활성화하면, 왼편에 Custom Fields라는 메뉴가 추가됩니다. 새 필드 그룹을 'News Desc.'라는 이름으로 하나 만들었습니다. 설명글에도 워드프레스 기본 편집기 스타일의 편집 방식 그대로를 쓰면 좋을 것 같아 'Wysiwyg Editor' 형태의 필드를 하나 넣었고, 이 필드는 뉴스 글(post)에서만 쓰도록, 그리고 편집 위치는 제목 아래로 있게 지정을 했습니다. (한 그룹 내에 여러 필드 형태를 넣을 수 있음)

이제 글 편집 화면을 다시 들어가 보면, 뉴스용 왼편 텍스트를 입력할 다른 편집 필드가 추가된 것을 볼 수 있습니다.

뉴스 글의 내용은 완성이 됐으니, 글이 표시될 상세 페이지 템플릿을 만들 차례입니다.

'Impreza > Content templates'에서 템플릿 하나를 만듭니다. 칼럼을 2개로 나눠서 왼편에는 ACF로 추가된 필드에서 입력된 내용, 오른쪽에는 원래의 워드프레스 편집기의 내용(이미지들)이 표시되도록 했습니다. 연관 글은 현재의 글과 같은 분류의 것을 불러 올 수도 있고, 또는 임의의 글을 불러와서 표시되도록 할 수 있습니다.(목록 디자인은 뉴스 페이지 것과 동일) 왼편의 칼럼은 사진이 많아 스크롤이 될 때 계속 따라붙어서 표시되도록 sticky 되는 옵션을 설정했습니다.