Câu trả lời là với Ajax thì bạn có thể làm được thiết kế này và không hề lo lắng bất kỳ điều gì. Vì Ajax có sức mạnh giúp bạn tải từng phần của Website mà không cần phải tải lại toàn bộ. Chính điều này cho phép Website hiển thị nhiều đến mức bạn có thể nghĩ và cũng không làm cho Website bị hạn chế về tốc độ.

Chính vì vậy một thiết kế Loadmore với Ajax sẽ cho bạn có một Website hoàn toàn mới mẻ & thực sự mang lại một cách thu hút mới hơn.

Vậy chúng ta sẽ bắt đầu làm việc này.

Bước 1 : Thiết kế một trang hiển thị bài viết.

Bạn cần tạo một trang bài viết để hiển thị các bài viết lên trang này.

Thật đơn giản, bạn hãy create một Page có tên là “info”.

Sau đó, chúng ta sẽ viết Code cho Page này theo quy định page template do WordPress quy định. Trong Theme bạn đang kích hoạt, sẽ tạo một custom template có tên page-info.php.

Ở đây, chúng ta đặt tên cho custom temaplte file theo hệ thống phân cấp mẫu của WordPress page – {slug} .php, dựa vào slug của page được tạo ra để đặt tên cho custom template file.

Thiết kế đặt ra là Page Info sẽ hiển thị 10 bài viết đầu tiên. Sau đó khi người dùng thực hiện tải thêm thì sẽ tải thêm tiếp 10 bài viết tiếp theo. Các xử lý đều tuần tự như vậy. Do đó xử lý trong custom template file sẽ như dưới đây. Bạn chú ý đây là xử lý của một file trong WordPress theme và nó chưa có Ajax.

Page – info.php có mã code :

<div class=”entry-content”>

    <?php

    $args = array(

        ‘post_type’ => ‘post’,

        ‘post_status’ => ‘publish’,

        ‘posts_per_page’ => ’10’,

        ‘paged’ => 1,

    );

    $myposts = new WP_Query( $args );

    ?>

    <?php if ( $myposts->have_posts() ) : ?>

        <div class=”myposts”>

            <?php while ( $myposts->have_posts() ) : $myposts->the_post(); ?>

                <h2><?php the_title(); ?></h2>

                <?php the_excerpt(); ?>

            <?php endwhile; ?>

            <?php wp_reset_postdata(); ?>

        </div>

        <div class=”loadmore”> Load More… </div>

    <?php endif; ?>

</div><!– .entry-content –>

Bước 2 : Thực hiện đăng kí file jQuery chứa xử lý jQuery AJAX.

Chúng ta sẽ đăng kí tại file function.php của chủ đề / theme mà bạn đang kích hoạt. Việc này sẽ cho phép bạn tích hợp xử lý Ajax và WordPress.

function info_scripts() {

    // Register the script

    wp_register_script( ‘info-script’, get_stylesheet_directory_uri(). ‘/js/info.js’, array(‘jquery’), false, true );

    // Localize the script with new data

    $script_data_array = array(

        ‘ajaxurl’ => admin_url( ‘admin-ajax.php’ ),

        ‘security’ => wp_create_nonce( ‘load_more_posts’ ),

    );

    wp_localize_script( ‘info-script’, ‘blog’, $script_data_array );

    // Enqueued script with localized data.

    wp_enqueue_script( ‘info-script’ );

}

add_action( ‘wp_enqueue_scripts’, ‘info_scripts’ );

Công việc này có quan trọng hay không? Câu trả lời là rất quan trọng đối với bạn. Nó cho phép bạn đăng kí một file jQuery và yên tâm Website sẽ được bảo vệ tốt hơn. Và dựa vào đăng kí này chúng ta cũng có thể truyền những thông tin quan trọng cần thiết từ WordPress tới file jQuery.

Ở đây, chúng ta đã thực hiện truyền 2 biến chứa thông tin là :

Ajaxurl : Chúng ta sẽ thực hiện gọi đường dẫn url trong WordPress, cụ thể là gọi tới file admin – ajax .php, để thực hiện các yêu cầu xử lý

Security : Chúng ta sẽ truyền một biến None để tránh các cuộc tấn công

Bước 3 : Thực hiện xử lý jQuery AJAX tại file info.js

var page = 2;

jQuery(function($) {

    $(‘body’).on(‘click’, ‘.loadmore’, function() {

        var data = {

            ‘action’: ‘info_by_ajax’,

            ‘page’: page,

            ‘security’: blog.security

        };

        $.post(blog.ajaxurl, data, function(response) {

            if($.trim(response) != ”) {

                $(‘.myposts’).append(response);

                page++;

            } else {

                $(‘.loadmore’).hide();

            }

        });

    });

});

Mục đích xử lý trong jQuery Ajax là sẽ tải thêm những bài viết mới tiếp sau 10 bài viết ban đầu tại Page Info. Nên jQuery Ajax sẽ yêu cầu WordPress tải thêm khi Loadmore được Click.

Nếu yêu cầu thực hiện thanh công thì sẽ hiển thị 10 bài viết tiếp theo nối vào nội dung của phần tử có Class ‘.myposts’

Nếu không tải thêm được nữa thì sẽ ẩn phần tử Loadmore

Bạn thấy rõ rằng :

+ Action : info_by_ajax

+ Page : Số Page được thực hiện phân trang, số Page này sẽ làm việc tại code trong phần Action của sẽ làm phần sau. Và Click vào Loadmore + mỗi lần tải thành công thì sẽ tăng biến đếm phân trang này lên.

+ blog.ajaxurl & blog.security là tham số được truyền tại bước 2