Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

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

5/5 - (3 bình chọn)

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

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

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Keywords Everywhere để làm gì? Keywords Everywhere là một tiện ích mở rộng được cài thêm vào trình duyệt có...
    28 giây trước
  2. Xin chào các bạn hôm nay chúng ta lại gặp nhau trong loạt bài hướng dẫn lập trình PHP của...
    12 giây trước
  3. Thietbigiaoducviet.com.vn là website chuyên cung cấp các sản phẩm thiết bị, nội thất cho văn phòng, thư viện, trường học,...
    28 giây trước
  4. Hầu hết các công cụ soạn thảo văn bản cho phép chúng ta lưu trữ và sử dụng lại các...
    10 giây trước
  5. Trong thời buổi bùng nổ thông tin hiện nay. Bên cạnh các kênh bán hàng truyền thống thì kênh bán...
    17 giây trước
  6. Nội dung SEO là gì? Nội dung SEO là nội dung trực tuyến được thiết kế để xếp hạng trong...
    10 giây trước
  7. Tính đến nay, Việt Nam bao gồm 63 tỉnh thành. Trong đó, có 5 thành phố trực thuộc Trung ương...
    6 giây trước
  8. Một bài viết dù nội dung hay, sâu sắc nhưng cách đặt tiêu đề không thu hút cũng khó thu...
    2 giây trước
  9. Bạn làm trong lĩnh vực kinh doanh, marketing, hay cụ thể hơn là SEO. Chắc hẳn các bạn không còn...
    30 giây trước
  10. Một trong những cách dễ nhất để tăng doanh số bán trang web của bạn là tăng lưu lượng truy...
    2 giây trước