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

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

29 Tháng Hai, 2016222 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
Kết hợp jQuery Masonry và Infinite Scroll để lấy Newsfeed như Tumblr dạng block
Đánh giá bài viết

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ư: http://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

About Vũ Thành Lâm

Kết hợp jQuery Masonry và Infinite Scroll để lấy Newsfeed như Tumblr dạng block 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...
Bootstrap Pagination Phân trang trong bootstrap
Trong bài trước, chúng ta đã tìm hiểu về bootstrap tabs và pills, giúp thu gọn một lượng lớn nội dung mà vẫn giữ được bố cục trang. Xem thêm: Bootstrap Tabs và Pills Trong bài này, chúng ta cùng tìm...
Nghệ thuật SEO: Thu hút độc giả Không còn là điều khó khăn
Lamvt Group được sáng lập bởi Vũ Thành Lâm cùng các bạn hữu và các học trò nhằm mục đích chia sẻ kinh kiệm và kiến thức thực tế trong lĩnh vực Thiết kế Website, SEO (Search Engine Optimization), Tư...
Kiếm 100000 đô la với Google AdSense! Thật đơn giản
Có thể kiếm được 100.000 đô la một năm từ Google AdSense (hoặc bằng cách bán quảng cáo trên trang web hoặc blog của bạn)? Nếu vậy thì câu hỏi đặt ra là có bao nhiêu lưu lượng truy cập mà bạn thực...
3 mẹo đơn giản trở thành vua tiếp thị nội dung trong SEO
Việc tạo ra nội dung hoàn hảo bắt đầu với một kế hoạch - tầm nhìn rõ ràng về mức độ, thông điệp bạn muốn truyền tải cho người đọc. Kế hoạch nội dung là một phần của tiếp thị...