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

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.

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

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

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...
101 Điều thay đổi về Google AMP HTML năm 2016
Google chính thức mở rộng AMP HTML cho toàn thế giới: Columnist Barb Palser tin rằng nội dung AMP trên tìm kiếm di động sẽ mở rộng phần của nội dung AMP mà đã bị ẩn đi, không nhìn thấy...
5 Điều bạn chưa biết về Facebook Instant Articles
Tốc độ load chóng mặt, bạn đã từng click vào link nào được chia sẻ trên Facebook với thiết bị di động và hình ảnh có hình tia sét (tia chớp) Thunder, nhỏ nhỏ ở góc phải phía trên của...
6 Điều cần biết về AMP HTML của GOOGLE
Công nghệ ngày càng phát triển, người dùng thiết bị di động cho công việc hàng ngày càng trở nên phổ biến. Việc tham khảo thông tin của các trang web trên thiết bị di động thường bị hạn chế...
Cài đặt Facebook Instant Articles cho WordPress 2016
Facebook Instant Articles đã được Facebook cho phép người dùng sử dụng từ lâu, tuy nhiên các tài khoản thử nghiệm ban đầu chỉ cho các page dạng Business thực hiện, thời gian hiện tại Facebook Instant Articles đã cho...
8 Điều bạn nên nghỉ việc để làm chủ bản thân
Nếu bạn làm một công việc dễ dàng thì sự đơn điệu trong cuộc sống, đơn điệu trong công việc sẽ khiến bạn dần trở nên chán nản. Nếu bạn đang bế tắc trong cuộc sống mưu sinh với hàng...
Google thay thế Quảng cáo bằng Google Carousel cho tìm kiếm Ô tô
Mới gần đây thôi trong cuối tháng 3 đầu tháng 4 này Google đã thay thế quảng cáo kiếm tiền của họ cho việc hiển thị các sản phẩm về ô tô trong một bảng riêng Slider dạng cuộn Carousel....
3 Khác biệt lớn giữ HTML và AMP HTML
Cuối năm 2015 Google đã công bố dự án hỗ trợ tăng tốc load trang web trên thiết bị di động AMP - Accelerated Mobile Pages. AMP mang đến cho người dùng nhiều trải nghiệm thú vị về tốc độ...
Điều cần biết về Facebook Instant Article và Google AMP HTML
Bạn đang cố gắng nỗ lực cải thiện tốc độ load trang Web của mình trên các thiết bị di động đặc biệt là trên SmartPhone, nhưng mọi nỗ lực đã làm vẫn chưa mang lại hiệu quả. Theo thống...
Facebook Instant Article WordPress plugin
Mặc dù Facebook đã cho ra đời facebook instant article khá lâu và được sự cổ vũ nhiệt tình từ hàng trăm các tờ báo lớn trên thế giới, ngay cả ở Việt Nam cũng nhiều báo tin tức hàng...