如何在wordpress中ajax下一个/上一个帖子?

时间:2012-11-15 23:58:51

标签: ajax wordpress jquery

好的,我一直在做一些研究,我不知道如何解决这个问题,因为大多数ajax和wordpress主题看起来与我的不同。 我差不多有一个网站

http://dev.touch-akl.com/childsplay/

并在博客部分显示了三个最新的博客,其中包含更多内容链接,我想在接下来的3个帖子中加载ajax。

我的jQuery如下

loadPosts();

function loadPosts(){

        var $loadBtn = $('.ajax-load a');
        var $loadCont = $('#ajax-content');
        var pageTitle = document.title;


        $loadBtn.live("click",function(e){
            e.preventDefault();

            var sourceTarget = '#ajax-content .the-posts';
            $this = $(this);
            pageUrl=$this.attr('href');

            $loadCont.fadeTo(500,0);

            $loadCont.load(pageUrl+" "+sourceTarget, function(){

                $loadCont.fadeTo(500,1);

                        if(window.history.replaceState){
                     document.title = pageTitle;
                     window.history.replaceState(null, pageTitle, pageUrl);
                   }                                

                        //loadJQUERY(sourceTarget);
            }); // end ajax load    

        });     // end click function

}   

和html

        <div id="ajax-content">
            <div class="the-posts">

                <?php
                // START A QUERY OF THE NEWS ITEM POSTS AND LOOP THAT THANGGGG
                if ( get_query_var('paged') ) $paged = get_query_var('paged');  
                if ( get_query_var('page') ) $paged = get_query_var('page');

                query_posts('posts_per_page=3&paged=' . $paged);

                if (have_posts()) : while (have_posts()) : the_post(); ?>   

                    <article class="three columns">
                        <h3>The Most Recent Post</h3>
                        <img class="blog-image" src="<?php bloginfo('template_url');?>/images/blog/blogs-post.jpg" alt="Childsplay">
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
                        <a href="#">Read More</a>
                    </article>

            <?php endwhile; ?>

                    <div class="navigation">
                        <span class="left ajax-load"><? previous_posts_link('&larr; More Stuff') ?></span>
                        <span class="right ajax-load"><? next_posts_link('More Stuff &rarr;') ?></span>
                    </div>      

            <?php else : endif; ?> 
            <?php wp_reset_query(); // reset the query ?>   

        </div>
    </div>

即使将固定链接设置为wordpress next posts按钮的默认值,它似乎找不到页面。

我的ajax方式对wordpress不是很好吗?我看到人们使用其他方式,但我不太了解它们。

1 个答案:

答案 0 :(得分:0)

如果你想考虑使用插件,那么就是一吨。到目前为止,我发现了什么。也许这会对你有所帮助 这是一个循序渐进的过程http://www.mygeekpal.com/creating-an-ajax-powered-pagination-in-wordpress/

这个也很好但概念不同http://wordpress.org/extend/plugins/ajax-pagination/screenshots/