Thêm nút load more posts trong WordPress

1 tuần ago, WordPress Themes, 2 Views

Thêm Nút “Tải Thêm” Bài Viết Trong WordPress: Hướng Dẫn Chi Tiết

Trong thế giới web hiện đại, trải nghiệm người dùng là yếu tố then chốt để giữ chân độc giả trên trang web của bạn. Việc hiển thị tất cả các bài viết trên một trang duy nhất có thể gây ra sự chậm chạp và khó chịu, đặc biệt đối với các trang web có số lượng nội dung lớn. Giải pháp hiệu quả cho vấn đề này là sử dụng nút “Tải Thêm” (Load More). Nút này cho phép người dùng tải thêm bài viết khi họ cuộn xuống cuối trang, mang lại trải nghiệm mượt mà và cải thiện hiệu suất website.

Tại Sao Nên Sử Dụng Nút “Tải Thêm”?

Việc triển khai nút “Tải Thêm” mang lại nhiều lợi ích cho trang web WordPress của bạn:

Cải thiện tốc độ tải trang: Thay vì tải tất cả các bài viết cùng một lúc, chỉ một số bài viết ban đầu được hiển thị, giúp trang web tải nhanh hơn.
Nâng cao trải nghiệm người dùng: Người dùng không cần phải cuộn quá dài để tìm kiếm nội dung mong muốn.
Giảm tải cho máy chủ: Giảm số lượng dữ liệu được tải cùng một lúc, giúp giảm tải cho máy chủ, đặc biệt quan trọng đối với các trang web có lượng truy cập lớn.
Tăng thời gian ở lại trang: Khi trải nghiệm người dùng tốt hơn, người dùng có xu hướng ở lại trang web lâu hơn để khám phá nội dung.

Các Phương Pháp Thêm Nút “Tải Thêm” Vào WordPress

Có nhiều phương pháp khác nhau để thêm nút “Tải Thêm” vào trang web WordPress của bạn. Chúng ta sẽ xem xét một số phương pháp phổ biến nhất:

Sử dụng Plugin WordPress: Đây là cách đơn giản nhất và được khuyến khích cho người mới bắt đầu. Có rất nhiều plugin miễn phí và trả phí hỗ trợ tính năng này.
Thêm Code Thủ Công (Custom Code): Phương pháp này đòi hỏi kiến thức về HTML, CSS và JavaScript/jQuery. Đây là một lựa chọn linh hoạt hơn, cho phép bạn tùy chỉnh giao diện và chức năng theo ý muốn.
Sử dụng Theme Options: Một số theme WordPress đã tích hợp sẵn tính năng “Tải Thêm” trong tùy chọn theme.

Sử Dụng Plugin WordPress Để Thêm Nút “Tải Thêm”

Đây là phương pháp đơn giản nhất và được khuyến khích cho người mới bắt đầu. Có rất nhiều plugin WordPress có sẵn, cả miễn phí và trả phí, cung cấp chức năng “Tải Thêm”. Một số plugin phổ biến bao gồm:

Ajax Load More
Load More Products for WooCommerce
Easy Load More

Hướng Dẫn Sử Dụng Plugin Ajax Load More

Trong ví dụ này, chúng ta sẽ sử dụng plugin “Ajax Load More”.

Cài đặt và kích hoạt plugin: Truy cập Plugins > Add New trong bảng điều khiển WordPress của bạn, tìm kiếm “Ajax Load More”, cài đặt và kích hoạt plugin.
Tạo Shortcode: Sau khi kích hoạt, plugin sẽ thêm một menu mới có tên “Ajax Load More” vào bảng điều khiển của bạn. Truy cập Ajax Load More > Repeater Templates để tạo một repeater template. Đây là template sẽ được sử dụng để hiển thị mỗi bài viết. Bạn có thể sử dụng HTML và các hàm WordPress để hiển thị tiêu đề, nội dung, hình ảnh, v.v.
Tạo Shortcode: Truy cập Ajax Load More > Shortcode Builder để tạo shortcode. Bạn có thể tùy chỉnh số lượng bài viết hiển thị ban đầu, số lượng bài viết tải thêm mỗi lần, văn bản trên nút “Tải Thêm” và nhiều tùy chọn khác. Sao chép shortcode đã tạo.
Chèn Shortcode vào trang: Chỉnh sửa trang hoặc bài viết mà bạn muốn hiển thị nút “Tải Thêm” và chèn shortcode đã sao chép vào nội dung.

Sau khi thực hiện các bước trên, nút “Tải Thêm” sẽ xuất hiện trên trang của bạn. Khi người dùng nhấp vào nút này, các bài viết bổ sung sẽ được tải và hiển thị bằng AJAX, mà không cần tải lại toàn bộ trang.

Thêm Nút “Tải Thêm” Bằng Code Thủ Công (Custom Code)

Nếu bạn muốn tùy chỉnh giao diện và chức năng của nút “Tải Thêm” một cách chi tiết hơn, bạn có thể sử dụng code thủ công. Phương pháp này đòi hỏi kiến thức về HTML, CSS và JavaScript/jQuery.

Các Bước Thực Hiện

Tạo một tập tin JavaScript: Tạo một tập tin JavaScript (ví dụ: load-more.js) và lưu trữ nó trong thư mục chủ đề của bạn (ví dụ: wp-content/themes/your-theme/js/).

Thêm Code JavaScript: Thêm code JavaScript sau vào tập tin load-more.js:


      jQuery(function($) {
        let page = 2; // Bắt đầu từ trang thứ 2
        let loading = false;

        $('#load-more').click(function() {
          if (loading) {
            return;
          }

          loading = true;
          $(this).text('Đang tải...');

          $.ajax({
            url: '/wp-admin/admin-ajax.php', // Đường dẫn đến AJAX handler
            type: 'POST',
            data: {
              action: 'load_more_posts', // Tên action
              page: page
            },
            success: function(data) {
              if (data) {
                $('#post-container').append(data); // Thêm bài viết vào container
                page++;
                $('#load-more').text('Tải Thêm');
                loading = false;
              } else {
                $('#load-more').text('Không còn bài viết nào để tải').prop('disabled', true);
              }
            },
            error: function(jqXHR, textStatus, errorThrown) {
              console.log(textStatus, errorThrown);
              $('#load-more').text('Lỗi khi tải').prop('disabled', true);
              loading = false;
            }
          });
        });
      });

Thêm Code PHP vào functions.php: Thêm code PHP sau vào tập tin functions.php của chủ đề của bạn:


      function load_more_posts() {
        $page = $_POST['page'];

        $args = array(
          'post_type' => 'post',
          'posts_per_page' => 5, // Số lượng bài viết tải mỗi lần
          'paged' => $page
        );

        $query = new WP_Query($args);

        if ($query->have_posts()) {
          while ($query->have_posts()) {
            $query->the_post();
            ?>
            
              <a href="">
              
            
             admin_url('admin-ajax.php')
        ));
      }

      add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

Thêm HTML vào Template: Thêm HTML sau vào template nơi bạn muốn hiển thị bài viết (ví dụ: index.php, archive.php):


      
         'post',
            'posts_per_page' => 5, // Số lượng bài viết hiển thị ban đầu
            'paged' => 1
          );

          $query = new WP_Query($args);

          if ($query->have_posts()) {
            while ($query->have_posts()) {
              $query->the_post();
              ?>
              
                <a href="">

Thêm CSS (Tùy chọn): Thêm CSS để tạo kiểu cho nút “Tải Thêm” và các bài viết.

Giải Thích Code

JavaScript (load-more.js): Xử lý sự kiện click của nút “Tải Thêm”, gửi yêu cầu AJAX đến server, và thêm các bài viết mới vào container.
PHP (functions.php): Xử lý yêu cầu AJAX, truy vấn cơ sở dữ liệu để lấy các bài viết tiếp theo, trả về HTML của các bài viết này. Hàm wp_enqueue_script được sử dụng để thêm tập tin JavaScript vào trang web.
HTML (Template): Hiển thị các bài viết ban đầu và nút “Tải Thêm”.

Tùy Chỉnh Giao Diện và Chức Năng

Dù bạn sử dụng plugin hay code thủ công, bạn có thể tùy chỉnh giao diện và chức năng của nút “Tải Thêm” để phù hợp với phong cách trang web của bạn.

Tùy Chỉnh Với Plugin

Hầu hết các plugin “Tải Thêm” đều cung cấp các tùy chọn để tùy chỉnh văn bản trên nút, kiểu dáng nút, hiệu ứng tải, và nhiều hơn nữa. Hãy khám phá các tùy chọn cấu hình của plugin bạn đang sử dụng để tìm hiểu cách tùy chỉnh nó.

Tùy Chỉnh Với Code Thủ Công

Với code thủ công, bạn có toàn quyền kiểm soát giao diện và chức năng. Bạn có thể sử dụng CSS để tạo kiểu cho nút “Tải Thêm” và các bài viết. Bạn cũng có thể sửa đổi code JavaScript và PHP để thay đổi cách hoạt động của nó.

Ví dụ:

Thay đổi văn bản trên nút: Sửa đổi văn bản trong code JavaScript (ví dụ: $(this).text('Tải Thêm');).
Thay đổi số lượng bài viết tải mỗi lần: Sửa đổi giá trị của tham số posts_per_page trong code PHP.
Thêm hiệu ứng tải: Sử dụng CSS animations hoặc JavaScript để tạo hiệu ứng tải khi các bài viết đang được tải.

Kết Luận

Thêm nút “Tải Thêm” vào trang web WordPress của bạn là một cách tuyệt vời để cải thiện trải nghiệm người dùng, tăng tốc độ tải trang và giảm tải cho máy chủ. Cho dù bạn chọn sử dụng plugin hay code thủ công, hãy đảm bảo rằng bạn tùy chỉnh giao diện và chức năng để phù hợp với phong cách trang web của bạn.

Hãy thử nghiệm các phương pháp khác nhau và tìm ra phương pháp phù hợp nhất với nhu cầu của bạn. Chúc bạn thành công!

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa