CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%
Kĩ thuật sử dụng ajax trong thiết kế web là một phương pháp hết sức cần thiết. Trong làm web bằng WordPress cũng vậy, bằng việc kết hợp Ajax jQuery mang lại hiệu quả cao, tránh tải lại trang gây khó chịu với người dùng, đồng thời sử dụng Ajax sẽ giúp xử lý dữ liệu gọn gàng hơn.
Để nắm rõ hơn về Ajax trong WordPress, chúng ta hãy làm một ví dụ đơn giản như hình sau: Trang chủ blog đang hiển thị 3 bài viết mới nhất, ta có nút “XEM THÊM”, khi nhấp vào nút đó sẽ hiển thị thêm 3 bài viết tiếp theo bằng Ajax.
Bởi vì bài viết khá chi tiết cho người mới học wordpress. Nếu bạn thấy quá dài dòng, vui lòng bỏ qua các bước mình đã biết đề tránh mất thời gian.
1 Bước chuẩn bị khi thực hành AJAX trong WordPress
- Cần ít nhất 4 bài viết, để phân trang 3 bài viết mỗi trang
- Html nút “Xem thêm”
- Một hàm (function) javascript
- File functions.php của WordPress
- Thẻ bao HTML để hiển thị nội dung trả về
Chúng ta sẽ tiếp tục sử dụng code wordpress trong bài hướng dẫn đầu tiên nhé, bạn có thể xem lại tại đây nếu chưa xem qua bài này Cách tạo blog bằng wordpress
2 Thực hiện code Ajax trong WordPress
2.1 Thêm bài viết cho blog
Bạn cần phải có dữ liệu ít nhất 4 bài, nếu có 6 bài viết càng tốt. Bằng cách vào đây để tạo thêm cho đủ số lượng bài viết.
2.2 Cấu hình hiển thị 3 bài viết cho mỗi trang ( phân trang )
2.3 Thêm HTML nút “XEM THÊM”
Mở file index.php trong thư mục theme wordrpess đang dùng như hình dưới
Tìm đến đoạn code sau và đóng hàm này lại
<?php the_posts_pagination(); ?>
Dùng dấu // để đóng hàm lại như sau:
<?php //the_posts_pagination(); ?>
Sau đó ta thêm một nút “Xem Thêm” như sau
<style>
#wpshare247-btn-container{ text-align:center; }
</style>
<div id="wpshare247-btn-container">
<a href="#" id="wpshare247-load-more" class="button" data-currentpage="1">Xem thêm</a>
</div>
<?php //the_posts_pagination(); ?>
Sau khi thêm đoạn code trên, ta được giao diện như sau:
2.4 Tạo hàm (function) javascript để gọi Ajax
Ở đây chúng ta sử dụng Ajax của jQuery nhé, còn jQuery là gì chúng tôi sẽ giải thích rõ hơn ở những bài tiếp theo.
Cụ thể đoạn Script tôi sẽ phân nhỏ ra như sau để các bạn nắm rõ hơn nhé.
2.4.1 Sự kiện click vào nút “Xem thêm”
<script>
jQuery(document).ready(function(e) {
jQuery("#wpshare247-load-more").click(function(e) {
alert('vào đây------');
return false;
});
});
</script>
Nếu thêm đoạn Script trên vào, sau đó nhấp vào nút Xem thêm, nếu xuất hiện thông báo “vào đây——“, mọi chuyện đến đây rất tốt.
2.4.2 Khởi tạo đường dẫn Ajax trong WordPress
<script>
jQuery(document).ready(function(e) {
jQuery("#wpshare247-load-more").click(function(e) {
var wp_ajax_url = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
alert( wp_ajax_url );
return false;
});
});
</script>
Nếu nhận được thông báo trả về wp_ajax_url ajax như hình bên dưới, xem như các bước đã đúng hướng.
2.4.3 Khởi tạo action trong Ajax wordpress
Tại đây bạn chú ý, tôi sẽ tạo một action trong ajax wordpress có tên là wpshare247_action_load_more
action: "wpshare247_action_load_more"
Cụ thể như sau
<script>
jQuery(document).ready(function(e) {
jQuery("#wpshare247-load-more").click(function(e) {
var wp_ajax_url = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
jQuery.ajax({
url: wp_ajax_url,
type: 'POST',
data: {
action: "wpshare247_action_load_more",
},
dataType: 'json',
success: function(data, textStatus, jqXHR){
console.log(data); //return false;
},
error: function(jqXHR, textStatus, errorThrown){
}
});
return false;
});
});
</script>
Đừng quá bối rối trước đoạn Script quá phức tạp này nhé. Trước tiên bạn hãy làm theo hướng dẫn, bạn sẽ thấy kết quả ở các bước tiếp theo thôi.
2.5 Xử lý action ajax trong file functions.php
Để cần xử lý action này bạn cần phải mở file functions.php trong theme mình nhé
Sau khi mở file bạn thêm đoạn code sau vào file functions.php
//------------- Ajax wpshare247_action_load_more --------------------------
function wpshare247_action_load_more_display(){
header("Content-Type: application/json", true);
$arr_response = array();
//_REQUEST - 1 => Nhận dữ liệu từ Ajax Javascript
//_ACTION - 2 => Xử lý tại đây
//_RESPONSE - 3 => Trả kết quả về cho Ajax Javascript
$arr_response = array(
'res' => 'Ajax thành công !!!'
);
wp_send_json($arr_response);
die();
}
add_action( 'wp_ajax_wpshare247_action_load_more', 'wpshare247_action_load_more_display' );
add_action('wp_ajax_nopriv_wpshare247_action_load_more', 'wpshare247_action_load_more_display');
Giải thích đoạn code trên, kĩ thuật xử lý Ajax bao giờ cũng có 3 bước cơ bản, nếu bạn nắm được 3 bước này, mọi chức năng Ajax đều trở nên tầm thường.
- //_REQUEST – 1 => Nhận dữ liệu từ Ajax Javascript
- //_ACTION – 2 => Xử lý tại đây
- //_RESPONSE – 3 => Trả kết quả về cho Ajax Javascript
Thông qua hàm console.log(data); chúng ta biết được quá trình xử lý Ajax có thành công hay không. Bạn có thể kiểm tra bằng cách sau:
Ok, nếu bạn đã thấy được màn hình kết quả như trên. Chúc mừng bạn đã nắm bắt được kỉ thuật xử lý Ajax trong wordpress rồi đấy. Tuy nhiên chúng ta cần phải giải quyết nốt bài ví dụ load trang ở trên nhé.
3. Phân trang bằng Ajax trong WordPress
3.1 Ajax gửi dữ liệu
Đây là trọng tâm của bài viết ngày hôm nay. Chúng ta cùng quay lại đoạn code javascript chỗ hàm Ajax Jquery xíu nhé.
Trước tiên ta cần biết số bài viết cần tải thêm mỗi lần nhấp “Xem Thêm”, ta đặt biến này là posts_per_page và đang ở trang hiện tại là trang mấy, mặc định chưa nhấp xem thêm thì ta luôn ở trang hiện tại là 1 data-currentpage="1" ta đặt biến này current_page
Ta được đoạn code sau:
<script>
jQuery(document).ready(function(e) {
jQuery("#wpshare247-load-more").click(function(e) {
var $load_more_btn = jQuery(this);
var page = $load_more_btn.data('currentpage');
var wp_ajax_url = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
jQuery.ajax({
url: wp_ajax_url,
type: 'POST',
data: {
action: "wpshare247_action_load_more",
posts_per_page: <?php echo get_option( 'posts_per_page' ); ?>,
current_page: page
},
dataType: 'json',
success: function(data, textStatus, jqXHR){
console.log(data); //return false;
},
error: function(jqXHR, textStatus, errorThrown){
}
});
return false;
});
});
</script>
Giải thích thêm, data:{ } là dữ liệu chúng ta gửi qua để ajax nhận và xử lý. Xem bên dưới
data: {
action: "wpshare247_action_load_more",
posts_per_page: <?php echo get_option( 'posts_per_page' ); ?>,
current_page: page,
ten_ben_1 : 'giá trị biến 1 là string',
ten_ben_2 : 10, // nếu là số
.................
},
3.2 Ajax nhận dữ liệu, xử lý và trả dữ liệu
3.2.1 Ajax nhận dữ liệu
Sau khi Ajax gửi dữ liệu ở bước trên, chúng ta sẽ nhận và xử lý dữ liệu tại bước này, các bạn quay lại hàm wpshare247_action_load_more_display trong file functions.php. Bạn chú ý đoạn này nhé
$i_per_page = $_REQUEST['posts_per_page']; $i_page = $_REQUEST['current_page'];
Đoạn code đầy đủ như sau:
//------------- Ajax wpshare247_action_load_more --------------------------
function wpshare247_action_load_more_display(){
header("Content-Type: application/json", true);
$arr_response = array();
//_REQUEST - 1 => Nhận dữ liệu từ Ajax Javascript
$i_per_page = $_REQUEST['posts_per_page'];
$i_page = $_REQUEST['current_page'] + 1; // Vì xem thêm ở trang tiếp theo nên ta phải cộng thêm 1, nghĩa là trang 2
//_ACTION - 2 => Xử lý tại đây
//_RESPONSE - 3 => Trả kết quả về cho Ajax Javascript
$arr_response = array(
'res' => 'Ajax thành công !!!',
'i_per_page' => $i_per_page,
'i_page' => $i_page
);
wp_send_json($arr_response);
die();
}
add_action( 'wp_ajax_wpshare247_action_load_more', 'wpshare247_action_load_more_display' );
add_action('wp_ajax_nopriv_wpshare247_action_load_more', 'wpshare247_action_load_more_display');
Để cẩn thận bạn có thể kiểm tra lại Ajax có lỗi xảy ra hay không bằng cách mở tab console
Nếu kết quả hiện ra giống hình trên thì mọi chuyện đến đây đã đúng hướng.
3.2.2 Ajax dùng WordPress xử lý dữ liệu
Bạn cần chú ý tại bước //_ACTION - 2 => Xử lý tại đây
//------------- Ajax wpshare247_action_load_more --------------------------
function wpshare247_action_load_more_display(){
header("Content-Type: application/json", true);
$arr_response = array();
//_REQUEST - 1 => Nhận dữ liệu từ Ajax Javascript
$i_per_page = $_REQUEST['posts_per_page'];
$i_page = $_REQUEST['current_page'] + 1; // Vì xem thêm ở trang tiếp theo nên ta phải cộng thêm 1, nghĩa là trang 2
//_ACTION - 2 => Xử lý tại đây
$html = '';
$args_filter = array(
'post_type' => array('post'), // Thay bằng post_type bạn muốn
'post_status' => array('publish'),
'posts_per_page' => $i_per_page,
'paged' => $i_page,
'orderby' => 'date',
'order' => 'desc'
);
$the_query = new WP_query($args_filter);
if($the_query->have_posts()):
while ($the_query->have_posts()) : $the_query->the_post();
ob_start();
get_template_part( 'template-parts/content', get_post_format() );
$html_item = ob_get_contents();
ob_end_clean();
$html .= $html_item;
endwhile;
wp_reset_postdata();
endif;
//_RESPONSE - 3 => Trả kết quả về cho Ajax Javascript
$arr_response = array(
'res' => $html
);
wp_send_json($arr_response);
die();
}
add_action( 'wp_ajax_wpshare247_action_load_more', 'wpshare247_action_load_more_display' );
add_action('wp_ajax_nopriv_wpshare247_action_load_more', 'wpshare247_action_load_more_display');
3.2.3 Ajax trả kết quả sau xử lý
Sau khi xử lý dữ liệu xong, Ajax sẽ trả về dữ liệu, ở đây cụ thể loại dữ liệu Ajax trả về là json, bạn chú ý đoạn wp_send_json($arr_response); cụ thể biến $res là dữ liệu phân trang chúng ta đang cần 'res' => $html
3.2.4 Sử dụng dữ liệu Ajax trả về
Để hiển thị kết quả Ajax trả về, chúng ta quay lại hàm ajax bên Javascript cụ thể là jQuery, chú ý ngay đoạn code console.log(data);
<script>
jQuery(document).ready(function(e) {
jQuery("#wpshare247-load-more").click(function(e) {
var $load_more_btn = jQuery(this);
var page = $load_more_btn.data('currentpage');
var wp_ajax_url = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
jQuery.ajax({
url: wp_ajax_url,
type: 'POST',
data: {
action: "wpshare247_action_load_more",
posts_per_page: <?php echo get_option( 'posts_per_page' ); ?>,
current_page: page
},
dataType: 'json',
success: function(data, textStatus, jqXHR){
//console.log(data); //return false;
//Hiển thị dữ liệu
var html = data.res;
if(html){
jQuery("#main").append( html );
//Tăng trang hiện tại lên 1
$load_more_btn.data('currentpage', page*1 + 1);
}else{
jQuery("#wpshare247-btn-container").html('Đã hết dữ liệu để tải');
}
},
error: function(jqXHR, textStatus, errorThrown){
}
});
return false;
});
});
</script>
Như vậy đến đây chúng ta đã hoàn thành cơ bản cách dùng Ajax trong WordPress một cách cơ bản nhất rồi phải không. Tuy nhiên tôi sẽ giải thích thêm một vài điều trên đoạn code trên.
jQuery("#main")
Thẻ cha chứa dữ liệu để hiển thị bên javascript, có thể xác định như sau:
4 Tổng kết code
HTML nút “Xem thêm”
<div id="wpshare247-btn-container">
<a href="#" id="wpshare247-load-more" class="button" data-currentpage="1">Xem thêm</a>
</div>
Đoạn Ajax Javascript jQuery
<script>
jQuery(document).ready(function(e) {
jQuery("#wpshare247-load-more").click(function(e) {
var $load_more_btn = jQuery(this);
var page = $load_more_btn.data('currentpage');
var wp_ajax_url = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
jQuery.ajax({
url: wp_ajax_url,
type: 'POST',
data: {
action: "wpshare247_action_load_more",
posts_per_page: <?php echo get_option( 'posts_per_page' ); ?>,
current_page: page
},
dataType: 'json',
success: function(data, textStatus, jqXHR){
//console.log(data); //return false;
//Hiển thị dữ liệu
var html = data.res;
if(html){
jQuery("#main").append( html );
//Tăng trang hiện tại lên 1
$load_more_btn.data('currentpage', page*1 + 1);
}else{
jQuery("#wpshare247-btn-container").html('Đã hết dữ liệu để tải');
}
},
error: function(jqXHR, textStatus, errorThrown){
}
});
return false;
});
});
</script>
Hàm xử lý Ajax trong file functions.php của WordPress
//------------- Ajax wpshare247_action_load_more --------------------------
function wpshare247_action_load_more_display(){
header("Content-Type: application/json", true);
$arr_response = array();
//_REQUEST - 1 => Nhận dữ liệu từ Ajax Javascript
$i_per_page = $_REQUEST['posts_per_page'];
$i_page = $_REQUEST['current_page'] + 1; // Vì xem thêm ở trang tiếp theo nên ta phải cộng thêm 1, nghĩa là trang 2
//_ACTION - 2 => Xử lý tại đây
$html = '';
$args_filter = array(
'post_type' => array('post'), // Thay bằng post_type bạn muốn
'post_status' => array('publish'),
'posts_per_page' => $i_per_page,
'paged' => $i_page,
'orderby' => 'date',
'order' => 'desc'
);
$the_query = new WP_query($args_filter);
if($the_query->have_posts()):
while ($the_query->have_posts()) : $the_query->the_post();
ob_start();
get_template_part( 'template-parts/content', get_post_format() );
$html_item = ob_get_contents();
ob_end_clean();
$html .= $html_item;
endwhile;
wp_reset_postdata();
endif;
//_RESPONSE - 3 => Trả kết quả về cho Ajax Javascript
$arr_response = array(
'res' => $html
);
wp_send_json($arr_response);
die();
}
add_action( 'wp_ajax_wpshare247_action_load_more', 'wpshare247_action_load_more_display' );
add_action('wp_ajax_nopriv_wpshare247_action_load_more', 'wpshare247_action_load_more_display');
Nếu bài viết này không giúp bạn giải quyết được vấn đề, vui lòng để lại bình luận để chúng tôi hướng dẫn tùy vào trường hợp cụ thể mà có cách cách giải quyết khác nhau.
Dành cho các bạn thích xem VIDEO
CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%