WordPress 게시물 및 페이지 필터링에 대한 궁극적인 가이드

게시 됨: 2017-07-13

Amazon에서 쇼핑을 해본 적이 있다면 필터의 강력한 기능을 이미 알고 있을 것입니다. 아마존에서 제품을 검색할 때 검색을 구체화하는 데 도움이 되는 필터로 가득 찬 사이드바가 항상 있으며 가장 중요한 요구 사항을 충족하는 결과만 반환합니다. 고객 평가, 브랜드, 제품이 남성용인지 여성용인지, 상태(신품/중고) 등과 같은 필터.

콘텐츠 필터가 얼마나 유용한지 감안할 때 WordPress 콘텐츠용으로 필터를 생성하는 기능이 WordPress Core에 바로 내장되어 있다는 것은 놀라운 일이 아닙니다. 그리고 약간의 노하우만 있으면 사이트 방문자에게 이러한 기능을 제공하여 이전보다 훨씬 빠르게 콘텐츠를 탐색할 수 있습니다.

이 게시물에서는 플러그인을 사용하여 사용자를 위한 콘텐츠 필터링 옵션을 만드는 과정을 안내합니다.

시작하자!

WordPress 게시물 및 페이지 필터링이 필요한 이유

WordPress는 매우 유연합니다. 코어를 사용하면 사이트의 모든 것을 완벽하게 제어할 수 있습니다. 게시물 및 페이지 필터링은 WordPress의 가장 강력한 기능 중 하나입니다. 게시물, 페이지 및 사용자 정의 콘텐츠에 대한 몇 가지 기본 제공 기능이 있습니다. 또한 데이터베이스에 저장된 항목을 선택, 그룹화 및 필터링하는 방법에는 여러 가지가 있습니다. 페이지 템플릿, 게시물 유형, 분류 용어, 템플릿 계층, 제품 페이지 또는 기타 원하는 항목별로 정렬 가능한 검색 결과 목록을 만들 수 있습니다.

기본적으로 WordPress에는 검색 기능이 내장되어 있습니다. 그러나 그 검색 기능은 많은 것을 요구하며 독자가 특정 방식으로 결과를 필터링하기를 원할 때 도움이 되지 않습니다. 거기에서 타사 플러그인의 도움이 필요합니다.

검색 및 필터 플러그인의 기능은 무엇입니까?

검색 및 필터 플러그인은 기본 WordPress 검색 상자를 다음 단계로 끌어올리는 사용하기 쉬운 플러그인입니다. 방문자가 특정 용어를 검색하고 카테고리, 태그, 사용자 정의 게시물 유형, 사용자 정의 분류법, 날짜 범위 또는 이들 모두의 조합을 기반으로 결과를 필터링하여 보다 세련된 검색과 보다 정확한 결과를 얻을 수 있습니다.

플러그인을 사용하는 것은 매우 간단합니다. 플러그인을 설치하고 활성화하면 사용 방법에 대한 자세한 설명이 있는 설정 페이지로 이동합니다. 간단히 말해서 게시물, 페이지 또는 위젯화된 사이드바 어디에서나 단축 코드를 사용할 수 있습니다. 또는 용감하고 약간의 코드로 손을 더럽히는 데 신경 쓰지 않는다면 테마 파일에 한 줄의 코드를 붙여넣을 수 있습니다.

몇 가지 예를 살펴보겠습니다.

검색 및 필터로 게시물을 필터링하는 방법

플러그인의 가장 기본적인 사용법은 방문자가 모든 카테고리와 태그를 검색할 수 있도록 하는 단축 코드입니다. 기본 단축 코드는 다음과 같습니다.

[searchandfilter fields="search,category,post_tag"] 

게시물, 페이지 또는 텍스트 위젯에 삽입할 수 있으며 프런트 엔드에 검색, 카테고리 및 태그 필드가 있는 필터링 옵션이 표시됩니다.

방문자가 하나 이상의 카테고리 또는 태그를 선택하게 하려면 드롭다운 대신 확인란을 포함하도록 단축 코드를 수정하고 각 필드에 레이블을 지정하면 쉽게 그렇게 할 수 있습니다.

[searchandfilter headings="Select categories:" types="checkbox" fields="category"]

위의 예는 사이드바에서 플러그인을 사용하는 방법을 보여줍니다. 그러나 테마 파일 내에서 사용하여 모든 페이지에 표시할 수도 있습니다. 아래 예에서 양식은 블로그 페이지에 표시됩니다. 다음 코드 줄을 붙여넣기만 하면 됩니다.

<?php echo do_shortcode('[searchandfilter fields="search,category,post_tag"]'); ?>

우리의 경우 Twenty Seventeen 테마의 메인 인덱스 템플릿에 추가했습니다.

사용자 지정 분류법을 필터링하는 방법은 무엇입니까?

위의 예는 플러그인의 매우 기본적인 사용법을 보여줍니다. 그러나 검색 및 필터 플러그인은 다른 매개변수도 허용합니다. 방문자가 사용자 정의 분류에 대한 검색 결과만 필터링할 수 있도록 하는 단축 코드를 사용할 수 있습니다.

WooCommerce를 사용하여 사이트에 상점이 있다고 가정해 보겠습니다. 검색 결과에 제품 카테고리를 포함하려면 다음 단축 코드를 추가하기만 하면 됩니다.

[searchandfilter taxonomies="search,category,post_tag,product_cat" headings=",Categories,Tags,Product Categories"]

이 예에서는 방문자가 필드를 더 쉽게 구별할 수 있도록 각 필드 앞에 제목을 추가했습니다.

이것을 테마의 페이지에 표시하려면 Appearance > Themes > Editor 아래의 적절한 페이지 템플릿에 다음 코드 줄을 붙여넣기만 하면 됩니다.

<?php echo do_shortcode('[searchandfilter taxonomies="search,category,post_tag,product_cat" headings=",Categories,Tags,Product Categories"]'); ?>

날짜 범위별로 게시물을 필터링하는 방법은 무엇입니까?

또 다른 경우는 방문자가 특정 날짜 범위 내에서 특정 카테고리의 게시물을 검색하도록 하려는 경우입니다. 이 경우 archive.php 에 다음 코드 줄을 붙여넣기만 하면 됩니다.

<?php echo do_shortcode('[searchandfilter fields="search,post_date" types=",daterange" headings=",Post Date"]'); ?>

게시물 형식 및 페이지를 필터링하는 방법은 무엇입니까?

마지막 예에서는 게시물 형식 및 페이지 필터링을 살펴보겠습니다. 비디오 또는 오디오 게시물을 게시하는 경우 이 단축 코드를 사용하면 방문자가 지정한 게시물 형식에 속하는 게시물만 찾을 수 있습니다.

[searchandfilter fields="search,post_format" types=",select" headings=",Post Format" submit_label="Filter"]

방문자가 페이지나 게시물을 필터링하도록 하려면 게시물 유형을 매개변수로 허용하는 단축 코드만 있으면 됩니다.

[searchandfilter fields="search,post_types" post_types="post,page" headings=",Post Types"]

위의 예 외에도 플러그인을 사용하면 결과를 계층적 순서로 정렬하기 위한 매개변수를 포함하여 지정된 카테고리의 게시물 수를 표시하고, 클래스를 추가하고, 작성자를 필터링하는 등의 작업을 수행할 수 있습니다.

게시물을 수동으로 필터링하는 방법

WordPress와 관련된 모든 것과 마찬가지로 플러그인을 사용하지 않고 수행할 수 있는 방법이 있습니다. 방문자가 특정 카테고리의 게시물을 필터링할 수 있는 간단한 양식을 만들고 싶다고 가정해 보겠습니다.
먼저 간단한 양식을 만들어야 합니다.

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
    <?php
        if( $terms = get_terms( 'category', 'orderby=name' ) ) : 
            echo '<select name="categoryfilter"><option>Select category...</option>';
            foreach ( $terms as $term ) :
                echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; 
            endforeach;
            echo '</select>';
        endif;
    ?>
    <label>
        <input type="radio" name="date" value="ASC" /> Date: Ascending
    </label>
    <label>
        <input type="radio" name="date" value="DESC" selected="selected" /> Date: Descending
    </label>
    <button>Apply filters</button>
    <input type="hidden" name="action" value="customfilter">
</form>
<div id="response"></div>

위의 형식에서 첫 번째 부분은 사용자가 get_terms 함수를 사용하여 분류를 선택할 수 있도록 합니다. 기본 카테고리 및 태그는 물론 사용자 정의 분류에도 사용할 수 있습니다. 다음 부분에서는 방문자가 결과를 오름차순 또는 내림차순으로 표시할 수 있는 라디오 버튼을 추가합니다. 마지막으로 마지막 부분은 선택한 필터를 적용할 수 있는 양식의 버튼입니다.

전체 양식이 Appearance > Themes > Editor의 sidebar.php 템플릿에 추가되었습니다.

다음 단계는 jQuery를 사용하여 페이지를 다시 로드하지 않고도 결과를 표시할 수 있도록 하는 것입니다.

jQuery(function($){
    $('#filter').submit(function(){
        var filter = $('#filter');
        $.ajax({
            url:filter.attr('action'),
            data:filter.serialize(), // form data
            type:filter.attr('method'), // POST
            beforeSend:function(xhr){
                filter.find('button').text('Applying Filters...');          },
            success:function(data){
                filter.find('button').text('Apply filters');                $('#response').html(data); 
            }
        });
        return false;
    });
});

코드의 마지막 비트는 선택한 필터를 기반으로 결과를 처리할 function.php 파일에 함수를 추가하는 것입니다. 선택한 카테고리를 살펴보고 게시물이 있는 한 게시물을 올린 날짜별로 오름차순 또는 내림차순으로 표시합니다. 카테고리에 게시물이 없으면 게시물을 찾을 수 없다는 메시지가 표시됩니다.

 
function my_filters(){
    $args = array(
        'orderby' => 'date', 
        'order' => $_POST['date'] 
    );
 
        if( isset( $_POST['categoryfilter'] ) )
        $args['tax_query'] = array(
            array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $_POST['categoryfilter']
            )
        );
  
    $query = new WP_Query( $args );
 
    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();
            echo '<h2>' . $query->post->post_title . '</h2>';
        endwhile;
        wp_reset_postdata();
    else :
        echo 'No posts found';
    endif;
 
    die();
}
 
 
add_action('wp_ajax_customfilter', 'my_filters'); 
add_action('wp_ajax_nopriv_customfilter', 'my_filters');

최종 결과는 프런트 엔드와 같이 표시됩니다.

독자가 WordPress에서 게시물과 페이지를 필터링하도록 해야 하는 이유

위의 방법은 사용자가 게시물을 필터링할 수 있는 좋은 방법입니다. 그런데 왜 그렇게 하고 싶습니까?

WordPress에서는 이미 카테고리와 태그로 게시물을 구성할 수 있지만 사용자는 한 번에 하나의 카테고리나 태그만 볼 수 있습니다. 또한 자체 카테고리를 사용하는 사용자 정의 게시물 유형을 사용하는 경우 해당 카테고리는 일반 게시물에 사용되는 카테고리와 함께 표시되지 않습니다.

검색 및 필터 플러그인은 1년치 콘텐츠와 짝을 이루는 다양한 카테고리 및 태그가 있을 때뿐만 아니라 포트폴리오, 갤러리, 평가 등과 같은 사용자 정의 게시물 유형을 추가한 경우에도 특히 유용합니다.

또 다른 예는 방문자가 이 플러그인을 사용하여 제품을 필터링하고 원하는 것을 쉽게 찾을 수 있다는 것입니다. 그리고 코드에 익숙하다면 수동으로 수행하면 검색 결과가 표시되는 방식과 사용되는 매개변수를 훨씬 더 많이 제어할 수 있습니다.

마무리

방문자가 원하는 콘텐츠를 빠르게 찾을 수 있도록 하여 웹사이트를 사용하기 쉽게 만드는 것은 방문자에게 즐거운 사용자 경험을 제공하고 다시 방문하도록 유도하는 좋은 방법입니다. 사이트에 콘텐츠가 풍부한 경우 페이지 및 게시물 필터링을 구현하여 더 보고 싶은 콘텐츠를 얻을 수 있도록 하십시오.

WordPress 검색 및 필터링에 대한 귀하의 경험을 듣고 싶습니다. 아래 의견에 알려주십시오.

그래픽글로브/Shutterstock.com의 기사 썸네일 이미지