我在WordPress中使用木材。
我正在尝试创建一个带有"Load more posts" 按钮
当用户点击按钮时，我想显示10篇同类文章，并加载10篇同类文章"Load more posts"
当类别之间没有区别时，一切都很好。按钮"Load more posts" 工作正常。显示10个立柱。
但是当我点击按钮试图显示同一类别的帖子时"Load more posts". 不显示post。类别有什么问题？
能帮我个忙吗？
存档。php
$category = get_the_category($post->ID);
$category = $category[0]->cat_ID;
$context[\'posts\'] = Timber::get_posts(array(
\'post_type\' => \'post\',
\'post_status\' => \'publish\',
\'category__in\' => array($category),
\'posts_per_page\' => 10,
\'paged\' => 1,
\'has_password\' => FALSE
));
脚本。js公司
function load_more_news() {
var page = 1;
$(document).on(\'click\', \'#load-more-news\', function(e) {
e.preventDefault();
page++;
$.ajax({
type: \'POST\',
url: \'/wp-admin/admin-ajax.php\',
dataType: \'html\',
data: {
\'action\' : \'get_news\',
\'get_page\' : page
},
success: function(data) {
if($(\'<div></div>\').html(data).find(\'.archive__item.ended\').size() > 0) $(\'#load-more-news\').parents(\'.cta\').remove();
else $(\'#load-more-news\').parents(\'.cta\').show();
$(\'#archive__list\').append(data);
},
error: function(data) {
console.log(data);
}
});
});
}
功能。php
add_action( \'wp_ajax_nopriv_get_news\', \'get_news\' );
add_action( \'wp_ajax_get_news\', \'get_news\' );
function get_news() {
global $post;
$context = Timber::get_context();
$context[\'get_page\'] = empty($_POST[\'get_page\']) ? 1 : $_POST[\'get_page\'];
$category = get_the_category($post->ID);
$category = $category[0]->cat_ID;
$context[\'posts\'] = Timber::get_posts(array(
\'post_type\' => \'post\',
\'post_status\' => \'publish\',
\'category__in\' => array($category),
\'posts_per_page\' => 10,
\'paged\' => $context[\'get_page\'],
\'has_password\' => FALSE
));
$count = count(Timber::get_posts(array(
\'post_type\' => \'post\',
\'posts_per_page\' => -1,
\'post_status\' => \'publish\',
\'category__in\' => array($category)
)));
if($count <= $context[\'get_page\'] * 10) $context[\'ended\'] = \'ended\';
Timber::render( \'bloc_news.twig\', $context );
die();
}
存档。细枝
<section class="archive">
<p class="archive__title h-headline text-size-l">In the same thematic</p>
<div id="archive__list" class="archive__list">
<article class="post">
...
</article>
</div>
</section>
{% if posts|length >= 10 %}
<section class="cta">
<a href="#" id="load-more-news">
<p class="cta__text">Load more posts</p>
</a>
</section>
{% endif %}
最合适的回答,由SO网友:Razon Komar Pal 整理而成
我认为您的代码中有一个小的更正，您只传递了页码，但也传递了类别ID。我添加了data-category 加载更多按钮中的属性。所以你的archive.twig 应该是：
<section class="archive">
<p class="archive__title h-headline text-size-l">In the same thematic</p>
<div id="archive__list" class="archive__list">
<article class="post">
...
</article>
</div>
</section>
{% if posts|length >= 10 %}
<section class="cta">
<a href="#" id="load-more-news" data-category="YOUR_CATEGORY_ID_HERE">
<p class="cta__text">Load more posts</p>
</a>
</section>
{% endif %}
通过
data-category 通过您的
script.js, 所以
script.js 代码应如下所示：
function load_more_news() {
var page = 1;
$(document).on(\'click\', \'#load-more-news\', function(e) {
e.preventDefault();
page++;
$.ajax({
type: \'POST\',
url: \'/wp-admin/admin-ajax.php\',
dataType: \'html\',
data: {
\'action\' : \'get_news\',
\'get_page\' : page,
\'get_category\' : $(this).data(\'category\'),
},
success: function(data) {
if($(\'<div></div>\').html(data).find(\'.archive__item.ended\').size() > 0) $(\'#load-more-news\').parents(\'.cta\').remove();
else $(\'#load-more-news\').parents(\'.cta\').show();
$(\'#archive__list\').append(data);
},
error: function(data) {
console.log(data);
}
});
});
}
现在接收
data-category 类似服务器端的属性值
get_page , 所以你的
functions.php 代码应如下所示：
add_action( \'wp_ajax_nopriv_get_news\', \'get_news\' );
add_action( \'wp_ajax_get_news\', \'get_news\' );
function get_news() {
global $post;
$context = Timber::get_context();
$context[\'get_page\'] = empty($_POST[\'get_page\']) ? 1 : $_POST[\'get_page\'];
$context[\'get_category\'] = isset($_POST[\'get_category\']) ? $_POST[\'get_category\'] : \'\';
$context[\'posts\'] = Timber::get_posts(array(
\'post_type\' => \'post\',
\'post_status\' => \'publish\',
\'category__in\' => array($context[\'get_category\']),
\'posts_per_page\' => 10,
\'paged\' => $context[\'get_page\'],
\'has_password\' => FALSE
));
$count = count(Timber::get_posts(array(
\'post_type\' => \'post\',
\'posts_per_page\' => -1,
\'post_status\' => \'publish\',
\'category__in\' => array($context[\'get_category\'])
)));
if($count <= $context[\'get_page\'] * 10) $context[\'ended\'] = \'ended\';
Timber::render( \'bloc_news.twig\', $context );
die();
}
