加载更多帖子阿贾克斯键在Word preSS [英] Load More Posts Ajax Button in Wordpress
问题描述
我已经通过老问题，一起来看看，并尝试了许多不同的方法，有似乎是要做到这一点。我得工作最接近的是这一个位置：<一href="http://stackoverflow.com/questions/29595391/how-to-implement-pagination-on-a-custom-wp-query-ajax">How实现一个自定义分页WP_Query阿贾克斯
I've had a look through the old questions and tried many of the different methods that there seems to be to do this. The closest I've got to working is this one here: How to implement pagination on a custom WP_Query Ajax
我已经尝试了一切，它只是不工作。在页面上绝对没有任何变化。如果检查负载更多按钮，点击它，在jQuery是使得负载更多的按钮动作，因为它从＆LT的变化;一个ID =more_posts＆GT;负载详情＆lt; / A＆GT; 到＆LT;一个ID =more_posts禁用=禁用＆GT;负载详情＆lt; / A＆GT; 这甚至似乎不正确的，我反正。它不增加的职位，我想我失去了一些东西简单，但对我的生活，我不能工作了。
I've tried everything and it just doesnt work. Absolutely nothing changes on the page. If you inspect the Load More Button and click it, the jquery is making the Load More Button action as it changes from <a id="more_posts">Load More</a> to <a id="more_posts" disables="disabled">Load More</a> which even that doesnt seem right to me anyway. It's not adding the posts, I think I'm missing something simple but for the life of me I can't work it out.
在code。在我的模板文件是：
The Code in My template file is:
<div id="ajax-posts" class="row">
<?php
$postsPerPage = 3;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => 1
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<div class="small-12 large-4 columns">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</div>
<?php
endwhile;
echo '<a id="more_posts">Load More</a>';
wp_reset_postdata();
?>
</div>
在code。在我的职务的文件是：
The Code in my functions file is:
function more_post_ajax(){
$offset = $_POST["offset"];
$ppp = $_POST["ppp"];
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => 1,
'offset' => $offset,
);
$loop = new WP_Query($args);
while ($loop->have_posts()) { $loop->the_post();
the_content();
}
exit;
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
和我在页脚jQuery是：
And My JQuery in the footer is:
<script type="text/javascript">
jQuery(document).ready( function($) {
var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
var page = 5; // What page we are on.
var ppp = 3; // Post per page
$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
$.post(ajaxUrl, {
action:"more_post_ajax",
offset: (page * ppp) + 1,
ppp: ppp
}).success(function(posts){
page++;
$("#ajax-posts").append(posts); // CHANGE THIS!
$("#more_posts").attr("disabled",false);
});
});
})
</script>
任何人能看到我丢失的东西，或能帮助？
Can anybody see something I'm missing or able to help?
推荐答案
我测试过这对二十五和它的工作，所以应该为你工作。
EDIT
I've tested this on Twenty Fifteen and it's working, so it should be working for you.
在的index.php （假设你想显示在主页上的帖子，但这应该工作，即使你把它放在一个页面模板），我把：
In index.php (assuming that you want to show the posts on the main page, but this should work even if you put it in a page template) I put:
<div id="ajax-posts" class="row">
<?php
$postsPerPage = 3;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => 8
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<div class="small-12 large-4 columns">
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div>
<div id="more_posts">Load More</div>
这将输出从8类3个员额（我曾在这一类的职位，所以我用它，你可以使用任何你想）。你甚至可以查询你在与该类别
This will output 3 posts from category 8 (I had posts in that category, so I used it, you can use whatever you want to). You can even query the category you're in with
$cat_id = get_query_var('cat');
这会给你的类ID在查询中使用。你可以把它放进你的装载机（负载更多的div），并与jQuery的拉像
This will give you the category id to use in your query. You could put this in your loader (load more div), and pull with jQuery like
<div id="more_posts" data-category="<?php echo $cat_id; ?>">>Load More</div>
和拉带类
var cat = $('#more_posts').data('category');
但现在，你可以离开了这一点。
But for now, you can leave this out.
下一步的functions.php 我加了
wp_localize_script( 'twentyfifteen-script', 'ajax_posts', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'noposts' => __('No older posts found', 'twentyfifteen'),
));
右键后，现有的 wp_localize_script 。这将加载字preSS自己的管理员-ajax.php，以便我们可以使用它时，我们把它在我们的AJAX调用。
Right after the existing wp_localize_script. This will load wordpress own admin-ajax.php so that we can use it when we call it in our ajax call.
在functions.php文件的最后，我添加了功能，将加载您的帖子：
At the end of the functions.php file I added the function that will load your posts:
function more_post_ajax(){
$ppp = (isset($_POST["ppp"])) ? $_POST["ppp"] : 3;
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
header("Content-Type: text/html");
$args = array(
'suppress_filters' => true,
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => 8,
'paged' => $page,
);
$loop = new WP_Query($args);
$out = '';
if ($loop -> have_posts()) : while ($loop -> have_posts()) : $loop -> the_post();
$out .= '<div class="small-12 large-4 columns">
<h1>'.get_the_title().'</h1>
<p>'.get_the_content().'</p>
</div>';
endwhile;
endif;
wp_reset_postdata();
die($out);
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
在这里，我已经添加了数组中的分页键，这样循环可以跟踪你是什么网页，当你加载你的帖子。
Here I've added paged key in the array, so that the loop can keep track on what page you are when you load your posts.
如果你已经添加在装载机您的类别，你要补充：
If you've added your category in the loader, you'd add:
$cat = (isset($_POST['cat'])) ? $_POST['cat'] : '';
而不是8
和，你把 $猫。这将是 $ _ POST 数组中，你就可以使用它在阿贾克斯。
And instead of 8, you'd put $cat. This will be in the $_POST array, and you'll be able to use it in ajax.
最后一部分是AJAX本身。在 functions.js 我把 $（文件）。就绪（）内; 环境
Last part is the ajax itself. In functions.js I put inside the $(document).ready(); enviroment
var ppp = 3; // Post per page
var cat = 8;
var pageNumber = 1;
function load_posts(){
pageNumber++;
var str = '&cat=' + cat + '&pageNumber=' + pageNumber + '&ppp' + ppp + '&action=more_post_ajax';
$.ajax({
type: "POST",
dataType: "html",
url: ajax_posts.ajaxurl,
data: str,
success: function(data){
var $data = $(data);
if($data.length){
$("#ajax-posts").append($data);
$("#more_posts").attr("disabled",false);
} else{
$("#more_posts").attr("disabled",true);
}
},
error : function(jqXHR, textStatus, errorThrown) {
$loader.html(jqXHR + " :: " + textStatus + " :: " + errorThrown);
}
});
return false;
}
$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
load_posts();
});
救了它，测试它，和它的作品：）
Saved it, tested it, and it works :)
为证明图片（不介意以次充好的造型，因此迅速完成）。同时发布的内容是乱码的xD
Images as proof (don't mind the shoddy styling, it was done quickly). Also post content is gibberish xD
希望这有助于:)如果你有任何问题，只是问。
Hope this helps :) If you have any questions just ask.
这篇关于加载更多帖子阿贾克斯键在Word preSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
