워드프레스 블록 에디터에서 Toolset 커스텀 검색 페이지 만드는 방법

이전 글에서 Toolset을 사용하여 워드프레스 검색 필터를 만드는 방법을 살펴보았습니다. View 양식을 사용하여 수동으로 커스텀 검색 페이지를 만드는 방법을 설명했지만, 블록 에디터(구텐베르크)를 사용하면 보다 수월하게 커스텀 검색 필터를 만들 수 있습니다.

이 글에서는 커스텀 필드, 분류 등을 기준으로 커스텀 포스트 타입 글을 검색할 수 있는 검색 페이지를 만드는 방법을 살펴보겠습니다. 앞서 Trainers 커스텀 포스트 타입 및 관련 커스텀 필드를 만드는 방법을 간단히 살펴보았습니다. 커스텀 포스트 타입과 커스텀 필드, 그리고 커스텀 분류를 만들었다면 블록 에디터를 사용하여 검색 필터를 만들 수 있습니다.

비슷한 기능의 플러그인으로 Jetengine이 있습니다. Jetengine은 구텐베르크와 엘리멘터용이 있으며 다양한 기능을 제공하고 있습니다.

Toolset을 사용하여 블록 에디터에서 커스텀 검색 페이지 만드는 방법

View 블록 추가하기

먼저 블록 에디터에서 View 블록을 추가합니다. 블록 추가 아이콘을 클릭하고 Toolset > View를 선택합니다.

Toolset을 사용하여 커스텀 검색 페이지 만들기

위의 그림과 같이 Toolset View 블록이 추가되면 Create a new View (새 View 만들기)에 View 이름을 입력하고 Create View를 클릭합니다.

Toolset View 블럭 - 검색 기능

Use View ElementsPagination (페이지 매김)Search (검색)를 선택하고 Select View Loop Style (뷰 루프 스타일)에서 적절한 스타일을 지정한 다음, Next를 클릭합니다.

이전 글에서는 View 양식의 대부분 문자열이 한국어로 번역되어 있지만 View 블록 내의 문자열은 대부분 영어로 남겨져 있네요. 아마 이 기능이 최근 추가되어 아직 번역이 되지 않은 것 같습니다.

Choose content this View will display (이 뷰가 표시할 콘텐츠 선택) 옵션이 표시되면 검색할 포스트 타입을 선택합니다. 여기서는 Trainers라는 사용자 정의 글 유형을 선택했습니다.

Toolset View를 사용하여 워드프레스 검색 필터 페이지 만들기

Next를 클릭하면 다음과 같은 View 위젯이 추가됩니다.

워드프레스 커스텀 검색 페이지 만드는 방법

크게 두 파트로 나누어져 있습니다. View Search 부분(①)에서는 검색 필터를 지정할 수 있고, View Loop 부분(②)에서는 검색 결과가 표시되는 요소들을 지정할 수 있습니다.

검색 결과 화면 설정하기

먼저 View Loop에서 검색 결과가 표시되는 형식을 지정하는 방법을 살펴보겠습니다. 이 방법은 이전 글의 4.2 커스텀 검색 결과 디자인하기 부분을 시각적으로 설정한다고 생각하면 될 것 같습니다.

View Loop 섹션에서 Add Block (블록 추가)을 클릭합니다. 그러면 Toolset 블록 섹션이 표시되어 블록을 선택할 수 있습니다.

커스텀 검색 결과에 이미지 표시하기

먼저 이미지를 추가해보겠습니다. Image를 선택합니다.

Do you want to use a Dynamic Source?가 표시되면 Yes를 선택하고, Post Source에 현재 글, Source에 Trainer, Field에서 이미지 필드(예: Trainer picture)를 선택합니다.

그러면 다음 그림과 같이 이미지가 표시됩니다. 그리고 오른쪽의 블럭 속성에서 이미지 크기 등 다양한 설정을 상세하게 설정할 수 있습니다.

Toolset 검색 결과 페이지 만들기

계속하여 결과에 표시할 필드를 선택하기 위해 Add Block을 클릭하고 Single Field를 선택합니다.

오른쪽 블럭 속성의 Field Source에서 File Type을 선택하도록 합니다. Standard field (표준 필드), Custom field (커스텀 필드), Taxonomy (분류) 중에서 선택할 수 있습니다.

필드 추가하기 - 단일 필드

검색 필드 추가하기

결과 화면에 표시할 항목들을 설정했다면 계속하여 상단의 검색 필터에 표시할 필드를 설정하도록 합니다. View Search에서 Add Search Field를 클릭하여 검색 필드를 추가할 수 있습니다.

검색 필드 추가하기

그러면 검색 필드를 선택할 수 있는 화면이 표시됩니다.

검색 필드 선택하기

원하는 필드를 선택하여 추가하도록 합니다. 참고로 최소값, 최대값을 설정할 수 있도록 하려면 Between 오퍼레이터(연산자)를 사용하도록 합니다. 가령 Price per hour (시급) 커스텀 필드를 추가하는 경우 다음과 같이 설정하여 최저 시급과 최대 시급을 입력하여 사이값을 검색할 수 있도록 할 수 있습니다.

범위 값 설정 - 최소값 및 최대값

필드를 모두 추가했으면 Add Search Button을 클릭하여 검색 버튼을 추가합니다. 초기화 버튼을 추가하려면 Add Reset Button을 클릭합니다.

워드프레스 검색 페이지 결과
결과 예시.

검색 폼이 완성되었으면 CSS를 사용하여 레이아웃을 조정하도록 합니다. 만족스러운 결과물이 나오려면 블록 에디터(구텐베르크) 사용에 익숙해야 하고 CSS에 대하여 기본적인 사항을 알고 있으면 도움이 됩니다.

마치며

이상으로 Toolset을 사용하여 블록 에디터에서 커스텀 검색 페이지를 만드는 방법을 살펴보았습니다. 이 방법은 "Toolset과 Elementor를 사용하여 워드프레스 커스텀 검색 기능 구현하기"에서 설명한 것과 사실상 동일하지만, 블록 에디터를 이용하기 때문에 보다 직관적이고 사용이 편리합니다. 이 과정을 다음 영상에서 확인할 수 있습니다.

다국어 번역 플러그인 WPML 개발자가 만든 Toolset (툴셋)을 사용하면 코딩 지식이 부족하여도 부동산 매물 검색 사이트나 커스텀 검색 기능이 필요한 리뷰 사이트 등을 만들 수 있습니다.

참고:


2개 댓글

  1. toolset view를 클릭하면 'create a new view'와 'use existing view'가 나오는게 정상인데 저는 'create a new view'는 나오지 않고 바로 'use existing view'만 나오는데요. 이유가 뭔지 알고 싶습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.