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, 2016
Xem với phiên bản Google AMP

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

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 );
    ?>

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

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

lamvt

Lamvt - 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ệ: D4J hoặc ĐT: 0169981 Năm Hai Ba Hai

Post by:admin

Bài viết liên quan

Học SEO miễn phí với Lamvt là thế đấy
Bạn đã biết gì về SEO, nghề SEO như thế nào? Đơn giản lên google tìm kiếm sau đó sẽ đến trung tâm để học. Và đọng lại trong tâm trí, SEO là phải đi thật nhiều link, có thật...
Top 7 Marketing Online sẽ Thống trị 2017
Năm 2016 là một năm tuyệt vời đối với ngành marketing online và sự phát triển của nó sẽ vẫn tiếp tục diễn ra rất nhanh chóng. Dù chưa phải những ngày cuối năm, cận kề kề thời khắc giao...
SEO on page là gì, SEO off page là gì?
Ở bài viết trước chúng ta đã hiểu về SEO , hiểu khái niệm “như thế nào là SEO “ người làm SEO cần làm gì để đạt được mục tiêu của mình. Ở bài viết này tôi sẽ giới...
SEO ONPAGE VÀ SEO OFF PAGE LÀ GÌ
Seo onpage Mọi người luôn hỏi tôi rằng điều gì quan trọng nhất trong seo, tôi sẽ trả lời đó là: seo onpage. Để hiểu thế nào là seo onpage xin mời các bạn đọc bài viết này. Ở đây,...
20 Điều cần biết để có một Bài Viết chất lượng cho SEO
Nói đến báo chí, chúng được phân chia thành nhiều loại hình khác nhau từ tin tức, chính luận, phỏng vấn, phóng sự cho đến các bài báo giới thiệu về tính năng, sản phẩm, hướng dẫn, giảng dạy...Trong khi...
8 Điều khiến bạn Thất Bại khi SEO trang WEB
Có lẽ bạn đã nghe đến sự diệu kỳ của blog kinh doanh và quyết định sử dụng blog để phát triển công việc kinh doanh của mình. Bạn viết nhiều bài và đăng chúng lên blog đã được vài...
Chứng chỉ Google SEO – Đừng đem ra Hù dọa để chăn Gà
Google sẽ không cung cấp chứng chỉ SEO cho các nhà quản trị web (webmasters) hoặc các công ty SEO Dường như Google sẽ không bao giờ có ý định cung cấp chứng chỉ SEO và lý do tại sao...
4 Bước cài đặt Google Webmaster Tools thật đơn giản
Tổng quan về Google Webmaster Tool Nếu bạn đã theo dõi bài viết về Google Analytics của mình cùng với bạn tự tìm hiểu thì bạn hoàn toàn có thể tự tin trong việc đọc các báo cáo phân tích...
Công cụ phân tích chiến lược từ khóa Google KeyWord Planner
Google KeyWord Planner là công cụ dành cho các nhà quảng cáo Google Adword. Theo lý thuyết, bạn phải trở thành nhà quảng cáo (với tối thiểu 1 chiến dịch) mới có thể sử dụng. Nhưng tất nhiên vẫn có...
3 Bước cụ thể Cài đặt và sử dụng cơ bản Google Webmaster Tool
Đối với người làm SEO chắc hẳn ai cũng biết đến những công cụ hữu ích trên web như Google Analytics, Google Webmaster Tool được Google cung cấp miễn phí. Giống như Google Analytics, Google Webmaster Tool  cũng là công...