Wordpress Ajax Load More Posts

Question

I'm using wordpress and I want to load more post dinamically without using the default pagination. I'm using the following JS.

jQuery(document).ready(function($) {

    // The number of the next page to load (/page/x/).
    var pageNum = parseInt(pbd_alp.startPage) + 1;

    // The maximum number of pages the current query can return.
    var max = parseInt(pbd_alp.maxPages);

    // The link of the next page of posts.
    var nextLink = pbd_alp.nextLink;

    var loadMore = pbd_alp.loadMore;

    var loadingPosts = pbd_alp.loadingPosts;

    var noMorePosts = pbd_alp.noMorePosts;

    /**
     * Replace the traditional navigation with our own,
     * but only if there is at least one page of new posts to load.
     */
    if(pageNum <= max) {
        // Insert the "More Posts" link.
        $('#ec-main')
            .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
            .append('<p id="pbd-alp-load-posts"><a href="#">'+ loadMore +'</a></p>');

        // Remove the traditional navigation.
        $('nav[role=pagination]').remove();
    }


    /**
     * Load new posts when the link is clicked.
     */
    $('#pbd-alp-load-posts a').click(function() {

        // Are there more posts to load?
        if(pageNum <= max) {

            // Show that we're working.
            $(this).text(loadingPosts);

            $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
                function() {
                    // Update page number and nextLink.
                    pageNum++;
                    nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                    // Add a new placeholder, for when user clicks again.
                    $('#pbd-alp-load-posts')
                        .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

                    // Update the button message.
                    if(pageNum <= max) {
                        $('#pbd-alp-load-posts a').text(loadMore);
                    } else {
                        $('#pbd-alp-load-posts a').text(noMorePosts);
                    }
                }
            );
        } else {
            $('#pbd-alp-load-posts a').append('.');
        }   

        return false;
    });
});

and this PHP code

function pbd_alp_init() {
    global $wp_query;

    // Add code to index pages.
    if( !is_singular() ) {  
        // Queue JS and CSS
        wp_enqueue_script(
            'pbd-alp-load-posts',
            get_template_directory_uri() . '/js/ajax-posts.js',
            array('jquery'),
            '1.0',
            true
        );

        wp_enqueue_style(
            'pbd-alp-style',
            get_template_directory_uri() . '/css/ajax-posts.css',
            false,
            '1.0',
            'all'
        );

        // What page are we on? And what is the pages limit?
        $max = $wp_query->max_num_pages;
        $paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;

        // Add some parameters for the JS.
        wp_localize_script(
            'pbd-alp-load-posts',
            'pbd_alp',
            array(
                'startPage'    => $paged,
                'maxPages'     => $max,
                'nextLink'     => next_posts($max, false),
                'loadMore'     => __('Load More', 'met'),
                'loadingPosts' => __('Loading...', 'met'),
                'noMorePosts'  => __('No More Posts to Load', 'met'),
            )
        );
    }
 }
 add_action('template_redirect', 'pbd_alp_init');

This code works fine, but if I try to load more posts and I have eg. 1 gallery post, the function used by this type of post breaks. Probably because the main script is not loaded again.

Do you have any solution to avoid this problem?

Thanks.

Answer 1

您是否尝试过Plugin Jetpack，它具有Infinite Scroll支持，效果非常好！