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 (将#修改为@）

extra wordpress

Ajax 加载更多帖子

问题描述

解决方法

相关问答