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

Question

这是我在这里的第一篇文章，而且我是初学者，所以请耐心等待。

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

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

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

我的功能：

编辑：（现在用 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();

}

阿贾克斯：

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 自动显示数据。 换句话说：选择一个类别并立即显示所有标签，然后选择一个标签并立即显示所有帖子。

任何帮助将不胜感激，并感谢您的时间。

Answer 1

您需要对代码进行一些更改。 首先，标签列表表单需要重新提交cFilter值，因此在show_filter_results()隐藏操作字段之前/之后添加此代码。

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

然后在show_tags_results()中将 tax_query 更改为此

$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'],
    )
);