Danh mục: Hướng dẫn học Javascript, Hướng dẫn học WordPress

Cách thêm Infinite Scrolling WordPress lấy tin như Facebook Feed

28 Tháng Hai, 2016368 Lượt xem
Xem với phiên bản Google AMP, Vinhomes Thăng Long, Mua bán Piano, cửa nhôm xingfa
Cách thêm Infinite Scrolling WordPress lấy tin như Facebook Feed
Đánh giá bài viết

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).

Cách thêm Infinite Scrolling WordPress lấy tin như Facebook Feed 2016-02-29_060408

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ý: http://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é: http://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 );
    ?>

Cách thêm Infinite Scrolling WordPress lấy tin như Facebook Feed 2016-02-29_062100

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

About Vũ Thành Lâm

Cách thêm Infinite Scrolling WordPress lấy tin như Facebook Feed 6c99874f75cccd390c6e4303a3653bda?s=100&r=gLamvt - Tên thật là Vũ Thành Lâm năm sinh 197x tại xã Đại Đồng - huyện Thạch Thất - Hà Tây quê lụa
Yêu Joomla, thích WordPress và đam mê SEO
Từng là GMOD của cộng đồng Joomla Việt, Admin của Thế giới SEO, thành viên tích cực trong Group WordPress Hà Nội
Liên hệ ĐT: 0169981 Năm Hai Ba Hai

Bài viết mới nhất

Tin được quan tâm

Bài viết cùng chủ đề

Ibmeduca.org: Viện Kinh Thánh truyền giáo
Ibmeduca.org là website của Viện Kinh Thánh truyền giáo  Trang web được thiết kế trên nền tảng mã nguồn SEO tốt nhất đó là hệ quản trị nội dung sử dụng Responsive Bootstrap version mới nhất, tăng tốc độ load một...
3 Cách tăng lượng truy cập Website giúp SEO lên Top Google
Bất cứ ai làm kinh doanh trên cũng muốn website của mình có được lưu lượng truy cập cao giúp tăng doanh thu đồng thời cũng giúp cho việc SEO lên Top Google. Điều đó có nghĩa là bạn muốn mỗi...
36 cách tối ưu hóa chiến dịch Google AdWords
Để trang web của bạn có được vị trí tốt trên bảng xếp hạng, bạn nên tối ưu hoá các chiến dịch Google AdWords vì vậy ở bài viết này tôi sẽ đưa ra danh sách các tối ưu hóa...
5 mẹo kiếm tiền bằng cách viết Blog hiệu quả nhất
Nếu bạn là một người viết văn hay, bạn có nghĩ sẽ trở thành một Blogger không? Viết Blog là một trong những cách kiếm tiền online tốt nhất hiện nay. Chọn một chủ đề rồi viết những bài chia...
Sự thật về Công cụ nghiên cứu từ khóa Google AdWords trong SEO
Mặc dù công cụ Google AdWords có ý nghĩa cho PPC (Chi phí chi trả cho mỗi lần nhấp chuột), nhưng nó cũng là một công cụ quan trọng khi thực hiện nghiên cứu từ khóa cho SEO. Google Adwords xác định số lần tìm...