brunch

매거진 IMPREZA 테마 활용

라이킷 11 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Jan 26. 2022

#10-4. 메인 페이지, 검색 결과 페이지 만들기

온라인 매거진 만들기

지난 과정까지 헤더와 푸터, 그리고 글의 상세 내용이 나오는 템플릿, 글들이 카드 형태의 목록으로 나오는 카테고리별 템플릿 제작이 완료됐습니다.

이제 도메인으로 열리는 사이트의 메인 페이지와 헤더에 있는 검색 폼을 이용하면 나오는 검색 결과 페이지만 준비하면 마무리가 될 듯합니다.

우선 참고사이트의 메인 화면 체크 -

pc 화면에서는

1 칼럼의 가로로 긴 글 /

3 칼럼의 카테고리와 같은 레이아웃의 글들 /

다시 1 칼럼의 가로로 긴 글 /

3 칼럼의 카테고리와 같은 레이아웃의 글들 /... 이 이어집니다.

모바일 화면에서는

1 칼럼의 글은 세로로 긴 형태로 변경 /

2 칼럼의 카테고리와 같은 레이아웃의 글들 /... 형태로 글들의 조합이 살짝 바뀝니다.

구조를 html 태그들로 확인해 보니, pc용 모바일용 글들을 화면에 맞게 노출 또는 숨기기를 하는 것으로 보입니다. 즉, 3 칼럼으로 묶인 글은 모바일에서는 2개와 하나를 다음 2 칼럼의 묶음으로 내려서 표시를 하는 상황입니다. (가로로 길었던 것은 변동 없음)

그런데 글을 노출 및 관리하는 운영자의 입장을 고려해서 생각을 해 볼 때, 만약 저라면 3개의 글이 아니라 맨 마지막처럼 6개의 글(2와 3의 최소공배수)이 노출되는 쪽으로 안내를 하고 작업하지 않았을까라는 생각이 드는 부분입니다. 그러면 글을 굳이 pc 따로 모바일 따로 관리를 하지 않아도 반응형 화면 사이즈에 맞게 글들이 노출이 될 수 있습니다. (※ 이건 제가 주로 이용하는 그리드의 특성을 고려해서 생각해 본 것)

그럼 이제 확인된 내용을 사이트에 적용할 차례입니다.

1. 메인 페이지 만들기

사이트의 메인 페이지가 될 페이지를 하나 만든 후 '설정 > 읽기'에서 지정을 해 줬습니다. (도메인 주소로 열리는 페이지)

그리드 요소는 지난번 카테고리 템플릿을 만들 때처럼 현재 주소의 쿼리에 해당하는 글들을 모두 불러올 때 이용을 할 수도 있지만, 특정 글을 가져와서 표시할 수도 있습니다. '그리드(Grid) 요소'는 워드프레스 사이트 제작 시 개발 영역에 속하는 워드프레스의 커스텀 쿼리를 만드는 작업을 Impreza 테마의 개발자들이 아주 쉽게 옵션 몇 가지만 선택하면 될 정도로 만들어 준 겁니다. > https://developer.wordpress.org/reference/classes/wp_query/ (보통 며칠 걸리던 작업. 쿼리 만들고, css 따로 적용하고, 수정하고 하는...)

그리드 요소를 순서대로 넣고, 1개, 6개, 1개, 6개씩 메인 페이지에 노출할 글들을 정합니다. 3 칼럼으로 나오는 그리드 레이아웃은 지난번 카테고리 템플릿을 만들 때 이미 만들어졌으니 그걸 이용하면 되고, 이제 1 칼럼의 가로로 긴 레이아웃만 하나 더 추가하면 되겠습니다.

카드의 형태는 카테고리의 것과 동일합니다. (글자 크기, 제목 위치, 보더 등) 그러니 기존에 만든 것을 복사해서 사용하면 됩니다. 변경된 것은 이미지의 비율과 대표 이미지 바로 다음으로 'custom appearance in grid: 이미지'라는 것을 하나 추가한 부분입니다.

대표 이미지들이 모두 세로로 긴 형태의 것들인데, 가로 세로 비율이 변경이 되었으니 의도대로 잘 안 나올 때가 있습니다.(인물이 잘림) 이를 대비하기 위해 만약 추가 이미지를 넣으면 그걸 노출할 수 있게 한 겁니다. 추가 이미지는 어디서 넣느냐, 글 편집 시 아래쪽을 보면 테마 개발자가 만들어 놓은 추가 메타 박스가 보입니다. 여기서 그리드에 노출될 추가 이미지를 등록할 수 있습니다. 그리드 레이아웃에서 만약 이 이미지가 등록된 게 없으면 아예 태그로 만들어지지 않게 할 수 있습니다. (이미지가 따로 등록된 게 있을 때에만 노출)

이제 각 그리드 요소에서 순서대로 노출하고 싶은 글들을 선택한 다음, 원하는 레이아웃을 선택해서 메인 페이지에 노출할 수 있습니다. (1/6/1/6/1/6)

> http://oks-together.hol.es/v-magazine/

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

+ 모바일에서는 1칼럼의 그리드 디자인이 길어지는 걸 깜빡했었네요.

그리드를 만들 때 비율을 강제하게 되면, 그리드 각각이 만들어질 때 비율로 공간이 생깁니다. 거기에 나머지 화면 요소들이 자리를 잡고 들어가는 것인데요, 모바일에서 가로로 긴 게 세로로 긴 형태로 변경이 되려면 이 비율만 살짝 바꿔주면 되겠습니다. (724/1300=0.5569... > 미디어 쿼리로 세로로 길게 변경)

2. 검색 결과 페이지 만들기

헤더에 있는 검색 폼을 이용하면 사이트 전체의 글에서 이 키워드를 가진 글들을 모아서 보여주게 됩니다. 워드프레스에서는 search.php 파일을 테마에 만들면 이걸 통해서 결과가 표시되는 구조인데, Impreza 테마에서는 이 또한 일반 페이지를 하나 만들고 테마 옵션에서 지정해서 적용되게 할 수 있습니다.

카테고리 템플릿과 거의 비슷한 구조이므로, 전체를 페이지 빌더 템플릿으로 저장 후 복사해서 Search 페이지에 붙여 넣어 일부만 편집했습니다. 테마 옵션에서 검색 결과용 페이지로 만들어진 'SEARCH' 페이지를 지정합니다. 그리고 페이지들은 검색 결과에 나오지 않도록 Exclude 시킵니다. (글들만 검색)

참고사이트의 검색 결과를 한 번 확인해 봅니다.

pc에서는 [사진 / 제목 / 작성일] 형태의 그리드 레이아웃으로 3 칼럼으로 나오고, 모바일에서는 2 칼럼으로 표시됩니다.

검색 결과 리스트를 위한 그리드 레이아웃만 하나 준비하면 되겠네요. 'Search Grid'를 만들고 사진, 제목, 작성일 요소를 디자인대로 넣었습니다.

이제 끝으로 검색 결과 표시를 위한 그리드를 설정합니다. 현재의 쿼리(검색 결과)에 의한 글들을, 화면 스크롤 시 계속 추가가 되는 형태로, 조금 전 만든 레이아웃으로, 모바일에서는 2 칼럼으로 바뀌면서 표시하도록 합니다. 참고로 'Display as'를 Masonry로 하면 사진 크기에 따라 글들이 지그재그로 얽힌 형태를 표시할 수 있습니다.