如何先按类别过滤WordPress帖子，然后按属于所选类别帖子的标签过滤？

Question

这是我在这里的第一篇帖子，而且我是一个初学者，所以请耐心听我说。

我想完成的是创建一个AJAX函数，该函数将以复选框的形式列出所有可用类别，用户可以从中选择。选择并点击“应用”后，我想显示分配给所选类别的帖子中所有标签的列表（也以复选框的形式）。然后用户可以从可用的标签中进行选择，然后在点击最后的“应用”按钮后，将显示相应的帖子。

类似于TED. com的“你感兴趣的是什么？”但是在AJAX中。所以第一步是类别，第二步是标签。然后将显示属于选定类别并分配了选定标签的帖子。

到目前为止，我想到了如何列出所有可用的类别，但在按标签过滤时，它会给我一个所有标签的列表，而不仅仅是所选类别的标签。然后实际结果（帖子）也会被复制。不幸的是，如何按标签过滤并删除重复超出了我的能力。我已经将我的函数放入短代码中，因为我使用块生成器，所以我可以将短代码粘贴到Code模块中，并将其放置在页面上的任何位置。

我的职能：

编辑：（现在更新Vitauts的答案添加代码以删除重复的结果）

function filter_articles_shortcode() {

  $siteurl = site_url();
  $form = '<form id="filter2" action=" '. $siteurl .'/wp-admin/admin-ajax.php" method="POST">';
    if( $cats = get_terms(
      array(
        'taxonomy' => 'category',
        'orderby' => 'name'
        )
      )
    ) :
      $form .= '<div>';
      foreach ( $cats as $cat ) :
        $form .= '<input name="cFilter[]" type="checkbox" id="'. $cat->slug .'"  value="'. $cat->term_id .'">';
        $form .= '<label for="'. $cat->slug .'">'. $cat->name .'</label>';
        $form .= '<span>&#40;' . $cat->count . '&#41;</span>';
        $form .= '<br />';
      endforeach;
      $form .= '</div>';
    endif;
  $form .= '<button id="cat-btn">Apply</button>';
  $form .= '<input type="hidden" name="action" value="catFilter">';
  $form .= '</form>';
  $form .= '<div id="results"></div>';
  return $form;

}
add_shortcode('filter-articles', 'filter_articles_shortcode');

add_action('wp_ajax_catFilter', 'show_filter_results');
add_action('wp_ajax_nopriv_catFilter', 'show_filter_results');

//
////
//

function show_filter_results() {

  if( isset( $_POST['cFilter'] ) ) {
    $args['tax_query'] = array(
      array(
        'taxonomy' => 'category',
        'field' => 'id',
        'terms' => $_POST['cFilter']
      )
    );
  }

  $query = new WP_Query( $args );

  if( $query->have_posts() ) :
    while( $query->have_posts() ): $query->the_post();

    $w = the_title('<h3>', '</h3>', true);
    $w .= the_category(', ');
    $w .= the_tags('<div>',', ','</div>');
    $w .= '<hr />';
    echo $w;

  endwhile;
  wp_reset_postdata();
  else :
    echo 'nothing';
  endif;

  $siteurl = site_url();

  $o .= '<form id="filter-tags" action=" '. $siteurl .'/wp-admin/admin-ajax.php" method="POST">';

  $utags = array();

  if( $query->have_posts() ) :
    while( $query->have_posts() ): $query->the_post();

    $tags = get_the_tags();

    if ( !empty($tags) ) {
      foreach( $tags as $tag ) {

        $utag = $tag;

        if(! in_array($utag, $utags)) {

          $utags[] = $utag;

          $o .= '<input name="tFilter[]" type="checkbox" id="tag&#8722;'. $utag->slug .'" value="'. $utag->term_id .'" />';
          $o .= '<label for="tag&#8722;'. $utag->slug .'">'. $utag->name .'</label>';
          $o .= '<span>&#40;' . $utag->count . '&#41;</span>';
          $o .= '<br />';

        }
      }
    }

    endwhile;

  $o .= '<button id="tags-btn">Tags</button>';
  $o .= '<input type="hidden" name="action" value="tagFilter">';

  foreach ($_POST['cFilter'] as $cfilter) {
    $o .= '<input type="hidden" name="cFilter[]" value="' .  esc_attr($cfilter) . '">';
  }
  wp_reset_postdata();
  else :
    echo 'nothing';
  endif;

  $o .= '</form>';
  $o .= '<div id="tag-results"></div>';
  echo $o;

  echo "<script>
    jQuery(function($){
      $('#filter-tags').submit(function() {
        var tags = $('#filter-tags');
        $.ajax({
          url:tags.attr('action'),
          data:tags.serialize(),
          type:tags.attr('method'),
          beforeSend:function(xhr){
            tags.find('#tags-btn').text('Searching...');
          },
          success:function(data){
            tags.find('#tags-btn').text('Tag');
            $('#tag-results').html(data);
          }
        });
        return false;
      });

    });
    </script>";

  die();

}

add_action('wp_ajax_tagFilter', 'show_tags_results'); 
add_action('wp_ajax_nopriv_tagFilter', 'show_tags_results');

//
////
//

function show_tags_results() {

  if( isset( $_POST['tFilter'] ) ) {
    $args2['tax_query'] = array(
      'relation' => 'AND',
      array(
          'taxonomy' => 'category',
          'field' => 'id',
          'terms' => $_POST['cFilter'],
          'include_children' => false
      ),
      array(
          'taxonomy' => 'post_tag',
          'field' => 'id',
          'terms' => $_POST['tFilter'],
      )
    );
  }

  $query = new WP_Query( $args2 );

  if( $query->have_posts() ) :
    while( $query->have_posts() ): $query->the_post();

    $e = the_title('<h3>', '</h3>', true);
    $e .= the_category(', ');
    $e .= the_tags('<div>',', ','</div>');
    $e .= '<hr />';
    echo $e;

  endwhile;
  wp_reset_postdata();
  else :
    echo 'nothing';
  endif;

  die();

}

AJAX：

jQuery(document).ready(function($){
    $('#filter2').submit(function(){
        var filter2 = $('#filter2');
        $.ajax({
            url:filter2.attr('action'),
            data:filter2.serialize(), // form data
            type:filter2.attr('method'), // POST
            beforeSend:function(xhr){
                filter2.find('#cat-btn').text('Searching...');
            },
            success:function(data){
                filter2.find('#cat-btn').text('Apply'); // changing the button label back
                $('#results').html(data); // insert data
            }
        });
        return false;
    });

});

另一方面，理想情况下，我希望删除“应用”按钮，而是让数据通过AJAX自动显示。换句话说：选择一个类别（ries）并立即显示所有标签，然后选择一个标签（s）并立即显示所有帖子。

我们将非常感谢您的帮助，并感谢您抽出时间。

Answer 1

您需要对代码进行一些更改。首先，标记列表表单需要重新提交筛选值，因此在show\u filter\u results（）中，在隐藏操作字段之前/之后添加此代码。

foreach ($_POST['cFilter'] as $cfilter) {
    $o .= '<input type="hidden" name="cFilter[]" value="' .  esc_attr($cfilter) . '">';
}

然后在show\u tags\u results（）将tax\u查询更改为

$args2['tax_query'] = array(
    'relation' => 'AND',
    array(
        'taxonomy' => 'category',
        'field' => 'id',
        'terms' => $_POST['cFilter'],
        'include_children' => false
    ),
    array(
        'taxonomy' => 'post_tag',
        'field' => 'id',
        'terms' => $_POST['tFilter'],
    )
);