首先,我们要在 WordPress 后台添加一个新的 Ajax 功能,在 functions.php 中添加如下代码:
// 添加 Ajax 加载分类下文章功能
add_action('wp_ajax_load_category_posts','load_category_posts_callback');
add_action('wp_ajax_nopriv_load_category_posts','load_category_posts_callback');
function load_category_posts_callback(){
// 获取分类ID
$cat_id = $_POST['cat_id'];
// 设置参数
$args = array(
'cat' => $cat_id,
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => -1
);
$query = new WP_Query( $args );
// 开始循环
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
// 这里填写文章模板
echo '<article>';
echo '<h3><a href="'.get_permalink().'">'.get_the_title().'</a></h3>';
echo '<div class="entry-content">'.get_the_excerpt().'</div>';
echo '</article>';
endwhile;
endif;
// 重置post数据
wp_reset_postdata();
// 结束 Ajax 功能
die();
}
接下来,我们要在需要加载文章的页面(可以是首页或者某个分类下的页面)中添加 JavaScript 代码,用来发起 Ajax 请求:
// 加载文章
jQuery(document).ready(function($){
// 获取分类ID
var cat_id = '1'; // 填写你要加载的分类ID
// 设置Ajax参数
var data = {
'action': 'load_category_posts',
'cat_id': cat_id
};
// Ajax请求
$.post(ajaxurl, data, function(response) {
// 将文章内容添加到页面中
$('.post-list').html(response);
});
});
最后,我们要在页面添加一个用来显示文章内容的容器:
<div class="post-list"></div>
以上内容通过ChatGPT生成
Ajax 代码:
<script type="text/javascript">
jQuery(document).ready(function($){
$('.category').on('click', function(){
var catId = $(this).data('category');
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
data: {
action: 'get_category_posts',
catid: catId
},
dataType: 'json',
success: function(data){
if( data ) {
// do something with the data here
$('#category-posts').html(data);
}
}
});
});
});
</script>
<?php
// Register the ajax action
add_action('wp_ajax_get_category_posts', 'get_category_posts');
add_action('wp_ajax_nopriv_get_category_posts', 'get_category_posts');
function get_category_posts() {
$catId = $_GET['catid'];
$args = array(
'posts_per_page' => -1,
'cat' => $catId
);
$posts = get_posts($args);
if( $posts ) {
$html = '<ul>';
foreach( $posts as $post ) {
$html .= '<li>' . $post->post_title . '</li>';
}
$html .= '</ul>';
echo json_encode($html);
}
die();
}
?>