AJAX фильтрация записей по категориям при клике
Это моя первая попытка работы с AJAX, я собирал код из разных руководств, что, вероятно, не помогло.
На главной странице (index.php) у меня есть список категорий и список последних записей. Когда пользователь кликает по категории, я хочу обновлять список записей без перезагрузки страницы. Сейчас при клике на фильтр все записи загружаются в контейнер ответа (они не фильтруются по категории), и загружается только the_content(), хотя мой шаблон (listing-post.php) запрашивает миниатюру, категорию и т.д.
Я использую Bones в качестве стартовой темы, поэтому wp_localize_script находится в этом файле (он работает). Я включил только код, в котором есть проблемы (остальная часть сайта и JS работает нормально).
bones.php
// Добавляем путь AJAX для использования в load-posts.js
$getPath = array('ajaxURL' => admin_url('admin-ajax.php'));
wp_localize_script('main-js', 'pathToFile', $getPath);
functions.php
// AJAX фильтр по категориям
add_action( 'wp_ajax_load_cat_posts', 'load_cat_posts' );
add_action( 'wp_ajax_nopriv_load_cat_posts', 'load_cat_posts' );
function load_cat_posts () {
$cat_id = get_post_meta($_REQUEST['cat']);
$args = array (
'cat' => $cat_id,
'posts_per_page' => 10,
'order' => 'DESC'
);
$posts = get_posts($args);
ob_start ();
foreach ( $posts as $post ) {
setup_postdata( $post ); ?>
<?php get_template_part( 'partials/listing', 'post'); ?>
<?php } wp_reset_postdata();
$response = ob_get_contents();
ob_end_clean();
echo $response;
die(1);
}
index.php
<?php $categories = get_categories(); ?>
<ul class="category-filters">
<?php foreach ( $categories as $cat ) { ?>
<li id="cat-<?php echo $cat->term_id; ?>">
<a class="<?php echo $cat->slug; ?> ajax" data-cat="<?php echo $cat->term_id; ?>" href="javascript:void(0)"><?php echo $cat->name; ?></a>
</li>
<?php } ?>
</ul>
listing-post.php
<li class="standard-post">
<article id="<?php echo sanitize_title_with_dashes( get_the_title() ); ?>" <?php post_class(); ?> role="article">
<?php if (has_post_thumbnail()) { ?>
<div class="article-image">
<?php the_post_thumbnail(large); ?>
</div>
<?php } ?>
<div class="article-left">
<?php foreach((get_the_category()) as $category) { ?>
<span class="article-category"><?php echo $category->cat_name . ' ';?></span>
<?php } ?>
</div>
<div class="article-right">
<header class="article-header">
<h1 class="article-title"><?php the_title(); ?></h1>
<p class="article-time">
<?php printf( __( '<time class="updated" datetime="%1$s" pubdate>%2$s</time>', 'bonestheme' ), get_the_time(), get_the_time(get_option('date_format'))); ?>
</p>
</header>
<section class="entry-content">
<?php the_content(); ?>
</section>
</div>
</article>
</li>
load-posts.js
function cat_ajax_get(currentCat) {
$('a.ajax').removeClass('current');
$('a.ajax').addClass('current');
$('#loading-animation').show();
$.ajax({
type: 'POST',
url: ajaxurl,
data: {action: 'load_cat_posts', cat: currentCat },
success: function(response) {
$('.article-listing').html(response);
$('#loading-animation').hide();
return false;
}
});
};
ajaxFilters: function() {
$('.category-filters a').on('click', $.proxy(function(clickEvent) {
$clickTarget = $(clickEvent.currentTarget);
var currentCat = $clickTarget.attr('data-cat');
cat_ajax_get(currentCat);
},this));
}

Эта строка в functions.php
является вашей проблемой:
$cat_id = get_post_meta($_REQUEST['cat']);
Я думаю, вы неправильно понимаете назначение функции get_post_meta()
. Она предназначена для получения метаданных записи WordPress, а не данных из POST
-запроса к сайту. Первый параметр функции get_post_meta()
— это $post_id
, но поскольку вы передаёте вместо него ID категории, вы получите либо false
, либо массив всех мета-значений, если существует запись с таким же ID, как у категории. В любом из этих случаев значение переменной запроса cat
не будет действительным ID категории, поэтому эта часть запроса будет проигнорирована и будут возвращены все записи. Если вы замените эту строку на следующую, это исправит проблему, и ваш код, вероятно, заработает:
$cat_id = absint( $_REQUEST['cat'] );
Функция absint()
просто преобразует предоставленное пользователем значение в положительное целое число.
