Infinite Scrolling WordPress

Trước tiên chúng ta nên tìm hiểu Infinite Scroll là gì:

Infinite Scroll được phát triển như một jQuery plugin có khả năng cuộn trang web để lấy thêm tin tức mà không cần click vào nút xem thêm hoặc click vào xem trang khác, Infinite Scroll được phát triển song song cả jQuery and WordPress plugins.

Một cách dễ dàng thì các bạn có thể cài đặt WordPress Plugin này tại đây: http://www.infinite-scroll.com/installation/

nhưng với phiên bản mặc định này, nên khuyến khích người dùng sử dụng với theme mặc định của WordPress hoặc bạn phải biết custom thêm trong theme của bạn để có được hiệu quả tốt nhất.

Tiếp theo cần dùng một phần mềm soạn thảo code nhẹ nhàng tốt mà dễ dùng
Ở đây tôi dùng chọn NotePad ++ đây là một chương trình nhẹ và dễ dùng nhất.
Tiếp tục để download và tải file JS lên thư mục theme của bạn, ở trong bài này tôi khuyên bạn nên tải lên thư mục js để cho dễ nhớ và quản lý:  https://drive.google.com/file/d/0B5CE7VL4wcKaYklvSEhUZlBZQzQ/view?usp=sharing

Tải thêm file ajax loading Gif để thể dùng sau này nhé:

Infinite Scrolling WordPress


OK giờ chúng ta có thể tiến hành công việc được rồi với PHP code sau các bạn thêm vào file: functions.php

<?php
/*************************
WEB REVENUE INFINITE SCROLLING
*************************/
/*
Function that will register and enqueue the infinite scolling's script to be used in the theme.
*/
function twentytwelve_script_infinite_scrolling(){
wp_register_script(
'infinite_scrolling',//name of script
get_template_directory_uri().'/js/jquery.infinitescroll.min.js',//where the file is
array('jquery'),//this script requires a jquery script
null,//don't have a script version number
true//script will de placed on footer
);
if(!is_singular()){ //only when we have more than 1 post
//we'll load this script
wp_enqueue_script('infinite_scrolling');
}}
//Register our custom scripts!
add_action('wp_enqueue_scripts', 'twentytwelve_script_infinite_scrolling');
/*
Function that will set infinite scrolling to be displayed in the page.
*/
function set_infinite_scrolling(){
if(!is_singular()){//again, only when we have more than 1 post
//add js script below
?>
<script type="text/javascript">
/*
This is the inifinite scrolling setting, you can modify this at your will
*/
var inf_scrolling = {
/*
img: is the loading image path, add a nice gif loading icon there
msgText: the loading message
finishedMsg: the finished loading message
*/
loading:{
img: "<? echo get_template_directory_uri(); ?>/images/ajax-loading.gif",
msgText: "Loading next posts….",
finishedMsg: "Posts loaded!!",
},
/*Next item is set nextSelector.
NextSelector is the css class of page navigation.
In our case is #nav-below .nav-previous a
*/
"nextSelector":"#nav-below .nav-previous a",
//navSelector is a css id of page navigation
"navSelector":"#nav-below",
//itemSelector is the div where post is displayed
"itemSelector":"article",
//contentSelector is the div where page content (posts) is displayed
"contentSelector":"#content"
};
/*
Last thing to do is configure contentSelector to infinite scroll,
with a function jquery from infinite-scroll.min.js
*/
jQuery(inf_scrolling.contentSelector).infinitescroll(inf_scrolling);
</script>
<? }}
/*
we need to add this action on page's footer.
100 is a priority number that correpond a later execution.
*/
add_action( 'wp_footer', 'set_infinite_scrolling',100 );
?>

Infinite Scrolling WordPress


Như vậy là được rồi nhé, các bạn có thể kiểm tra lại website của mình xem đã chuẩn chưa, chúc các bạn thành công

Thêm bình luận
0 Trả lời

Trả lời của bạn

Bằng cách gửi bài trả lời của bạn, bạn đồng ý với Chính sách bảo mậtđiều khoản dịch vụ.