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)

Kết hợp jQuery Masonry và Infinite Scroll để lấy Newsfeed như Tumblr dạng block

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

Như chúng ta đã biết, để lấy Newsfeed dạng cuộn đến cuối trang và load thêm trang tin giống như Facebook (live feed), Twitter, Pinterest, Feedly… đã được hướng dẫn của bài trước dùng cho WordPress: Cách thêm Infinite Scrolling WordPress lấy tin như Facebook Feed

Nhưng để đặt các bản tin này theo dạng các khối xắp xếp cho chuẩn theo vị trí gọn gàng và chuyên nghiệp như Tumblr hoặc các bạn có thể xem demo như: https://lamvt.vn thì ta làm như thế nào.

Nhiều người hiểu về jQuery Masonry và cách sử dụng của nó là để dùng cho việc xắp xếp các block theo dạng khối bố trí lưới để cho các vị trí được xắp xếp tự động, còn plugin jQuery Infinite Scroll có thể cuộn tin theo dạng Newsfeed rất đẹp mặt. Vậy làm thế nào để kết hợp được 2 Plugin của jQuery này áp dụng cho WordPress.

Kết hợp jQuery Masonry và Infinite Scroll để lấy Newsfeed như Tumblr dạng block 2016-02-29_071343

Trước tiên để làm được điều này các bạn cần làm theo và năm rõ về jQuery Masonry và plugin của nó với WordPress.

Để làmđiều này chúng ta cần tải file masonry jQuery tại: https://github.com/desandro/masonry/raw/master/dist/masonry.pkgd.min.js và đặt vào trong folder js trong theme của mình.

Mở file Functions.php thêm dong lệnh sau:

    <?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
    );
    wp_register_script(
    ‘masonry’,//name of script
    get_template_directory_uri().’/js/masonry.pkgd.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’);
    wp_enqueue_script(‘masonry’);
    }
    }

    //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”>
    /**
    * Infinite Scroll + Masonry + ImagesLoaded
    */

    jQuery(function ($) {

    // Main content container
    var $container = $(‘#content’);

    // Masonry + ImagesLoaded
    $container.imagesLoaded(function(){
    $container.masonry({
    // selector for entry content
    itemSelector: ‘.article’,
    //columnWidth: 80
    columnWidth: ‘.sizer’,
    percentPosition: true,
    //gutter:0
    });
    });

    // Infinite Scroll
    $container.infinitescroll({

    // selector for the paged navigation (it will be hidden)
    navSelector  : “#nav-below”,
    // selector for the NEXT link (to page 2)
    nextSelector : “#nav-below .nav-previous a”,
    // selector for all items you’ll retrieve
    itemSelector : “.article”,

    // finished message
    loading:{
    img: “<? echo get_template_directory_uri(); ?>/images/ajax-loader.gif”,
    msgText: “Loading next posts….”,
    finishedMsg: “Posts loaded!!”,
    },
    },

    // Trigger Masonry as a callback
    function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout

    $newElems.imagesLoaded(function(){
    // show elems now they’re ready
    $newElems.animate({ opacity: 1 });
    $container.masonry( ‘appended’, $newElems, true );
    });

    });

    });

    </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 giờ ta có thể kiểm tra kết quả của bạn tạo ra rồi

Chúc các bạn thành công
Cảm ơn anh ThanhLuu Leader của designwall -JOOM

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. Trong bài này chúng ta sẽ cùng nhau tìm hiểu về Bootstrap form. Form được sử dụng khá nhiều trong...
    24 giây trước
  2. 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...
    8 giây trước
  3. SEO copywriting là một yếu tố quan trọng và là một thách thức lớn trong mọi chiến lược SEO. Khi các...
    26 giây trước
  4. Cách chuyển CodeIgniter sang WordPress giữ nguyên Link SEO Rất nhiều doanh nghiệp vừa và nhỏ ở VN xưa nay...
    16 giây trước
  5. Cửa là bộ phận không thể thiếu của một ngôi nhà, vậy làm thế nào để chọn được loại cửa...
    19 giây trước
  6. Xây dựng liên kết - Link building là việc có được các liên kết bên ngoài thông qua việc trỏ...
    18 giây trước
  7. Ý định của người dùng là mục tiêu mà ai đó, có thể là khách hàng của bạn quan tâm...
    11 giây trước
  8. Dự án của Google Accelerated Mobile Pages (AMP) tăng tốc độ load trang web cho các thiết bị điện thoại...
    19 giây trước
  9. Tối ưu Website bằng SEO giúp nâng cao thứ hạng từ khóa, phân tích các chỉ số và dữ liệu...
    20 giây trước
  10. Nếu bạn có hàng trăm từ khóa mục tiêu, việc tối ưu hóa mỗi bài viết cho một từ khóa...
    23 giây trước