Elementor Pagination Lỗi: Nguyên Nhân Và Cách Khắc Phục Triệt Để - Taphoammo - Bán theme plugin mẫu thiết kế web sẵn Thegioitinhoc.com.vn

Elementor là một trong những page builder phổ biến nhất trên WordPress, nhưng không ít người dùng gặp phải tình trạng elementor pagination lỗi. Phân trang không hiển thị, nhảy sai số trang, hoặc không tải được nội dung trang tiếp theo là những vấn đề khiến website mất đi sự chuyên nghiệp và ảnh hưởng trực tiếp đến trải nghiệm người dùng. Bài viết này phân tích chi tiết nguyên nhân gốc rễ và cung cấp các giải pháp thực tế, có thể áp dụng ngay lập tức.

Elementor Pagination Lỗi Là Gì Và Tại Sao Xảy Ra?

Pagination trong Elementor là cơ chế chia nhỏ danh sách bài viết, sản phẩm hoặc nội dung thành nhiều trang. Lỗi phân trang xảy ra khi tính năng này không hoạt động như mong đợi: nút “1, 2, 3…” không xuất hiện, nhấn vào trang thứ hai nhưng vẫn hiển thị trang đầu, hoặc URL bị sai cấu trúc. Nguyên nhân thường đến từ xung đột theme, cấu hình query sai trong Posts widget hoặc Loop Grid, lỗi do plugin caching, hoặc do giới hạn server.

Bản Chất Của Cơ Chế Phân Trang Trong Elementor

Elementor sử dụng tham số truy vấn page hoặc paged để điều khiển phân trang. Khi bạn kéo thả widget Posts hoặc Archive Posts, trình xây dựng tự động tạo ra vòng lặp WP_Query với tham số paged. Nếu có bất kỳ thành phần nào can thiệp vào quá trình này (theme, plugin SEO, cache), pagination ngay lập tức bị hỏng.

Phân Loại Các Lỗi Pagination Thường Gặp

Loại lỗi	Biểu hiện	Nguyên nhân chính
Không hiển thị nút phân trang	Chỉ có một trang, không thấy số 1, 2, 3	Cài đặt sai số lượng bài viết mỗi trang, hoặc query bị giới hạn bởi theme
Bấm trang 2 vẫn ra trang 1	URL thay đổi nhưng nội dung không đổi	Xung đột với plugin lazy load hoặc caching không đồng bộ
Lỗi 404 trang phân trang	Trang thứ hai, thứ ba báo không tìm thấy	Cấu trúc permalink không tương thích, hoặc theme chặn phân trang tùy chỉnh
Phân trang nhảy cóc	Hiển thị trang 1, 4, 7 không theo thứ tự	Lỗi offset trong custom query

Nguyên Nhân Sâu Xa Khiến Elementor Pagination Lỗi

Xung Đột Theme Và Plugin

Nhiều theme WordPress chứa file functions.php có sẵn các hàm ghi đè query mặc định. Ví dụ, theme dành cho blog thường ép số bài viết trên trang thành 10, trong khi Elementor đặt là 6. Khi hai giá trị này không đồng nhất, hệ thống phân trang không thể tính toán đúng tổng số trang. Plugin bảo mật, plugin tối ưu cơ sở dữ liệu cũng có thể vô hiệu hóa tham số paged.

Cấu Hình Query Sai Trong Elementor

Khi sử dụng Posts widget hoặc Loop Grid, bạn có tùy chọn “Display posts per page” và “Offset”. Nếu đặt offset > 0 mà không điều chỉnh lại tổng số bài viết, phân trang sẽ bị lệch. Ngoài ra, nếu chế độ “Ignore Sticky Posts” được bật, tham số ignore_sticky_posts có thể làm rối loạn thứ tự hiển thị trên các trang phụ.

Plugin Caching Và Tối Ưu Tốc Độ

WP Rocket, W3 Total Cache, LiteSpeed Cache thường cache toàn bộ trang HTML. Khi bạn nhấn vào trang thứ hai, server trả về cache của trang đầu tiên vì URL không được phân biệt chính xác. Một số plugin cache có cơ chế loại trừ các tham số phân trang, nhưng cấu hình mặc định thường không bao gồm /page/2/, /page/3/ của Elementor.

Lỗi Do JavaScript Và AJAX Pagination

Elementor Pro có tính năng “Load More” và “Infinite Scroll” dựa trên AJAX. Nếu có lỗi JavaScript từ theme hoặc plugin khác (jQuery conflict), trình duyệt không thể gửi yêu cầu AJAX đúng cách, dẫn đến phân trang không tải nội dung mới. Bảng điều khiển (console) sẽ hiển thị lỗi Uncaught TypeError hoặc Failed to load resource.

Hướng Dẫn Sửa Lỗi Pagination Elementor Chi Tiết

Bước 1: Kiểm Tra Xung Đột Theme

Tạm thời chuyển sang theme WordPress mặc định (Twenty Twenty-Four hoặc Astra).
Truy cập trang có pagination, xem lỗi còn xuất hiện không.
Nếu hết lỗi, theme gốc là nguyên nhân. Liên hệ nhà phát triển theme hoặc thêm đoạn code sau vào functions.php của theme con để ghi đè query:
add_action('pre_get_posts', function($query) { if (!is_admin() && $query->is_main_query() && $query->is_post_type_archive() ) { $query->set('posts_per_page', 6); } });

Bước 2: Xử Lý Query Trong Elementor

Vào trang chỉnh sửa Elementor, click vào widget Posts hoặc Loop Grid. Trong tab Query, kiểm tra mục “Posts Per Page”. Giá trị này nên là bội số của layout grid bạn muốn hiển thị. Đảm bảo “Offset” để trống hoặc bằng 0. Nếu bạn dùng “Custom Query” qua hook PHP, hãy xác nhận tham số paged được truyền đúng: paged => get_query_var('paged')? get_query_var('paged'): 1.

Bước 3: Cấu Hình Lại Plugin Cache

Tạm thời tắt tất cả plugin cache.
Nếu phân trang hoạt động trở lại, kích hoạt từng plugin và thêm quy tắc loại trừ: trong WP Rocket, vào Advanced Rules → Never Cache URL(s) thêm /page/(.*).
Với LiteSpeed Cache, bật tính năng “Purge on Update” và thêm URL phân trang vào danh sách không cache.

Bước 4: Debug JavaScript Cho AJAX Pagination

Mở DevTools (F12), vào tab Console.
Nhấn nút “Load More” hoặc chuyển trang 2, quan sát lỗi.
Nếu thấy lỗi liên quan đến elementor-frontend.min.js, có thể file này bị hỏng do cache plugin hoặc CDN. Xóa cache CDN, cập nhật Elementor lên phiên bản mới nhất.
Thử dequeue các script không cần thiết bằng code: add_action('wp_enqueue_scripts', function() { if (is_page('your-page')) { wp_dequeue_script('tên-plugin'); } });

Bước 5: Sửa Lỗi 404 Cho Trang Phân Trang

Vào Settings → Permalinks, nhấn nút “Save Changes” để flush rewrite rules. Nếu vẫn lỗi, thêm đoạn code sau vào functions.php:

add_filter('redirect_canonical', function($redirect_url) { if (is_singular()) return false; return $redirect_url; });

Điều này ngăn WordPress tự động redirect các trang phân trang sai.

Sai Lầm Thường Gặp Khi Xử Lý Elementor Pagination Lỗi

Thay đổi số bài viết mỗi trang mà không kiểm tra tổng số trang: Nếu bạn có 20 bài viết, đặt posts_per_page = 3, trang cuối sẽ có 2 bài, nhưng phân trang vẫn hiển thị 7 trang. Hãy luôn tính toán đồng bộ với layout.
Dùng nhiều plugin phân trang cùng lúc: WP-PageNavi, Yoast SEO, Elementor pagination có thể xung đột. Chỉ giữ lại một phương thức phân trang duy nhất.
Không test trên trình duyệt ẩn danh: Cookie và cache trình duyệt thường che giấu lỗi. Luôn kiểm tra ở chế độ ẩn danh hoặc qua một thiết bị khác.

Lưu Ý Khi Tối Ưu SEO Cho Phân Trang Elementor

Phân trang không chỉ là vấn đề kỹ thuật mà còn ảnh hưởng đến SEO. Google thường index các trang như /page/2/, /page/3/ riêng biệt. Nếu pagination bị lỗi 404 hoặc trùng nội dung, website sẽ bị phạt. Sử dụng thẻ rel="next" và rel="prev" là bắt buộc. Yoast SEO hoặc Rank Math tự động xử lý việc này, nhưng nếu bạn dùng code tùy chỉnh, hãy thêm:

add_action('wp_head', function() { global $wp_query; if ($wp_query->max_num_pages > 1) { echo ''; echo ''; } });

So Sánh Phân Trang Mặc Định Và Phân Trang Tùy Chỉnh Trong Elementor

Tiêu chí	Posts Widget (mặc định)	Loop Grid (tùy chỉnh)
Độ phức tạp	Thấp, kéo thả đơn giản	Cao, cần cấu hình query template
Khả năng tương thích	Tốt với hầu hết theme	Dễ xung đột nếu theme có custom loop
Tốc độ load	Nhanh hơn do ít truy vấn	Chậm hơn nếu có nhiều dynamic content
Mức độ lỗi pagination	Ít gặp lỗi hơn	Thường xảy ra lỗi offset và AJAX

Câu Hỏi Thường Gặp Về Elementor Pagination Lỗi

Tại sao số trang không hiển thị đúng với số lượng bài viết thực tế?

Nguyên nhân là do tổng số bài viết (found_posts) bị thay đổi bởi một hook nào đó.

Lỗi thường đến từ sự kiện touch không được xử lý đúng. Cập nhật Elementor lên phiên bản 3.15 trở lên, phiên bản này đã vá lỗi touch event. Nếu vẫn lỗi, thêm CSS: .elementor-pagination.page-numbers { cursor: pointer; } để đảm bảo nút có thể click.

Làm thế nào để phân trang hoạt động với bài viết tùy chỉnh (custom post type)?

Khi tạo archive cho custom post type, bạn cần đảm bảo rewrite slug khớp với cấu hình trong register_post_type. Thêm dòng code sau vào query: 'paged' => get_query_var('paged'). Nếu dùng Elementor Pro, trong widget Posts có tùy chọn “Post Type”, chọn đúng post type của bạn.

Có nên dùng Infinite Scroll thay vì pagination số?

Infinite Scroll tốt cho UX trên mobile nhưng gây khó khăn cho SEO vì Google không crawl được nội dung động. Nếu bạn muốn giữ SEO, hãy dùng pagination số kết hợp với Load More button. Elementor Pro hỗ trợ cả hai, nhưng cần kiểm tra kỹ lỗi AJAX trước khi đưa vào sản xuất.

Phân trang bị lỗi sau khi cập nhật Elementor lên phiên bản mới?

Đây là lỗi phổ biến do thay đổi cấu trúc dữ liệu. Giải pháp: vào Elementor → Tools → Regenerate CSS, sau đó xóa cache toàn bộ website. Nếu vẫn lỗi, khôi phục phiên bản cũ và gửi báo cáo lỗi cho đội ngũ Elementor.

Kết Luận

Elementor pagination lỗi không phải là vấn đề quá phức tạp nếu bạn hiểu rõ cơ chế hoạt động và áp dụng đúng quy trình debug. Từ xung đột theme, plugin cache, đến cấu hình query sai, mỗi nguyên nhân đều có giải pháp cụ thể. Luôn sao lưu website trước khi can thiệp code, và kiểm tra kỹ trên nhiều thiết bị cũng như trình duyệt. Một hệ thống phân trang hoạt động ổn định không chỉ cải thiện trải nghiệm người dùng mà còn giúp website đạt thứ hạng cao hơn trên công cụ tìm kiếm.

Xem thêm: