Question

我盯着自己无法开始工作的代码。

环境是WordPress，我正试图获得更多＆＃34;加载更多＆＃34;按钮可在列表中加载更多帖子而无需重新加载页面。这是使用AJAX实现的。

我有四个帖子，每页显示三个帖子。当＆＃34;加载更多＆＃34;单击按钮，帖子列表不会添加下面的第四个和最后一个帖子。

以下页面模板显示了帖子列表：

<div class="woocommerce columns-3">
    <ul class="products columns-3">

        <?php 

        $query_params = array(
                'posts_per_page' => 3,
                'post_type'    => 'post'
        );

        $wp_query = new WP_Query($query_params); 



        while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

            <li class="product post-item">
                <span class="post-image">
                    <a href="<?php the_permalink(); ?>">
                        <?php 
                            if ( has_post_thumbnail()) 
                            {
                                the_post_thumbnail();
                            }
                        ?>
                    </a>
                </span>
                <h2 class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <span class="post-category"><?php the_category(', ');?></span>
            </li>

        <?php endwhile; ?>

        <?php wp_reset_postdata(); ?>

    </ul>

</div>

<nav>
    <?php
        if (  $wp_query->max_num_pages > 1 )
        {
            echo '<div class="post_loadmore">More posts</div>'; 
        }
    ?>
</nav>

我的functions.php包含以下代码：

<?php

    function my_load_more_scripts() 
    {

        global $wp_query; 

        wp_enqueue_script('jquery');
        wp_register_script( 'my_loadmore', get_stylesheet_directory_uri() . '/myloadmore.js', array('jquery') );
        wp_localize_script( 'my_loadmore', 'post_loadmore_params', array(
            'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', 
            'posts' => json_encode( $wp_query->query_vars ), 
            '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', 'my_load_more_scripts' );

    function post_loadmore_ajax_handler()
    {
        $args = json_decode( stripslashes( $_POST['query'] ), true );
        $args['paged'] = $_POST['page'] + 1; 
        $args['post_status'] = 'publish';

        query_posts( $args );

        if( have_posts() ) :

            while( have_posts() ): the_post();

                get_template_part( 'template-parts/post/content', get_post_format() );

            endwhile;

        endif;
        die;
    }

    add_action('wp_ajax_loadmore', 'post_loadmore_ajax_handler');
    add_action('wp_ajax_nopriv_loadmore', 'post_loadmore_ajax_handler');

?>

最终代码是AJAX，它控制负载的更多功能：

 jQuery(function($){
    $('.post_loadmore').click(function(){

        var button = $(this),
            data = {
            'action': 'loadmore',
            'query': post_loadmore_params.posts, 
            'page' : post_loadmore_params.current_page
        };

        $.ajax({
            url : post_loadmore_params.ajaxurl, 
            data : data,
            type : 'POST',
            beforeSend : function ( xhr ) {
                button.text('Loading...'); 
            },
            success : function( data ){
                if( data ) { 
                    button.text( 'More posts' ).prev().before(data); 
                    post_loadmore_params.current_page++;

                    if ( post_loadmore_params.current_page == post_loadmore_params.max_page ) 
                        button.remove(); 

                } else {
                    button.remove();
                }
            }
        });
    });
});

页面链接位于此处 - https://www.uvjagtpro.dk/arkiv/

可能是什么问题？

使用AJAX加载更多帖子无法正常工作

0 个答案: