Wordpress插件“无限滚动”（jQuery）破解帮助

Question

I am trying to make my wordpress blog (removed) work with the plugin "Infinite Scroll" in a way that you have to click "more posts" to load more, instead of by scrolling close to the bottom of the page (which is the plugin default).

There are instructions and a demo on how to do it here: http://www.infinite-scroll.com/

Scroll down to "Custom trigger, non-automatic. Twitter-style".

I just don't understand how to get it to work with my theme (twenty ten). I probably don't have the right selectors going on.

Could anyone give me a quick synopsis of what I need to do to pull this off?

Answer 1

Since you are using Wordpress, you should install the Jetpack plugin and activate the Infinite-scroll option. There are configuration examples for the Twenty Ten, Eleven and Twelve themes. I think you will find it easier than trying to integrate infinite-scroll yourself.

Answer 2

First, you have to find where the <div class="entry-content"> is. this is in your wp-content/themes/[themename] folder, in a file called index.php or loop.php. after the closing </div> of the entry-content, add:

<div class="moreposts" style="display:none"
 onclick="$('div.moreposts').slideUp();$(document).trigger('retrieve.infscr');">
     Show more
</div>

<script>
$(document).ajaxError(function(e,xhr,opt){
    if (xhr.status == 404) $('div.moreposts').slideUp("normal", function() { $(this).remove(); } );
});
</script>

Now, in the infinite scroll config (Wordpress Admin -> Settings -> Infinite scroll), add this to the "Javascript to be called after the next posts are fetched" box:

$(window).unbind('.infscr');
setTimeout("$('div.moreposts').slideDown();", 1000);

Finally style the button to make it look pretty (add to style.css):

.moreposts { 
    display:block; 
    border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; 
    border: 1px solid #ddd; 
    background: #efefef; 
    text-align: center; 
    font-weight: bold; 
    box-shadow: 2px 2px 2px rgba(50,50,50,0.4); color: #444; 
    text-decoration: none; 
    padding: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}
.moreposts:hover { 
    background: #dfdfdf; 
    color: #222;
}

Note that this will do the first post load automatic, and the subsequent ones manual. This is necessary for the script to hide the Before/Next buttons automatically.