Unlimited Elementor 멀티 필터링

,

포트폴리오 관리를 위해 카테고리를 상위, 하위로 나뉘고, 페이지에서 보다 편리하게 결과값을 보기 위해 멀티 필터링을 구현하였습니다. 이 글에서 제가 구현한 방법을 차례대로 안내하도록 하겠습니다.

포트폴리오 Post Type 생성

ACF로 게시물 생성

ACF 설치

ACF 플러그인을 설치, 활성화 한 후 관리자 페이지의 ACF > 게시물 유형 > 새로 추가하기를 통해 포트폴리오라는 post type을 새로 생성합니다.

acf 게시물 생성

일반적으로는 ACF의 택소노미 탭에서 포트폴리오용 카테고리를 생성하지만, 해당 카테고리가 포트폴리오 페이지 빠른 편집에서 카테고리 첫 업데이트 후 빠른 편집 클릭시마다 리스트에서 사라지는 오류가 발생하여 다른 방법을 사용하였습니다. 위의 이미지에서 언급한 바와 같이 여러가지 방법을 시도한 결과 마지막으로 선택한 방법은 택소노미를 카테고리(elementor_library_category)로 등록하였습니다. 이를 통해 빠른 편집 오류가 사라졌고, Unlimited Elementor의 Post Grid 위젯에서도 문제 없이 카테고리를 가져와 필터링이 작동되습니다.

고급 설정 > URL > 공개적으로 쿼리 가능을 활성화합니다.

일반적인 ACF 사용법은 다음 게시물을 참고하세요. ACF에서 게시물 생성하기

카테고리 설정

카테고리 설정

관리자 페이지 > 포트폴리오 > 카테고리에서 상위 카테고리, 하위 카테고리를 입력합니다. 상위 카테고리를 먼저 생성한 후 하위 카테고리는 부모 카테고리에 해당 상위 카테고리를 지정하여 추가하면 됩니다.

멀티 필터링 구현

unlimited elementor 멀티필터링

Unlimited Elementor 플러그인 Checkboxes Filter 위젯

멀티 필터링을 사용하기 위하여 Unlimited Elemntor 플러그인의 Checkboxes Filter 위젯과 Post Grid 위젯을 함께 사용하였습니다.

unlimited elementor checkboxed filter

Checkboxes Filter의 Filter Settings에서 Logic을 Or, Filter Role을 Single로 설정합니다.

unlimited elementor checkboxed filter2

Terms Selection은 아래와 같이 설정합니다.

  • Post Type: 포트폴리오
  • Taxonomy: Elementor Library Category
  • Include By: Childeren Of
  • Select Parent Term: 상위 카테코리
unlimited elementor checkboxed filter3

레이아웃은 Accordion, 버튼명을 지정합니다.

Unlimited Elementor 플러그인 Post Grid 위젯

Unlimited Elementor 플러그인 Post Grid2
Unlimited Elementor 플러그인 Post Grid

Post Grids에서는 위의 Filter와 연결을 할 수 있습니다. 아래와 같이 설정합니다.

  • Post Source: Custom Posts - Post Types 포트폴리오
  • Post Pagination and Filtering: Enable Post Filtering - Yes

나머지 부분은 디자인 시안에 맞게 설정한 후 업데이트하여 체크박스 필터링 설정에 맞추어 포스트가 동적으로 바뀌어 제대로 작동하는지 확인합니다.

ALL RIGHTS ARE RESERVED.
magnifiercrossmenucross-circle