如何解决Ajax 加载更多帖子
现状： 我使用了优雅主题中的“额外”主题，我想使用这个 ajax 加载更多按钮： https://rudrastyh.com/wordpress/load-more-posts-ajax.html
我在 wordpress 主题 27 中对其进行了测试，效果很好。
现在我想将它包含在 Extra 主题中。
在页面底部，您会看到按钮： https://www.irrtum.online/
但是当您单击它时，它只会显示下一个帖子 ID，而不是像上面这样的整个帖子。 我使用以下代码：
myloadmore.js
jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error
$('.misha_loadmore').click(function(){
var button = $(this),data = {
'action': 'loadmore','query': misha_loadmore_params.posts,// that's how we get params from wp_localize_script() function
'page' : misha_loadmore_params.current_page
};
$.ajax({ // you can also use $.post here
url : misha_loadmore_params.ajaxurl,// AJAX handler
data : data,type : 'POST',beforeSend : function ( xhr ) {
button.text('Loading...'); // change the button text,you can also add a preloader image
},success : function( data ){
if( data ) {
button.text( 'More posts' ).prev().before(data); // insert new posts
misha_loadmore_params.current_page++;
if ( misha_loadmore_params.current_page == misha_loadmore_params.max_page )
button.remove(); // if last page,remove the button
// you can also fire the "post-load" event here if you use a plugin that requires it
// $( document.body ).trigger( 'post-load' );
} else {
button.remove(); // if no data,remove the button as well
}
}
});
});
});
functions.PHP
function misha_my_load_more_scripts() {
global $wp_query;
// In most cases it is already included on the page and this line can be removed
wp_enqueue_script('jquery');
// register our main script but do not enqueue it yet
wp_register_script( 'my_loadmore',get_stylesheet_directory_uri() . '/myloadmore.js',array('jquery') );
// Now the most interesting part
// we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
// you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
wp_localize_script( 'my_loadmore','misha_loadmore_params',array(
'ajaxurl' => site_url() . '/wp-admin/admin-ajax.PHP',// wordpress AJAX
'posts' => json_encode( $wp_query->query_vars ),// everything about your loop is here
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,'max_page' => $wp_query->max_num_pages
) );
wp_enqueue_script( 'my_loadmore' );
}
add_action( 'wp_enqueue_scripts','misha_my_load_more_scripts' );
function misha_loadmore_ajax_handler(){
// prepare our arguments for the query
$args = json_decode( stripslashes( $_POST['query'] ),true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
// it is always better to use WP_Query but not here
query_posts( $args );
if( have_posts() ) :
// run the loop
while( have_posts() ): the_post();
// look into your theme code how the posts are inserted,but you can use your own HTML of course
// do you remember? - my example is adapted for Twenty Seventeen theme
get_template_part( 'index-content.PHP',the_ID() );
// for the test purposes comment the line above and uncomment the below one
// the_title();
endwhile;
endif;
die; // here we exit the script and even no wp_reset_query() required!
}
add_action('wp_ajax_loadmore','misha_loadmore_ajax_handler'); // wp_ajax_{action}
add_action('wp_ajax_nopriv_loadmore','misha_loadmore_ajax_handler'); // wp_ajax_nopriv_{action}
function.PHP 中的这部分应该是我可以放置设置的部分：
// look into your theme code how the posts are inserted,the_ID() );
// for the test purposes comment the line above and uncomment the below one
// the_title();
但我不知道正确的模板和命令。
这就是模板 module-posts-blog-Feed.PHP
<?PHP
$data_atts = $this->props_to_html_data_attrs(array(
'show_featured_image','show_author','show_categories','show_date','show_rating','show_more','show_comments','date_format','posts_per_page','order','orderby','category_id','content_length','blog_Feed_module_type','hover_overlay_icon','use_tax_query'
));
if ( 'standard' == $blog_Feed_module_type && false === strpos( $category_id,',' ) ) {
$color = extra_get_category_color( $category_id );
$color_style = esc_attr( sprintf( 'border-color:%s;',$color ) );
} else {
$color_style = '';
}
?>
<?PHP $id_attr = '' !== $module_id ? sprintf( ' id="%1$s"',esc_attr( $module_id ) ) : ''; ?>
<div <?PHP echo $id_attr ?> class="posts-blog-Feed-module post-module et_pb_extra_module <?PHP echo esc_attr( $blog_Feed_module_type ); ?> <?PHP echo esc_attr( $module_class ); ?> paginated et_pb_extra_module" style="<?PHP echo esc_attr( $color_style ); ?>" data-current_page="1" data-et_column_type="<?PHP echo esc_attr( $_et_column_type ); ?>" <?PHP echo $data_atts; ?>>
<?PHP if ( !empty( $Feed_title ) ) { ?>
<div class="module-head">
<h1 class="Feed-title"><?PHP echo esc_html( $Feed_title ); ?></h1>
</div>
<?PHP } ?>
<?PHP if ( $module_posts->have_posts() ) : ?>
<div class="paginated_content">
<?PHP require locate_template( 'module-posts-blog-Feed-loop.PHP' ); ?>
</div><!-- /.paginated_content -->
<span class="loader"><?PHP extra_ajax_loader_img(); ?></span>
<?PHP if ( $module_posts->max_num_pages > 1 && $show_pagination ) { ?>
<ul class="pagination">
<li class="prev arrow"><a class="prev arrow" href="#"></a></li>
<?PHP for ( $x = 1; $x <= $module_posts->max_num_pages; $x++ ) { ?>
<?PHP if ( $x == $module_posts->max_num_pages ) { ?>
<li class="ellipsis back"><a class="ellipsis" href="#">...</a></li>
<?PHP } ?>
<?PHP $last_class = $x == $module_posts->max_num_pages ? ' last' : ''; ?>
<li class="<?PHP echo esc_attr( $last_class ); ?>"><a href="#" class="pagination-page pagination-page-<?PHP echo esc_attr( $x ); ?>" data-page="<?PHP echo $x; ?>"><?PHP echo $x; ?></a></li>
<?PHP if ( $x == 1 ) { ?>
<li class="ellipsis front"><a class="ellipsis" href="#">...</a></li>
<?PHP } ?>
<?PHP } ?>
<li class="next arrow"><a class="next arrow" href="#"></a></li>
</ul>
<?PHP
global $wp_query; // you can remove this line if everything works for you
// don't display the button if there are not enough posts
if ( $wp_query->max_num_pages > 1 )
echo '<div class="misha_loadmore">More posts</div>'; // you can use <a> as well
?>
<?PHP } ?>
<?PHP else : ?>
<article class='nopost'>
<h5><?PHP esc_html_e( 'Sorry,No Posts Found','extra' ); ?></h5>
</article>
<?PHP endif; ?>
</div><!-- /.posts-blog-Feed-module -->
和它的循环 module-posts-blog-Feed-loop.PHP
<?PHP $page = !empty( $page ) ? $page : 1; ?>
<div class="paginated_page paginated_page_<?PHP esc_attr_e( $page ); ?> active" <?PHP echo 'masonry' == $blog_Feed_module_type ? ' data-columns' : ''; ?> data-columns>
<?PHP
while ( $module_posts->have_posts() ) : $module_posts->the_post();
$post_format = et_get_post_format();
?>
<article onclick="location.href='<?PHP the_permalink() ?>';" id="post-<?PHP the_ID(); ?>" <?PHP post_class( 'post et-format-'.$post_format ); ?>>
<div class="header">
<?PHP
if ( $show_featured_image || et_has_post_format( 'quote' ) || et_has_post_format( 'link' ) ) {
$overlay = '' !== $hover_overlay_icon ? '<span class="et_pb_extra_overlay et_pb_inline_icon" data-icon="'. esc_attr( et_pb_process_font_icon( $hover_overlay_icon ) ) .'"></span>' : '<span class="et_pb_extra_overlay"></span>';
$thumb_args = array(
'size' => 'extra-image-medium','img_after' => $overlay,);
$score_bar = extra_get_the_post_score_bar();
require locate_template( 'post-top-content.PHP' );
}
?>
</div>
<?PHP
if ( !in_array( $post_format,array( 'quote','link' ) ) ) {
?>
<div class="post-content">
<?PHP
$color = extra_get_post_category_color();
$et_permalink = get_the_permalink();
?>
<h2 class="post-title entry-title"><a class="et-accent-color" style="color:<?PHP echo esc_attr( $color ); ?>;" href="<?PHP echo esc_url( $et_permalink ); ?>"><?PHP the_title(); ?></a></h2>
<div class="post-Meta vcard">
<?PHP
$Meta_args = array(
'author_link' => $show_author,'post_date' => $show_date,'date_format' => $date_format,'categories' => $show_categories,'comment_count' => $show_comments,'rating_stars' => $show_rating,);
?>
<p><?PHP echo et_extra_display_post_Meta( $Meta_args ); ?></p>
</div>
<div class="excerpt entry-summary">
<?PHP
if ( 'excerpt' == $content_length ) {
if ( has_excerpt() ) {
the_excerpt();
} else {
if ( in_array( $post_format,array( 'audio','map' ) ) ) {
$excerpt_length = '100';
} else {
$excerpt_length = get_post_thumbnail_id() ? '200' : '230';
}
echo wpautop( et_truncate_post( $excerpt_length,false ) );
}
if ( $show_more ) {
$read_more_class = 'read-more-button';
$data_icon = '';
if ( isset( $custom_read_more ) && 'on' === $custom_read_more && isset( $read_more_icon ) && '' !== $read_more_icon ) {
$read_more_class .= ' et_pb_inline_icon';
$data_icon = et_pb_process_font_icon( $read_more_icon );
}
?>
<a class="<?PHP echo esc_attr( $read_more_class ); ?>" data-icon="<?PHP echo esc_attr( $data_icon ); ?>" href="<?PHP echo esc_url( $et_permalink ); ?>"><?PHP esc_html_e( 'Read More','extra' ); ?></a>
<?PHP }
} else {
echo extra_get_de_buildered_content();
}
?>
</div>
</div>
<?PHP } ?>
</article>
<?PHP
endwhile;
wp_reset_postdata();
?>
</div><!-- /.paginated_page.paginated_page_<?PHP echo $page; ?> -->
有人看到我必须输入的正确模板和命令吗？ 或者有人知道它应该是什么或在哪里可以找到它？
非常感谢。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
