1
Ich möchte eine Ajax "Lesen Sie mehr" -Taste Funktionalität in WordPress.AJAX Lesen Sie mehr Beiträge in WordPress
Hier ist mein Versuch, aber der Code hat einen Fehler:
Der Kodex in meinem functions.php
wp_localize_script('gershman-script', 'ajax_posts', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'noposts' => __('No older posts found', 'gershman'),
));
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' => 1,
'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>';
$out .= '<article id="section__blog--main--post" class="clearfix equal-height" data-group-by="2" ' . $category_string . '">';
$out .= '<aside class="column" >';
$out .= '<a href="' . get_permalink() . '">';
$out .= '<figure>';
$out .= (has_post_thumbnail() ? get_the_post_thumbnail($post->ID, 'image-660-240') : '');
$out .= '<span class="meta--stamp">' . get_the_time('F j, Y') . '</span>';
$out .= '<h4 class="caps header-blog text-left"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h4>';
$out .= '</figure>';
$out .= '</a>';
$out .= '</aside>';
$out .= '<aside id="section__blog--meta" class="column">';
$out .= '<p class="text-left">' . get_the_excerpt() . '</p>';
$out .= '<a href="' . get_permalink() . '" class="caps read--more">Read Now <i class="fa fa-angle-double-right color-green"></i></a>';
$out .= '</aside>';
$out .= '</article>';
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');
Der Code in der Fußzeile
<script type="text/javascript">
$(document).ready(function() {
var ppp = 3; // Post per page
var cat = 1;
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();
});
})
</script>
Die Codevorlage Seite ist
<div id="ajax-posts">
<?php
$this_post = $post->ID;
$postsPerPage = 3;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'order' => 'DESC',
'orderby' => 'date',
'cat' => 1
);
$loop = new WP_Query($args);
$total_posts = $loop->post_count;
while ($loop->have_posts()) : $loop->the_post();
$display_posts .= '<article id="section__blog--main--post" class="clearfix equal-height" data-group-by="2" ' . $category_string . '">';
$display_posts .= '<aside class="column" >';
$display_posts .= '<a href="' . get_permalink() . '">';
$display_posts .= '<figure>';
$display_posts .= (has_post_thumbnail() ? get_the_post_thumbnail($post->ID, 'image-660-240') : '');
$display_posts .= '<span class="meta--stamp">' . get_the_time('F j, Y') . '</span>';
$display_posts .= '<h4 class="caps header-blog text-left"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h4>';
$display_posts .= '</figure>';
$display_posts .= '</a>';
$display_posts .= '</aside>';
$display_posts .= '<aside id="section__blog--meta" class="column">';
$display_posts .= '<p class="text-left">' . get_the_excerpt() . '</p>';
$display_posts .= '<a href="' . get_permalink() . '" class="caps read--more">Read Now <i class="fa fa-angle-double-right color-green"></i></a>';
$display_posts .= '</aside>';
$display_posts .= '</article>';
$counter++;
endwhile;
wp_reset_postdata();
?>
`<section id="section__blog--main">
<div class="wrapper" id="section__filtered--list">
<?=$display_posts ?>
<button id="more_posts" class="button faded" data-nonce="<?=wp_create_nonce("load_news_nonce")?>" data-current-total="3" data-total-posts="<?=$total_posts?>">Load More</button>
</div>
</section>
</div>