Using Isotope To Sort & Filter Posts In WordPress With Oxygen

Repeater 생성 및 .grid 부여
Repeater > Div 생성 및 .grid-item 부여
Repeater > Div > (Sorting Target Element) 에 원하는 class 지정
Repeater > Div > Code Block 생성 및 PHP 코드 입력

[PHP]

<?php
	$categories = get_the_category(get_the_ID());

	foreach( $categories as $category ) {
     
      echo "<span class='category'>$category->slug</span>";

  }
?>

위 코드를 실행하면 Code Block의 텍스트가 각각의 Category Slug로 표시되는 것을 확인할 수 있습니다.

5. 페이지 맨 상위에 Code Block 생성 및 Javascript 코드 입력

jQuery(document).ready( function() {
  
  var $grid = jQuery('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'fitRows',
    getSortData: {
     title: '.title',
     date: '.date'
    }
  })
  
  jQuery('.category').each( function() {
    
    jQuery(this).closest('.grid-item').addClass(jQuery(this).text().toLowerCase());
    jQuery(this).remove();
    
  })
  
  jQuery('[data-filter]').click( function(e) {
    
    e.preventDefault();
    
    $grid.isotope({ filter: jQuery(this).data('filter') })
    
  })
  
  jQuery('[data-sortby]').click( function(e) {
    
    e.preventDefault();
    
    $grid.isotope({ sortBy: jQuery(this).data('sortby') })
    
  })
  
})

6. 또, PHP 코드란에 아래의 스크립트를 입력

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

7. 버튼을 생성하고 각각의 클래스에 대한 Attribute 속성을 다음과 같이 변경

All : name > data-filter, value : .grid-item
각각의 클래스 : name > data-filter, value : .classname

8. 버튼을 생성하고 정렬순에 대해서 정의하고자 할 때는 Attribute 의 속성을 name > data-sortby 한 다음 위 3번에서 지정한 .classname을 value값으로 지정함.

9. Isotope 의 Layout Modes에 대해사는 아래 링크를 참고할 것

https://isotope.metafizzy.co/layout-modes.html