brunch

매거진 IMPREZA 테마 활용

라이킷 5 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari May 23. 2021

#3-4. 검색 + 결과 화면

IMPREZA 테마로 미디어 사이트 따라 만들기

콘텐츠가 많은 사이트는 검색 기능이 필요합니다. 이번에는 검색 기능 추가 및 결과 화면을 표시하는 과정에 대해 정리를 해 보려고 합니다.

구조 표시에 대한 작업 방향 파악

콘텐츠를 검색을 하려면 우선은 이렇게 생긴 폼(form)이 필요합니다.

(폼을 구성하는 html 태그들)

참고사이트도 오른쪽 위쪽에 있는 돋보기 아이콘을 클릭하면 이러한 검색을 위한 구조가 나오는 것으로 확인되네요. 폼 아래에는 추천 태그 메뉴들도 나오게 됩니다. 테마에서 제공하는 기본 헤더 검색 요소로는 표시가 안 되겠습니다.

디자인대로 표시를 하기 위해 해야 할 것을 정리해 봅니다.

1. 검색 아이콘 클릭 시 검색을 위한 레이아웃이 위에서 등장

2. X 버튼을 클릭하거나 아래쪽 오버레이 부분을 클릭하면 검색 레이아웃이 닫힘

3. 추천 태그 메뉴 표시

4. 모바일에선 화면 전체 높이의 구조로 바뀜

검색을 위한 레이아웃 만들기 (page block)

우선 닫힘 버튼, 검색 필드, 그 아래 메뉴가 표시되는 구조를 만들기 위해 Page Block 하나를 만듭니다.

이미지가 닫힘 버튼으로 동작을 하기 위해 고유한 ID를 적어줍니다. 디자인상 최대 넓이는 590px로 설정을 했고, 추천 태그용 메뉴를 연결해서 메뉴들을 표시합니다.

만들어진 검색용 페이지 블록 표시

사이트에서 모든 화면에 공통으로 출력이 되는 부분이 있습니다. 헤더와 푸터인데요, 저는 푸터쪽에 이러한 구조를 연결합니다. Footer도 페이지 블록인데 이 안에 또 다른 페이지 블록을 연결할 수도 있습니다. 단, 이러면 각 섹션이 가진 기본 공간들이 중복되므로 안쪽에 있는 것은 이러한 공간 개념을 빼는 옵션을 선택해야 합니다. 방금 위에서 만든 site search 블록을 연결하고 Site Search 섹션의 기본 row는 빼버립니다.

디자인상 이 구조는 화면 위에 고정이 돼 있어야 하는데, 이럴 때 필요한 css 속성이 position:fixed입니다. 참고로 화면을 내려도 헤더가 고정이 되는 것을 비교해 보시면 될 듯합니다.

이 섹션에 대한 스타일 적용을 위해 고유한 ID를 섹션에 추가를 했고, position 속성을 fixed로 선택, 위치는 화면 맨 위와 양쪽에 채워지는 것으로 설정합니다. 이렇게 하고 화면을 사이트 화면을 열어 보면 아까 만든 검색용 구조가 화면 위를 덮는 것을 볼 수 있습니다.

버튼을 클릭하기 전에는 이 구조가 숨겨져 있어야 하므로, 기본적으로는 css를 이용해서 내가 가진 높이에서 -100%만큼 위로 이동해 있도록 조정합니다.

구조가 숨겨졌다가 나오는 것을 위한 이벤트 처리

헤더에 있는 검색 아이콘(버튼)을 클릭했을 때와 X자 닫힘 버튼을 클릭했을 때 검색용 레이아웃이 보였다 닫히는 동작이 발생하기 위해서는 css에 정의한 것처럼 'site-search-on'이라는 클래스가 body 태그에 넣어졌다 빼 졌다가 이뤄져야 합니다. 이럴 때 필요한 것이 스크립트인데 사이트의 맨 아래에 뭔가 코드를 추가할 수 있는 워드프레스 훅 wp_footer를 이용하면 되겠습니다. functions.php 파일에 코드를 추가합니다.

검색 레이아웃 외에 아래쪽 오버레이(본문 위를 덮는 투명한 레이어. 다른 링크는 클릭 안 되게) 표시를 위해 'body-wrap'클래스를 가진 div 묶음을 넣었고, 검색 아이콘 클릭, 닫기 아이콘 클릭, 그리고 검색을 위한 레이어 외에 아래쪽을 클릭 시에도 닫힘 동작이 될 수 있도록 'site-search-on' 클래스를 body 태그에 넣었다 뺐다 되도록 하였습니다.

즉, body에 클래스가 추가가 되는 순간 위로 숨겨져 있던 구조가 원래의 화면 시작점인 0 위치로, transition이라는 효과에 의해 이동이 된다라고 보시면 되겠습니다.

. site-search-on #section-site-search {

transform: translateY(0);

transition: transform 0.2s cubic-bezier(.4,0,.2,1);

}

body-wrap에 대한 css도 추가를 해서 검색 기능이 켜졌을 때, 본문 콘텐츠들을 투명한 사각형으로 덮이게 조치합니다. z-index에 의해서 화면 위에 떠 있는 레이어를 놓은 것이라 생각을 하면 되겠습니다. 원래는 -1이라 화면 아래 있다가 > 검색이 나오면 검색 레이아웃(999) 보다는 아래로 사이트 화면을 덮도록 보이게 됩니다.

이제 다시 메인 페이지를 열어서 검색용 레이아웃이 나왔다 숨겨졌다를 하는지 체크해 봅니다.

검색 결과에 대한 화면 준비

검색용 폼까지 준비가 되었다면 이제 검색 결과를 표시하는 화면을 준비할 차례입니다. 검색어를 입력 후 엔터나 아이콘을 클릭하면 워드프레스에서 검색 내용을 준비해서 결과를 보여주게 되는데요, '사이트 도메인/? s=검색어'라는 주소가 나오면서 결과가 보이는 걸 볼 수 있습니다.

이러한 검색 결과 화면을 준비하려면 워드프레스에서는 테마에 search.php라는 파일을 만들어서 준비를 하게 되는데, Impreza 테마의 경우 이 search 결과를 위한 화면 또한 페이지 빌더로 마음대로 꾸밀 수 있도록 해 주고 있습니다. 저는 'Search'라는 이름의 페이지를 만들었고, 이걸 테마 옵션에서 설정해서 search.php 파일을 대신하는 페이지가 표시되도록 하였습니다.

검색 화면 디자인을 보면 태그 묶음 화면과 똑같습니다. 동일한 구조를 만들면 되겠네요. 기존에 만들어 놓은 tag archive 화면 전체를 탬플릿화 할 수 있는데요, 탬플릿으로 만들고 > search 페이지에서 그대로 붙여 넣기를 하면 되겠습니다.

이제 검색을 해 보면 원하는 대로 결과가 표시되는 걸 볼 수 있습니다.

+ 모바일 메뉴 레이아웃 추가

모바일 화면에서는 주 메뉴 대신 햄버거 메뉴가 표시되고 이걸 클릭하면 화면을 덮는 구조가 나오게 해야 합니다. 위에서 검색 화면을 나오도록 하는 것과 동일하게 작업을 하면 되겠습니다.

페이지 블록으로 구조를 만들고 > 푸터에서 노출을 하는데 왼쪽으로 숨겨져 있도록 위치 > 스크립트로 버튼 클릭 시 body 태그에 클래스를 추가 > 모바일용 메뉴 구조가 왼쪽으로 나왔다 들어갔다 동작

잠시 미뤄뒀던 모바일 메뉴 구조, 검색 기능 및 결과 표시까지 완료가 되었습니다. 사용된 코드는 구글 검색만 관련된 키워드로 검색을 해 보면 수많은 자료가 나오는데요, 이걸 테마를 가지고 어떻게 응용을 해 볼지를 고민을 해 보면 디자인을 표시하는 데 있어 아예 불가능한 건 대체로 없었던 거 같습니다. 간단한 몇 줄의 css나 js로도 약속만 정확히 돼 있다면 전체적으로 잘 맞물려 돌아가는 게 웹사이트라고 생각이 됩니다.

이후에는 대개 각 화면을 다시 점검하고, 모바일 뷰도 체크를 하는 등 피드백에 대한 조치를 하는 동시에 어드민에 대한 정리를 하게 됩니다.

keyword