首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Wordpress Ajax加载更多帖子

问Wordpress Ajax加载更多帖子
EN

Stack Overflow用户
提问于 2016-06-30 22:45:39
回答 0查看 287关注 0票数 0

我正在使用wordpress,我想在不使用默认分页的情况下动态加载更多的帖子。我正在使用下面的JS。

代码语言:javascript
复制
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代码

代码语言:javascript
复制
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图库帖子,此类型的帖子中断所使用的函数。可能是因为没有再次加载主脚本。

你有什么解决方案来避免这个问题吗?

谢谢。

EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38126533

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档