这是我在这里的第一篇文章，也是初学者，所以请耐心等待。
我想完成的是创建一个 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>(' . $cat->count . ')</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−'. $utag->slug .'" value="'. $utag->term_id .'" />';
$o .= '<label for="tag−'. $utag->slug .'">'. $utag->name .'</label>';
$o .= '<span>(' . $utag->count . ')</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 自动显示数据。换句话说：选择一个类别并立即显示所有标签，然后选择一个标签并立即显示所有帖子。
任何帮助将不胜感激，并感谢您的时间。
您需要对代码进行一些更改。首先，标签列表表单需要重新提交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'],
)
);