brunch

매거진 IMPREZA 테마 활용

라이킷 4 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 15. 2020

#2-4. 목록(카테고리) 탬플릿 제작

IMPREZA로 KMONG 블로그 사이트 따라 만들기

워드프레스 사이트를 보다 보면, 카테고리, 태그, 작성자명 등에 링크가 걸려있는 것을 볼 수 있습니다. 이 목록의 주소를 메뉴로 구성을 하면 바로 해당 화면으로 이동할 수 있게 할 수도 있고요.

클릭하면 같은 분류로 묶인 포스트들이 보이는 목록(Archive) 페이지가 나오게 되는데, 이것까지 준비를 하면 참고사이트(크몽 블로그)와 비슷하게 [메인화면 - 목록 - 글]이 유기적으로 돌아가는 사이트의 구조가 어느 정도 완성이 될 듯합니다.

한 가지, 참고사이트에서는 현재 3개의 카테고리를 묶는 상위 카테고리를 만들고, 모든 글이 나오는 리스트는 따로 페이지로 제작을 하여 구조 자체를 따로 둔 상태입니다. 이건 워드프레스의 목록 탬플릿 주소가 아니기에 사이트를 돌아다니다 보면 어쩔 수 없이 두 가지의 목록 화면이 방문자에게 표시가 될 수밖에 없게 됩니다. 이보다는 하나의 디자인으로 통일되게 나오는 게 나을 것 같아 저는 부모 카테고리의 묶음 방법과, 페이지 준비는 빼고 메뉴로 바로 구분이 되도록 하면서 통일된 리스트 모양이 나오도록 준비를 해 봤습니다.

1. 목록 화면을 위한 탬플릿 만들기

싱글 페이지의 뷰를 탬플릿으로 제작을 했던 것과 같이, 목록 화면도 페이지 빌더를 이용하여 탬플릿화 할 수 있습니다. 같은 주제의 글 리스트가 나오는 화면이므로, Grid 요소를 넣되, 이번에는 표시할 대상을 'Items of the current query'로 선택합니다. 워드프레스의 주소 체계상 카테고리 주소가 입력이 되면 알아서 해당 카테고리의 글 묶음이 불러와지는데 그걸 의미한다고 보시면 될 듯합니다.

그리드의 디자인은 잘 보면 푸터에 넣은 것과 비슷하면서, 작성일 아래 글의 요약글이 나오는 것이므로, 기존에 푸터에 넣으려고 만들었던 그리드를 하나 복사하여, 필요한 요소를 추가하여 새로 하나 만들었습니다. 이미지의 비율은 1:1로 정사각형으로 조정도 하고요.

2. 만들어진 탬플릿을 목록 화면으로 설정

방금 만든 탬플릿을 목록 화면용으로 쓰겠다 설정을 해 줘야 합니다. 테마 옵션 > Archives Layout 설정에서 방금 만든 탬플릿을 연결합니다. 그다음 사이트에서 목록 주소를 방문해 보면, 만든 구조대로 글 리스트가 나오는 걸 볼 수 있습니다.

3. 사진 배경의 글 리스트 2개 추가하기

리스트 위에 사진 배경의 글 목록 2개는 탬플릿 제작용 빌더로는 구현을 하기가 어렵습니다. 왜냐하면 목록 화면이라 하면 현재 이 주소의 쿼리를 통해 글을 가져와야 하는데, 특정 글을 미리 배치를 하는 건 구조와 맞지를 않기 때문이죠. 이럴 땐 워드프레스의 테마가 가진 특성을 이용하면 됩니다. Impreza 테마의 경우 화면에 표시되는 탬플릿을 us-core라는 플러그인이 가지고 있습니다. 이 중에 목록 화면을 표시하는 탬플릿 파일을 하나 자식 테마로 복사를 합니다. (※ 워드프레스 커스텀 방법 중 하나)

그다음, 어느 부분이 화면을 표시하는 것인가 체크를 해 보니 27번 줄 코드 부분이었습니다.

탬플릿을 불러오는 코드 위로 2개의 리스트가 나오는 구조를 추가해 주면 될 듯합니다.

만드는 방법은 의외로 간단한데, 테스트용 페이지를 하나 만든 다음 'Grid'라는 빌더 요소로 어떤 카테고리 2개의 글을 불러서 특정 그리드 디자인 (메인 화면에서 썼던 2:1 디자인)으로 표시하는 것을 하나 설정을 해 봅니다. 그다음 편집 화면을 Classic Mode(워드프레스 기본 편집기)로 변경을 해 보면, 페이지 빌더의 모습이 사라지고, [ ]로 둘러싸여져 있는 쇼트 코드들이 죽 적혀 있는 화면으로 바뀌게 됩니다.

(※ 비주얼 페이지 편집기라는 건 사실 이 코드들을 사용자들이 쉽게 적을 수 있도록 도와주는 역할을 하는 것인데, 이렇게 적힌 쇼트 코드들이 실제 페이지가 로딩이 될 때 프로그래밍 코드에 의해 실제 화면에 표시가 될 것들로 해석이 되어서 html 코드들로 대체가 되는 것입니다.)

카테고리 주소가 열렸을 때마다 자동으로 변경이 되어야 할 부분은 바로 이 부분입니다.

워드프레스는 카테고리 주소가 열렸을 때 이를 체크할 수 있는 방법이 제공이 되고 있습니다. 이걸 이용해서 쇼트 코드 중 일부를 자동 수정되도록 하면 되겠습니다. 확인된 27번 줄의 코드 위에 위에서 준비한 쇼트 코드가 먼저 나오도록 추가합니다.

이제 다시 목록 주소를 열어 보면, 상단에 2개의 2:1 사이즈의 사진 배경의 글 2개(현재 카테고리와 동일한)가 추가 노출이 되는 것을 볼 수 있습니다.

+. 임시 메뉴들을 카테고리 주소로 대체하기

목록 주소까지 다 준비가 되었으니 초반에 임시로 메뉴를 구성했던 것을 이제 글의 카테고리 주소들로 대체합니다. 그러면 메인을 방문했다가, 원하는 글을 보고, 또는 메뉴에서 원하는 주제를 열어서 글 리스트를 보는 등 사이트가 원활히 돌아가는 구조가 어느 정도 갖춰지게 됩니다.

늘 드는 생각이지만 결국은 사이트의 핵심은 콘텐츠인 듯합니다. 여기에 원하는 디자인대로 어떻게 콘텐츠를 표시할 것인가를 결정하게 됩니다. 디자인을 할 방법이 없다면 마음에 드는 테마를 선택하여 일정 비용을 지불하고 그 구조를 활용할 수도 있을 것이고, 또는 뼈대가 되는 테마를 활용하여 디자인에 맞는 구조를 직접 만들어가면서 제작하는 방식도 이용할 수 있습니다.

쉽게 소개해 보려고 시작한 글이었는데, 전달이 잘 되었을지 모르겠습니다. 그리드(목록) 표시를 계속 강조한 이유는 실제 워드프레스 사이트 커스텀 작업 시 이걸 코딩으로 준비를 하고 표시를 하려면 꽤 많은 시간이 소요가 되는 작업인데 테마에 따라 이걸 매우 쉽게 해결을 할 수도 있다라는 점 때문이었습니다.

나만의 사이트에 나만의 콘텐츠를 모아 놓고자 하시는 분들은 워드프레스 사이트도 한 번 이용을 해 보시기 바랍니다.

크몽 블로그 따라 만들기 끝. ( http://oks-together.hol.es/newspaper/ )

keyword