Question

我正在使用wordpress，我希望在不使用默认分页的情况下加载更多的文章。我使用以下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;
    });
});

和这个PHP代码

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');

此代码工作正常，但如果我尝试加载更多帖子，我有例如。 1个画廊帖子，这种类型的帖子休息所使用的功能。可能是因为主脚本没有再次加载。

你有什么解决方案可以避免这个问题吗？

感谢。

Answer 1

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

Wordpress Ajax加载更多帖子

1 个答案: