Người Viết : ViKiMi Editor

Thực hiện tạo chức năng Like Bài Viết WordPress, sử dụng jQuery AJAX và jSON data
Bạn có muốn thực hiện một trang nội dung hiển thị bài Post cùng với tính năng Like. Tính năng Like cho phép bạn biết và đánh giá những phản hồi từ phía khách truy cập. Trong phần này sẽ đề cập đến một thiết kế cho phép bạn tạo một Chức Năng Like, thông qua nó khách truy cập sẽ cho bạn biết đánh giá của họ về nội dung bạn cung cấp.
Chức năng Like tạo ra sẽ đếm số lượng Like từ phía Khách truy cập.
Chức năng năng này chỉ thực hiện lưu trữ số lượng Like từ phía Người dùng vào Cơ Sở Dữ Liệu của Website. Chức năng được tạo bằng jQuery AJAX và sử dụng jSON data. Một chức năng vô cùng hiệu quả và tốt cho một Website.
Để thực hiện Chức năng Like chúng ta có các bước sau:
BƯỚC 1 : Tại file Content.php của WordPress, thực hiện tạo hiển thị số lượng Like và Button cho khách truy cập có thể Like nội dung bài Đăng yêu thích.
Chúng ta có phần xử lý như sau :
<?php $postlikes = get_post_meta($post->ID, "postlikes", true); $postlikes = ($postlikes == "") ? 0 : $postlikes; ?> Số lượt <span id='like_counter'><?php echo $postlikes ?></span> likes<br> <?php $security_post = wp_create_nonce("security_post"); $link = admin_url('admin-ajax.php?action=my_user_like&post_id='. $post->ID . '&nonce=' . $security_post); echo '<a class="user_like" data-nonce="' . $security_post . '" data-post_id="' . $post->ID . '" href="' . $link . '">Like Bài Viết</a>'; ?>
Ở đây chúng ta có 2 xử lý chính :
+ Hiển thị số lượng Likes
+ Cung cấp cho Người Dùng một chức năng Like Bài Viết. Nếu Người dùng Like Bài Viết thì sẽ thực hiện gọi jQuery Ajax
BƯỚC 2 : Đăng kí File jQuery chứa xử lý jQuery AJAX
Chúng ta sẽ đăng kí tại file function.php của chủ đề / theme mà bạn đang kích hoạt. Việc này sẽ cho phép bạn tích hợp xử lý Ajax và WordPress.
function postlikes_scripts() { // Register the script wp_register_script( 'postlikes-script', get_stylesheet_directory_uri(). '/js/postlikes.js', array('jquery'), false, true ); // Localize the script with new data $script_data_array = array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), ); wp_localize_script( 'postlikes-script', 'blog', $script_data_array ); // Enqueued script with localized data. wp_enqueue_script( 'postlikes-script' ); } add_action( 'wp_enqueue_scripts', 'postlikes_scripts' );
Công việc này có quan trọng hay không? Câu trả lời là rất quan trọng đối với bạn. Nó cho phép bạn đăng kí một file jQuery và yên tâm Website sẽ được bảo vệ tốt hơn. Và dựa vào đăng kí này chúng ta cũng có thể truyền những thông tin quan trọng cần thiết từ WordPress tới file jQuery.
Ở đây, chúng ta đã thực hiện truyền 1 biến chứa thông tin là :
Ajaxurl : Chúng ta sẽ thực hiện gọi đường dẫn url trong WordPress, cụ thể là gọi tới file admin – ajax .php, để thực hiện các yêu cầu xử lý
BƯỚC 3 : Thực hiện xử lý jQuery AJAX tại file postlikes.js
Đây là File cho phép thực hiện xử lý của chức năng Like bằng ajax. Và tại sao nó quan trọng? Bởi vì nó cho phép người dùng Like bài Viết mà không cần Load lại toàn bộ nội dung trang hiện tại.
jQuery(document).ready( function() {
jQuery(".user_like").click( function(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
jQuery.ajax({
type : "post",
dataType : "json",
url : blog.ajaxurl,
data : {action: "my_user_like", post_id : post_id, nonce: nonce},
success: function(response) {
var json = $.parseJSON(response);
if(json.type == "success") {
jQuery("#like_counter").html(json.like_count);
}
else {
alert("Lượt Like của bạn chưa được thêm vào");
}
}
});
});
});
BƯỚC 4 : Thực hiện xử lý action my_user_like và đăng kí
Khi jQuery Ajax thực hiện Call Action thì phần xử lý Action này sẽ được thực hiện. Và nội dung Code này sẽ đặt tại function.php
<?php
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "please_login");
// Nếu Người Dùng Chưa Login thì hãy yêu cầu Login; Hoặc cũng có thể tuỳ chỉnh để cho phép người dùng vẫn có thể Like dù chưa Login
// Đơn giản hãy thay thế bằng :
// add_action("wp_ajax_nopriv_my_user_like", "my_user_like");
function my_user_like() {
// Kiểm tra tính bảo mật thông tin trước khi cập nhật dữ liệu
if ( !wp_verify_nonce( $_REQUEST['nonce'], "security_post")) {
exit("Thoát");
}
// Lấy số lượng Post likes hiện tại
$like_count = get_post_meta($_REQUEST["post_id"], "postlikes", true);
$like_count = ($like_count == ‘’) ? 0 : $like_count;
$new_like_count = $like_count + 1;
// Cập nhật số lượng post likes
$like = update_post_meta($_REQUEST["post_id"], "postlikes", $new_like_count);
// TRả về dữ liệu cho xử lý Ajax
if($like === false) {
$result['type'] = "error";
$result['like_count'] = $like_count;
}
else {
$result['type'] = "success";
$result['like_count'] = $new_like_count;
}
// Kiểm tra xem Action có được thực hiện bằng Ajax không ?
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$result = json_encode($result);
echo $result;
}
else {
header("Location: ".$_SERVER["HTTP_REFERER"]);
}
die();
}
// define the function to be fired for logged out users
function please_login() {
echo "Hãy thực hiện Login";
die();
}
Như vậy đã cung cấp một chức năng Like bài Viết và tất cả thông tin Like của bài Viết sẽ đều được lưu trữ tại Database. Đây là một chức năng khá hấp dẫn cho phép bạn tăng khả năng quảng bá Website khi đánh giá được số lượt thích từ khách truy cập. Chức năng này là một chức năng nội bộ của Website, do đó bạn cũng dễ thực hiện theo ý đồ.