我想将类别显示为按钮。
当我单击按钮时,我想显示该类别中的帖子列表
帖子有标题、缩略图、内容(文本)
在帖子列表中,我想显示标题、图片、内容,可能还有日期。
我想使用ajax显示文章,而不需要重新加载页面。
我想我大部分都在那里,但我无法显示帖子中的所有内容。
显示类别:
<ul>
<?php
$cat_args = array(
\'orderby\' => \'name\',
\'order\' => \'ASC\',
\'hide_empty\' => 1
);
$cats = get_categories($cat_args);
foreach($cats as $cat){
echo \'<li><a href="#" data-slug="\' . $cat->term_id . \'" class="js-category-button">\' . $cat->name . \'</a></li>\';
}
?>
</ul>
jQuery位于单独的文件中。
$atj(\'.js-category-button\').on(\'click\', function(e){
e.preventDefault();
var catID = $atj(this).data(\'slug\');
var ajaxurl = \'http://my-site.co.uk/wp-admin/admin-ajax.php\';
$atj.ajax({
type: \'POST\',
url: ajaxurl,
crossDomain : true,
dataType: \'html\',
data: {"action": "load-filter", cat: catID },
success: function(response) {
$atj(".the-news").append(response);
return false;
}
});
})
php脚本位于函数中。php
add_action( \'wp_ajax_nopriv_load-filter\', \'prefix_load_cat_posts\' );
add_action( \'wp_ajax_load-filter\', \'prefix_load_cat_posts\' );
function prefix_load_cat_posts () {
global $post;
$cat_id = $_POST[ \'cat\' ];
$args = array (
\'cat\' => $cat_id,
\'posts_per_page\' => 3,
\'order\' => \'ASC\'
);
$cat_query = new WP_Query($args);
if($cat_query->have_posts()) :
while($cat_query->have_posts()) :
$cat_query->the_post();
$response = \'<div class="the-post">\';
$response .= \'<h1 class="the-title">\';
$response .= \'<a href="#">\'. get_the_title() .\'</a>\';
$response .= \'</h1>\';
$response .= apply_filters( \'the_content\', get_the_content() );
$response .= \'</div>\';
echo $response;
endwhile;
endif;
wp_reset_postdata();
die(1);
}
代码保持原样,类别显示为按钮。如果我单击它们,它会显示文章标题,但不会显示内容
如何显示帖子内容、帖子缩略图和日期。
SO网友:Nirav Patel
add_action( \'wp_ajax_nopriv_load-filter\', \'prefix_load_cat_posts\' );
add_action( \'wp_ajax_load-filter\', \'prefix_load_cat_posts\' );
function prefix_load_cat_posts () {
global $post;
$cat_id = $_POST[ \'cat\' ];
$args = array (
\'cat\' => $cat_id,
\'posts_per_page\' => 3,
\'order\' => \'ASC\'
);
$cat_query = new WP_Query($args);
if($cat_query->have_posts()) :
while($cat_query->have_posts()) :
$cat_query->the_post();
$response = \'<div class="the-post">\';
$response .= \'<h1 class="the-title">\';
$response .= \'<a href="#">\'. get_the_title() .\'</a>\';
$response .= \'</h1>\';
$response .= apply_filters( \'the_content\', get_the_content() );
$response .= \'<a href="#">\'. the_post_thumbnail() .\'</a>\';
$response .= \'</div>\';
echo $response;
endwhile;
endif;
wp_reset_postdata();
die(1);
}
<script>
jQuery(document).ready(function () {
jQuery(\'.js-category-button\').on(\'click\', function(e){
e.preventDefault();
var catID = jQuery(this).data(\'slug\');
var ajaxurl = \'http://localhost/wordpress/wp-admin/admin-ajax.php\';
jQuery.ajax({
type: \'POST\',
url: ajaxurl,
crossDomain : true,
dataType: \'html\',
data: {"action": "load-filter", cat: catID },
beforeSend: function () {
jQuery(".the-news").html(\'<p></p>\')
},
success: function(response) {
jQuery(".the-news").append(response);
return false;
}
});
})
});
</script>
<ul>
<?php
$cat_args = array(
\'orderby\' => \'name\',
\'order\' => \'ASC\',
\'hide_empty\' => 1
);
$cats = get_categories($cat_args);
foreach($cats as $cat){
echo \'<li><a href="#" data-slug="\' . $cat->term_id . \'" class="js-category-button">\' . $cat->name . \'</a></li>\';
}
?>
<div class="the-news">
</div>
</ul>