Một số trang web lớn thường lấy tin tức dạng cuối đến cuối trang là show thêm bài viết mới cho người dùng nhiều trải nghiệm thú vị: Facebook (live feed), Twitter, Pinterest, Feedly…
Vậy làm thế nào để thực hiện việc này cho Website của bạn sử dụng WordPress sau đây chúng tôi sẽ giới thiệu với các bạn phương pháp tự tạo cho website của mình có khả năng cuộn tin lấy Newsfeed như facebook sử dụng jQuery Ajax để load tin tức mới.
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.
Xem thêm: Yoast SEO và Goolge AMP cài đặt sao cho chuẩn
Hạn chế của phiên bản mặc định này chính là khả năng cuộn trang như chỉ xếp thành 1 cột như trên các trang Facebook feed.
Trong bài viết này chúng tôi hướng dẫn các bạn một chút kỹ thuật để bạn có thể sử dụng jQuery plugin này và thêm vào theme của bạn để có thể phân chia các tim tức của bạn theo cột và load nó một các mượt mà hơn.
Để các bạn hiểu rõ hơn về vấn đề này các bạn có thể xem DEMO trực tiếp là trang chủ của http://Lamvt.vn, các bạn kéo chuột xuống phần cuối trang sẽ thấy hiệu ứng loading và show thêm bài viết.
Để làm được việc này ta cần chuẩn bị phần mềm truyền tải dữ liệu FileZilla Client là chương trình hỗ trợ truyền tải tập tin thông qua mạnginternet sử dụng giao thức FTP (File Transfer Protocol).
Sau khí có được phần mềm này các bạn có thể login vào hosting của bạn để làm việc nếu bạn dùng trên live site hoặc nếu trường hợp dùng test trên localhost thì bỏ qua bước này.
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 các bạn có thể tham khảo bài sau: Top 22 chương trình soạn thảo Code hay nhất mọi thời đại đến 2015 2016
Ở đâ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://lamvt.vn/wp-content/themes/lamvt/js/jquery.infinitescroll.min.js
Tải thêm file ajax loading Gif để thể dùng sau này nhé: https://lamvt.vn/wp-content/themes/lamvt/images/ajax-loader.gif
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 );
?>
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