Hiện tại trên các diễn đàn mình chưa thấy có ai chia sẻ cách phân trang cho WordPress bằng Ajax, nên hôm nay mình xin chia sẻ với các bạn cách phân trang mà không ảnh hưởng tới SEO lại đẹp mắt vì mình sẽ dùng Ajax để load ra trang tiếp theo trong chính trình duyệt hiện tại, giúp người dùng tiện lợi hơn khi truy cập, cũng có thể nó sẽ giúp blog của bạn trông Pro hơn đó.
* Chuẩn bị trước khi làm Ajax Paging: Bạn hãy cài plugin phân trang WP-pagenavi để phân trang cho blog của mình, vừa đẹp vừa tiện dụng và bài viết chia sẻ này cũng dùng plugin này, và hãy chắc chắn rằng blog của bạn đã phân trang thành công !
Chúng ta cùng bắt đầu bằng cách kiểm tra xem hiện tại blog của bạn đã tích hợp Jquery chưa nhé, nếu chưa các bạn có thể thêm dòng sau vào thẻ header của blog:
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
Tiếp theo các bạn cần dùng hàm $.ajax() để có thể lấy dữ liệu cho vào phần trang hiện tại, nhưng trước hết chúng ta cần phải thực hiện một vài bước cấu hình cho blog đã.
Bước 1: Tạo page để Ajax request tới
Trước nhất là phải có đích để các bạn dùng hàm Ajax request tới lấy dữ liệu, tớ chọn page là nơi cung cấp nguồn này cho ajax, tớ ví dụ tạo trang http://example.com/ajaxrequest/, mình sẽ dùng shortcode để quản lý nội dung, bạn thêm:
[ajax_shortcode ] // không có dấu cách nhé !
Ta có như trong hình:
Tạo một trang cho Ajax request tới lấy nội dung
Tiếp theo, vì Page này không cần hiển thị mà chỉ cần lấy đúng thông tin mà ajax cần mà thôi, ta cần tạo một file trong gói template của bạn để hiện thị page này, trong trường hợp ta có:
page-ajaxrequest.php
Trong file này các bạn không cần hiển thị header hay footer mà chỉ cần hiển thị nội dung được yêu cầu từ Ajax nên ta chỉ cần có như sau:
<?php while ( have_posts()): the_post(); ?> <?php the_content(); ?> <?php endwhile;?>
Lúc này khi ghé thăm thử trang vừa tạo các bạn chỉ nhận được hiển thị là [ajax_shortcode ] mà thôi.
Phần quan trọng tiếp theo sẽ là:
Bước hai: Tạo hiển thị cho Ajax bằng shortcode
Trong bước trên các bạn đã tạo ra một page là http://example.com/ajaxrequest/ rồi, với nội dung hiển thị mỗi cái shortcode là [ajax_shortcode ] mà thôi, giờ chúng ta sẽ ghé thăm file functions.php và dùng hàm để “chế ngự” cái shortcode này.
Nhưng hãy dừng lại một chút, ta cần chú ý tới các block được lặp đi lặp lại trong một vòng lặp của trang, mình ví dụ:
Các block trong vòng lặp
Code vòng lặp của tớ nó thế này ( trong file functions.php hoặc bạn có thể lấy trong loop-single.php hoặc content.php tùy vào giao diện ):
# Func dùng cho các vòng lặp ...
function repeat_block() {
$cat = get_the_category_list(', ') ;
?>
<div id="post-<?php echo get_the_ID(); ?>">
<div><?php echo first_image(); ?></div>
<div>
<h3 id="small-title" itemprop="name"><a rel="bookmark" href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a></h3>
<div>
<?php echo the_author_posts_link(); ?> | <time datetime="<?php echo get_the_date('Y-m-d H:m:s+07:00');?>" PUBDATE><?php echo get_the_date('d/m/Y H:m:s');?></time> | <span>Có <?php echo get_comments_number();?> nhận xét</span>
</div>
<div><?php the_excerpt();?></div>
<div><?php echo $cat; ?> <?php echo the_tags('', ' ', ''); ?></div>
</div>
</div>
<?php
}
Và chúng ta sẽ lấy đoạn code đó để hiển thị trong page ajax sao cho giống y như page bình thường, để khi Ajax gọi kết quả ta còn trả về được các block giống y như thế, ta có hàm sau:
add_shortcode('ajax_shortcode','ajax_paging');
function ajax_paging() {
$cat = (int) $_GET['cat'];
$page = get_query_var('paged');
$data = new WP_Query('cat='. $cat . '&paged='. $page);
while ( $data->have_posts()): $data->the_post();
repeat_block(); // đoạn này là vòng lặp, tùy vào giao diện của các bạn sẽ có vòng lặp khác nhau
endwhile;
wp_pagenavi( array( 'query' => $data ) );
wp_reset_query();
}
Trong hàm trên ta có:
- Dùng $_GET[‘cat’] trong trường hợp để phân tách rõ ràng kết quả khi gọi bằng Ajax, đích xác cat nào được hiển thị.
- Dùng get_query_var(‘paged’) là để biết page nào đang được gọi để hiển thị.
- Dùng plugin Wp-pagenavi để hiển thị số trang trong ajax.
Bây giờ các bạn ghé thử page vừa tạo, đường dẫn của mình là:
http://www.jamviet.com/ajaxrequest/page/2?cat=1
Thấy có hiển thị kết quả, ồ sắp được rồi đó bạn !
Bước 3: Làm việc với Ajax Paging:
Trước hết ta cần để ý tới class page-navi để bắt trong ajax:
Class page-navi để bắt trường hợp
Khi tới bước này ta đã chắc chắn là Page Ajax kia đã hoạt động trơn chu để sẵn sàng trả lại kết quả cho Ajax khi cần gọi tới, các bạn quay lại file header.php, ta có :
<script>
<!--
var catid = '<?php echo ( is_category() ? get_query_var('cat') : '') ; ?>';
-->
</script>
Đây là biến dùng để khai báo cat id cho Ajax gọi tới sau.
Tiếp theo sau đây ta cần thực hiện một lệnh javascript hơi phức tạp một chút để bắt trường hợp bấm vào số trang thì không cho trình duyệt load nữa, thay vào đó ta sẽ gọi kết quả từ page ajax chúng ta vừa tạo, vẫn trong file header.php chúng ta thêm vào bên dưới dòng javascript kia:
<script>
$(document).ready( function() {
var paging = function () {
$('.wp-pagenavi a').each(function(i, a) {
if ( catid == '')
return;
$(a).on('click', function(e) {
e.preventDefault();
var page = $(this).attr('href').replace( /^D+/g, '');
if ( page.match(/cat/) )
p = page;
else
p = page+'?cat='+catid;
$.ajax({
url: 'http://www.example.com/ajaxrequest/page/'+p,// gọi tới page ta vừa tạo
type:'GET',
beforeSend: function () {
$(window).scrollTop($("#content").offset().top); // bấm số trang thì nhảy lên trên content
},
success: function(data) {
$('#content').html(data);// ghi kết quả trả về vào content
paging(); // reload cái DOM//
}
});
});
});};
paging();
});
</script>
Như vậy, theo blog của mình thì mình dùng thẻ div có ID là content bao xung quanh các block kết quả, mỗi khi người dùng bấm vào số trang chúng sẽ query tới page mà chúng ta tạo trước đó là ajaxrequest để lấy kết quả rồi trả về, sau khi trả về sẽ reload lại DOM để thực hiện tiếp, mình cũng có dùng hàm each trong Jquery để chạy qua tất cả các thẻ <a> của page để bắt hành động click, đoạn này để cho trực quan tớ đã lấy chính blog của mình để làm thí nghiệm cho các bạn :P và ngay bây giờ các bạn có thể thử Ajax Paging trên trang blog của mình: http://www.jamviet.com/category/cuoc-song , các bạn có thể xem thử mã nguồn bằng cách bấm Ctr+U để xem hết các mã javascript cần thiết nhé.
Tổng kết
Qua đoạn chia sẻ này các bạn đã có thể tự tạo được cho mình một blog rất đẹp với cách load các trang bằng ajax mà không hề ảnh hưởng tới SEO vì các công cụ tìm kiếm vẫn đi được theo các đường link của page như bình thường nhé, chỉ người dùng có trình duyệt hỗ trợ javascript mới có thể query các page bằng ajax mà thôi. Trong đoạn ví dụ này tớ chỉ nói tới Ajax paging trong category, nếu các bạn cần làm ajax trong trang chủ cũng tương tự, nhưng không cần có biến cat trên đường dẫn nữa.
Chúc các bạn thành công, nếu cần hỗ trợ các bạn hãy để lại comment nhé !
