我跟踪this guide关于如何为按类别对帖子进行排序并在div中动态显示的帖子创建AJAX过滤器。我已经修改了代码，以便为每个类别显示子类别容器。
我现在想添加一个选项，让用户通过按＆＃34; All＆＃34;来重置过滤器。在过滤器选项中。在我用过的指南中，用户要求此功能，但我无法理解如何实现它。说明如下：
- 在HTML中添加选项，
- 如果选中该选项，请不要将任何参数添加到WP_Query（）的$ args数组中。
我真的不知道该怎么做。我在我的functions.php中放了处理表单的PHP。到目前为止，这是functions.php中的代码：
function misha_filter_function(){
$args = array(
'orderby' => 'date', // we will sort posts by date
'order' => $_POST['date'] // ASC или DESC
);
// for taxonomies / categories
if( isset( $_POST['categoryfilter'] ) )
$args['tax_query'] = array(
array(
'hide_empty' => 0,
'taxonomy' => 'category',
'field' => 'id',
'terms' => $_POST['categoryfilter'],
)
);
if( isset( $_POST['subcategoryfilter'] ) )
$args['tax_query'] = array(
array(
'hide_empty' => 0,
'taxonomy' => 'category',
'field' => 'id',
'terms' => $_POST['subcategoryfilter'],
)
);
$query = new WP_Query( $args );
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
echo '<div class="gallery-item">';
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail-size' ); $url = $thumb['0'];
the_post_thumbnail('large', array('data-src'=>$url, 'data-sub-html'=>$query->post->post_title));
}
echo '<p>' . $query->post->post_title . '</p></div>';
endwhile;
wp_reset_postdata();
else :
echo 'No posts found';
endif;
die();
}
这是HTML / PHP：
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<?php echo "<div id='maincategories'>"; ?>
<?php
if( $terms = get_terms( 'category', 'parent=0&exclude=1' ) ) : // to make it simple I use default categories
foreach ( $terms as $term ) :
echo '<label><input type="radio" name="categoryfilter" data-filter-slug="' . $term->slug . '" value="' . $term->term_id . '">' . $term->name . '</label>'; // ID of the category as the value of an option
endforeach;
echo "</div>";
endif;
?>
<!-- ### HIDDEN CONTAINERS FOR THE SUBCATEGORIES ### -->
<!-- Väggar/tak -->
<?php
if( $terms = get_terms( 'category', 'child_of=32' ) ) : // to make it simple I use default categories
echo "<div class='subcategories' data-filter-id='32'>";
foreach ( $terms as $term ) :
echo '<label><input type="radio" data-category-id="' . $term->parent . '" name="subcategoryfilter" value="' . $term->term_id . '">' . $term->name . '</label>'; // ID of the category as the value of an option
endforeach;
echo "</div>";
endif;
?>
<!-- Golv -->
<?php
if( $terms = get_terms( 'category', 'child_of=41' ) ) : // to make it simple I use default categories
echo "<div class='subcategories' data-filter-id='41'>";
foreach ( $terms as $term ) :
echo '<label><input type="radio" data-category-id="' . $term->parent . '" name="subcategoryfilter" value="' . $term->term_id . '">' . $term->name . '</label>'; // ID of the category as the value of an option
endforeach;
echo "</div>";
endif;
?>
<!-- Objekt -->
<?php
if( $terms = get_terms( 'category', 'child_of=26' ) ) : // to make it simple I use default categories
echo "<div class='subcategories' data-filter-id='26'>";
foreach ( $terms as $term ) :
echo '<label><input type="radio" data-category-id="' . $term->parent . '" name="subcategoryfilter" value="' . $term->term_id . '">' . $term->name . '</label>'; // ID of the category as the value of an option
endforeach;
echo "</div>";
endif;
?>
<!-- Projekt -->
<?php
if( $terms = get_terms( 'category', 'child_of=31' ) ) : // to make it simple I use default categories
echo "<div class='subcategories' data-filter-id='31'>";
foreach ( $terms as $term ) :
echo '<label><input type="radio" data-category-id="' . $term->parent . '" name="subcategoryfilter" value="' . $term->term_id . '">' . $term->name . '</label>'; // ID of the category as the value of an option
endforeach;
echo "</div>";
endif;
?>
我认为这样做的方法是把它放在PHP / HTML中......
echo "<label><input type='radio' name='all' > All</label>";
...然后把它作为functions.php：
if( isset( $_POST['all'] ) )
$args = array();
但这似乎并没有解决它。我是PHP和Wordpress的初学者，所以我们将不胜感激。
编辑：以下是jQuery：
jQuery(function ($) {
$("#filter #maincategories label").on("click", function () {
if($(this).children("input").attr("checked")){
return;
} else {
$(".subcategories input").removeAttr('checked');
$(".subcategories label").removeClass("active");
}
})
$('#filter').submit(function () {
var filter = $('#filter');
var filterID;
$.ajax({
url: filter.attr('action'),
data: filter.serialize(), // form data
type: filter.attr('method'), // POST
beforeSend: function (xhr) {
$("#response").removeClass("active");
filter.find('button').text('Processing...'); // changing the button label
console.log(filter.serialize());
$(".subcategories").hide();
$(".subcategories").removeClass("active");
filterID = filter.serialize().match(/categoryfilter=(\w+)&/)[1];
$(".subcategories[data-filter-id=" + filterID + "]").addClass("active").show();
},
success: function (data) {();
$('#response').html(data); // insert data
if ($("#response").data("lightGallery"))
$("#response").data("lightGallery").destroy(true);
createLightGallery();
setImageFormat();
}
});
return false;
});
});
答案 0 :(得分：1)
好的，
首先在你的HTML中添加如下内容：
echo "<label><input type='checkbox' name='all' > All</label>";
第二步 - 在过滤器PHP函数的开头进行一些更改：
if( empty( $_POST['all'] ) ) {
if( isset( $_POST['categoryfilter'] ) )
$args['tax_query'] = array(
array(
'hide_empty' => 0,
'taxonomy' => 'category',
'field' => 'id',
'terms' => $_POST['categoryfilter'],
)
);
if( isset( $_POST['subcategoryfilter'] ) )
$args['tax_query'] = array(
array(
'hide_empty' => 0,
'taxonomy' => 'category',
'field' => 'id',
'terms' => $_POST['subcategoryfilter'],
)
);
}