Hướng dẫn load more content cho mọi trang chủ wordpress

[Admin]

Load more content đang được sử dụng rất nhiều cho các website như facebook, zingme, tamtay....
hôm nay mình hướng dẫn các bạn làm, không chỉ riêng cho wordpress mà còn cho all code

Demo

http://go8.vn

<!--vòng lặp -->
<div id="container">
<div class="box">
<p>Nội dung vòng lặp tùy loại code mà nó khác nhau</p>
</div>
...
</div>
<!-- /hết vòng lặp -->
<!-- contains the content to be loaded when scrolled -->
<nav id="page-nav">
<a href="pages/2.html"></a>
</nav>


<script src="http://www.jquery4u.com/demos/infinite-scrolling-demo1/js/jquery.masonry.min.js"></script> <script src="http://www.jquery4u.com/demos/infinite-scrolling-demo1/js/jquery.infinitescroll.min.js"></script> <script> $(function(){ var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.box', columnWidth: 100 }); }); $container.infinitescroll({ navSelector : '#page-nav', // selector for the paged navigation nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) itemSelector : '.box', // selector for all items you'll retrieve loading: { finishedMsg: 'No more pages to load.', img: 'http://www.jquery4u.com/demos/infinite-scrolling-demo2/ajax-loader.gif' } }, // trigger Masonry as a callback function( newElements ) { // hide new items while they are loading var $newElems = $( newElements ).css({ opacity: 0 }); // ensure that images load before adding to masonry layout $newElems.imagesLoaded(function(){ // show elems now they're ready $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); }); } ); }); </script>

- Chỗ chữ màu đỏ là phải bắt buộc sử dụng theo id và class đó nếu không sửa trong file js ở bên dưới.

<!-- contains the content to be loaded when scrolled -->
<nav id="page-nav">
<a href="pages/2.html"></a>
</nav>

Chính là link trang tiếp theo cũng tùy code mà mình code khác nhau
Xong