使用jQuery和AJAX创建一个按钮组,以便用户可以单击按钮来筛选文章列表。
HTML代码示例:
jQuery和AJAX代码示例:
$(document).ready(function(){
// 默认显示所有文章
$.ajax({
url: "/wp-admin/admin-ajax.php",
data:{
'action': 'filter_posts',
'term': 'all'
},
success: function(response){
$("#posts-container").html(response);
}
});
// 当筛选按钮被点击时
$(".filter").click(function(){
var term = $(this).data('term');
// 使用AJAX获取筛选后的文章
$.ajax({
url: "/wp-admin/admin-ajax.php",
data:{
'action': 'filter_posts',
'term': term
},
success: function(response){
$("#posts-container").html(response);
}
});
});
});
在functions.php文件中添加以下代码:
function filter_posts(){
$term = $_POST['term'];
if($term == 'all'){
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
);
}else{
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $term,
),
),
);
}
$posts = get_posts($args);
if($posts):
foreach($posts as $post):
setup_postdata($post);
// 获取文章HTML
get_template_part( 'content
下一篇:AJAX删除功能未正常工作