Thêm nút load more posts trong WordPress

8 tháng ago, WordPress Themes, Views
Thêm nút load more posts trong WordPress

Giới thiệu về nút “Load More Posts” trong WordPress

Trong thế giới web hiện đại, trải nghiệm người dùng (UX) là yếu tố then chốt quyết định sự thành công của một trang web. Một trong những khía cạnh quan trọng của UX là khả năng duyệt nội dung một cách mượt mà và hiệu quả. Đối với các trang web WordPress, đặc biệt là các blog hoặc trang tin tức có lượng bài viết lớn, việc sử dụng phân trang truyền thống (pagination) có thể gây ra sự gián đoạn và làm giảm trải nghiệm người dùng. Thay vào đó, nút “Load More Posts” (Tải thêm bài viết) mang đến một giải pháp thay thế hấp dẫn, giúp người dùng duyệt nội dung liên tục mà không cần phải chuyển trang.

Nút “Load More Posts” hoạt động bằng cách tải thêm các bài viết từ cơ sở dữ liệu một cách tự động khi người dùng cuộn xuống cuối trang hoặc nhấp vào nút. Điều này tạo ra một trải nghiệm cuộn vô tận (infinite scroll) hoặc gần như vô tận, giúp người dùng dễ dàng khám phá nhiều nội dung hơn mà không gặp phải sự gián đoạn của việc chuyển trang.

Lợi ích của việc sử dụng nút “Load More Posts”

Việc tích hợp nút “Load More Posts” vào trang web WordPress mang lại nhiều lợi ích đáng kể:

  • Cải thiện trải nghiệm người dùng: Người dùng có thể duyệt nội dung liên tục mà không bị gián đoạn bởi việc chuyển trang. Điều này tạo ra một trải nghiệm duyệt web mượt mà và thú vị hơn.
  • Tăng thời gian ở lại trang: Khi người dùng dễ dàng khám phá nhiều nội dung hơn, họ có xu hướng ở lại trang web lâu hơn, giúp tăng thời gian ở lại trang (time on page), một yếu tố quan trọng trong SEO.
  • Giảm tỷ lệ thoát trang: Tương tự, việc cải thiện trải nghiệm người dùng và tăng thời gian ở lại trang có thể giúp giảm tỷ lệ thoát trang (bounce rate), một chỉ số cho thấy mức độ tương tác của người dùng với trang web.
  • Tăng khả năng khám phá nội dung: Nút “Load More Posts” giúp người dùng dễ dàng khám phá các bài viết cũ hơn mà họ có thể đã bỏ lỡ nếu chỉ sử dụng phân trang truyền thống.
  • Phù hợp với thiết bị di động: Trải nghiệm cuộn vô tận đặc biệt phù hợp với thiết bị di động, nơi người dùng thường xuyên sử dụng thao tác cuộn để duyệt nội dung.

Các phương pháp thêm nút “Load More Posts” vào WordPress

Có nhiều cách để thêm nút “Load More Posts” vào trang web WordPress của bạn, mỗi cách có ưu và nhược điểm riêng. Dưới đây là một số phương pháp phổ biến nhất:

Sử dụng Plugin

Đây là phương pháp đơn giản và nhanh chóng nhất, phù hợp với người dùng không có nhiều kinh nghiệm lập trình. Có rất nhiều plugin WordPress miễn phí và trả phí được thiết kế để thêm nút “Load More Posts” một cách dễ dàng. Một số plugin phổ biến bao gồm:

  • Ajax Load More
  • YITH Infinite Scrolling
  • Catch Infinite Scroll

Ưu điểm:

  • Dễ cài đặt và sử dụng.
  • Thường có nhiều tùy chọn tùy chỉnh.
  • Không yêu cầu kiến thức lập trình.

Nhược điểm:

  • Có thể làm chậm trang web nếu plugin không được tối ưu hóa tốt.
  • Có thể xung đột với các plugin khác.
  • Một số plugin chỉ cung cấp các tính năng nâng cao trong phiên bản trả phí.

Sử dụng code tùy chỉnh (Custom Code)

Phương pháp này đòi hỏi kiến thức về PHP, JavaScript và AJAX. Tuy nhiên, nó cho phép bạn tạo ra một nút “Load More Posts” hoàn toàn tùy chỉnh, phù hợp với nhu cầu và thiết kế của trang web của bạn.

Bước 1: Thêm JavaScript và CSS

Trước tiên, bạn cần thêm đoạn mã JavaScript để xử lý logic tải thêm bài viết và đoạn mã CSS để tạo kiểu cho nút “Load More Posts”. Bạn có thể thêm các đoạn mã này vào file functions.php của theme hoặc sử dụng plugin như “Code Snippets”.

Bước 2: Tạo Template cho bài viết

Bạn cần tạo một template (ví dụ: content-load-more.php) để hiển thị các bài viết được tải thêm. Template này sẽ chứa mã HTML và PHP để hiển thị thông tin của từng bài viết.

Bước 3: Xử lý AJAX

Bạn cần tạo một hàm PHP để xử lý yêu cầu AJAX và trả về các bài viết được tải thêm. Hàm này sẽ lấy thông tin về số lượng bài viết đã hiển thị và sử dụng WP_Query để truy vấn cơ sở dữ liệu và trả về các bài viết tiếp theo.

Ưu điểm:

  • Hoàn toàn tùy chỉnh theo nhu cầu của bạn.
  • Hiệu suất tốt hơn so với việc sử dụng plugin nếu được viết code cẩn thận.
  • Không phụ thuộc vào plugin của bên thứ ba.

Nhược điểm:

  • Đòi hỏi kiến thức lập trình.
  • Tốn nhiều thời gian và công sức hơn so với việc sử dụng plugin.
  • Cần cẩn thận để tránh các lỗ hổng bảo mật.

Sử dụng Theme có sẵn tính năng

Một số theme WordPress hiện đại đã tích hợp sẵn tính năng “Load More Posts” hoặc “Infinite Scroll”. Nếu bạn đang tìm kiếm một giải pháp đơn giản, hãy xem xét việc sử dụng một theme như vậy.

Ưu điểm:

  • Dễ dàng sử dụng.
  • Thường được tích hợp tốt với thiết kế của theme.
  • Không cần cài đặt thêm plugin hoặc viết code.

Nhược điểm:

  • Ít tùy biến hơn so với việc sử dụng code tùy chỉnh.
  • Có thể không phù hợp với tất cả các loại trang web.

Ví dụ code (Simplified) sử dụng AJAX

Đây là một ví dụ đơn giản về cách thêm nút “Load More Posts” bằng cách sử dụng code tùy chỉnh (JavaScript và PHP). Lưu ý rằng đây chỉ là một ví dụ đơn giản và bạn có thể cần điều chỉnh nó để phù hợp với nhu cầu cụ thể của trang web của bạn.

JavaScript (trong file functions.php hoặc sử dụng plugin Code Snippets):

“`javascript
jQuery(function($) {
$(‘body’).on(‘click’, ‘.load-more’, function() {
var button = $(this);
var data = {
‘action’: ‘load_more_posts’,
‘query’: load_more_params.posts, // parameters for WP_Query
‘page’ : load_more_params.current_page
};

$.ajax({
url : load_more_params.ajaxurl, // AJAX handler
data : data,
type : ‘POST’,
beforeSend : function ( xhr ) {
button.text(‘Loading…’); // change the button text, you can also add a preloader image
},
success : function( data ){
if( data ) {
button.text( ‘Load More’ ).prev().before(data); // insert new posts
load_more_params.current_page++;

if ( load_more_params.current_page == load_more_params.max_page )
button.remove(); // if last page, remove the button

} else {
button.remove(); // if no data, remove the button as well
}
}
});
return false;
});
});
“`

PHP (trong file functions.php):

“`php
function load_more_scripts() {

wp_enqueue_script(‘jquery’); // enqueue jQuery

wp_register_script(‘loadmore’, get_template_directory_uri() . ‘/js/loadmore.js’, array(‘jquery’), false, true);

wp_localize_script( ‘loadmore’, ‘load_more_params’, array(
‘ajaxurl’ => site_url() . ‘/wp-admin/admin-ajax.php’, // WordPress AJAX
‘posts’ => serialize( $wp_query->query_vars ), // query parameters
‘current_page’ => get_query_var(‘paged’) ? get_query_var(‘paged’) : 1,
‘max_page’ => $wp_query->max_num_pages
) );

wp_enqueue_script(‘loadmore’);
}

add_action( ‘wp_enqueue_scripts’, ‘load_more_scripts’ );

function load_more_posts() {

// prepare query parameters
$query_vars = unserialize( $_POST[‘query’] );
$query_vars[‘paged’] = $_POST[‘page’];

$wp_query = new WP_Query( $query_vars );

if ( $wp_query->have_posts() ) {

// run the loop
while( $wp_query->have_posts() ): $wp_query->the_post();

get_template_part( ‘content’, ‘load-more’ ); // renders the content template
endwhile;

}
die; // here die() is required
}

add_action(‘wp_ajax_load_more_posts’, ‘load_more_posts’); // wp_ajax_{action}
add_action(‘wp_ajax_nopriv_load_more_posts’, ‘load_more_posts’); // wp_ajax_nopriv_{action}
“`

HTML (trong template nơi bạn muốn hiển thị các bài viết):

“`html

Load More
“`

Template cho bài viết (content-load-more.php):

“`php

<a href="”>

“`

Lưu ý: Đảm bảo rằng bạn đã thay thế /js/loadmore.js bằng đường dẫn chính xác đến file JavaScript của bạn. Ví dụ này yêu cầu bạn tạo file loadmore.js và thêm đoạn code JavaScript vào đó.

Lời khuyên khi sử dụng nút “Load More Posts”

Để đảm bảo rằng nút “Load More Posts” hoạt động hiệu quả và mang lại trải nghiệm tốt nhất cho người dùng, hãy lưu ý những điều sau:

  • Tối ưu hóa hiệu suất: Đảm bảo rằng plugin hoặc code tùy chỉnh bạn sử dụng được tối ưu hóa để tránh làm chậm trang web.
  • Sử dụng hình ảnh Lazy Load: Kết hợp nút “Load More Posts” với tính năng lazy load cho hình ảnh để cải thiện tốc độ tải trang.
  • Kiểm tra khả năng tương thích: Kiểm tra kỹ lưỡng khả năng tương thích của plugin hoặc code tùy chỉnh với theme và các plugin khác trên trang web của bạn.
  • Cung cấp phản hồi cho người dùng: Hiển thị thông báo “Đang tải…” hoặc một biểu tượng loading để cho người dùng biết rằng nội dung đang được tải.
  • Đảm bảo khả năng tiếp cận: Đảm bảo rằng nút “Load More Posts” dễ dàng được tìm thấy và sử dụng bởi tất cả người dùng, bao gồm cả những người sử dụng trình đọc màn hình.

Kết luận

Nút “Load More Posts” là một giải pháp tuyệt vời để cải thiện trải nghiệm người dùng trên các trang web WordPress có lượng bài viết lớn. Bằng cách cho phép người dùng duyệt nội dung liên tục mà không cần phải chuyển trang, nó có thể giúp tăng thời gian ở lại trang, giảm tỷ lệ thoát trang và tăng khả năng khám phá nội dung. Có nhiều cách để thêm nút “Load More Posts” vào trang web của bạn, từ việc sử dụng plugin đơn giản đến việc viết code tùy chỉnh phức tạp. Hãy chọn phương pháp phù hợp nhất với nhu cầu và kỹ năng của bạn để mang lại trải nghiệm tốt nhất cho người dùng của bạn.

, , , ,

..