Tạo nút like bài viết theo phong cách của riêng bạn
Cơ bản về like post
Chắc chắn bạn đã quá quen thuộc với nút like( Facbook). Đó chình là một hình thức phản hồi hoặc thích một bài viết nào đó. Nó mang lại rất nhiều lới ích cho những người dùng tiếp sau bạn và bạn đang muốn có nút like trên chính website wordpress của mình.
Bài viết dưới đây mình sẽ hướng dẫn một cách chi tiết cách tạo nút like bài viết theo phong cách của riêng bạn lên chính website của mình mà không cần bất cứ một plugin nào.
Tích hợp like post vào website wordpress
Đầu tiên bạn phải biết chính xác theme của bạn đang xử dụng là gì (Appearance -> Themes). Sử dụng Editor mặc định của wordpress hoặc một phần mềm bất kỳ để thay đổi file function.php, style.css, thêm file likepost.js của theme hiện tại. Trong bài viết này mình sử dụng theme mặc định của wordpress (twentyfourteen).
Mình sẽ bắt đầu từ style.css. Hãy thêm đoạn code dưới đây vào file style.css của theme.
Thêm CSS và style.css
a.likepost:before {
-webkit-font-smoothing: antialiased;
display: inline-block;
font: normal 16px/1 Genericons;
text-decoration: inherit;
vertical-align: text-bottom;
content: "\f221";
}
Xử lý bằng jquery và ajax
Trong bài viết này bạn cần một chút kiến thức về ajax tham khảo bài viết này để có thêm thông tin. Việc tiếp theo là tạo một file likepost.js trong thư mục js của theme và lưu đoạn code js bên dưới
Giải quyết: với jQuery chúng ta sẽ bắt sự kiện khi click vào link like post. Chúng ta sẽ lấy giá trị ID hiện tại của bài post và sau đó dùng ajax để gửi ID lên server. Sau khi nhận được kết quả trả về sẽ thay đổi giá trị vừa được trả về từ server.
( function( $ ) {
$( document ).ready( function() {
$('.likepost').click(function(e){
e.preventDefault();
// Khai báo biến objPost để thực hiện nhiều về sau.
var objPost = $(this);
// Kiểm tra class like. Nếu đã liked thì thoát.
if(objPost.hasClass('liked')) return false;
// Dữ liệu muốn đưa lên để xử lý ajax.
var data = {
action: 'fronted_likepost',
security : ajax_likepost.security,
post_id: objPost.data('id')
};
// Bắt đầu xử lý ajax với kiểu dữ liệu là json
$.post(ajax_likepost.ajaxurl, data, function(response) {
/**
Thay đổi số like vào thẻ a.
Thêm class liked để biết rằng người dùng đã like bài viết và không thực hiện like nữa.
Thay đổi title cho thẻ a.
*/
objPost
.text(response.count)
.addClass('liked')
.attr('title', objPost.data('already'));
}, 'json');
});
});
} )( jQuery );
Xử lý PHP
Mở file function.php của theme và xử dụng đoạn code bên dưới.
Đầu tiên là gọi file javascript ra bên ngoài frontend, khai báo đường dẫn ajax và mã bảo mật cho việc thực hiện ajax.
add_action('wp_enqueue_scripts', 'themedev_scripts_styles', 100);
/**
* Gọi file likepost.js javascript và khai báo ajaxurl ajax
*
*/
function themedev_scripts_styles() {
// Gọi file js bên ngoài frontend
wp_enqueue_script( 'likepost', get_template_directory_uri() . '/js/likepost.js', array( 'jquery' ), '1.0', true );
/**
* Khai báo đường dẫn URL ajax và mã bảo mật cho wordpress.
* Nếu mã bảo mật không dúng thì ajax trong function sẽ không thực hiện.
*
*/
wp_localize_script( 'likepost', 'ajax_likepost', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'ajax_likepost' )
));
}
Tiếp theo chúng ta sẽ viết function lấy like của post. Trong đó function có các tham số $before và $after để có thể dễ dàng thay đổi cấu trúc HTML bên ngoài.
/**
* Hàm like post lấy like của post
*
* @param string $before Tùy chọn chọn. Hiện thị trước like link.
* @param string $after Tùy chọn. Hiện thị sau link.
* @param int|WP_Post $post_id Tùy chọn. Post ID hoặc post object. Mặc định là post hiện tại.
*/
function like_post( $before = '', $after = '', $post_id = null ) {
global $post;
if(!$post_id){ $post_id = $post->ID; }
// Lấy số like hiện tại của post.
$like_count = get_post_meta($post_id, '_like_post', true);
// Nếu không tồn tại like thì gán bằng 0.
if( !$like_count ){
$like_count = 0;
add_post_meta($post_id, '_like_post', $like_count, true);
}
// Đầu tiên gán class và tile mặc định là chưa like
$class = 'likepost';
$title = __('Like this post', 'twentyfourteen');
$already = __('You already like this!', 'twentyfourteen');
// Nếu tồn tại cookie ( đã like) gán lại class và title
if( isset($_COOKIE['like_post_'. $post_id]) ){
$class .= ' liked';
$title = $already;
}
// Link của like post
$output = "<a data-id='$post_id' data-already='$already' class='$class' href='".get_the_permalink($post_id)."#$post_id' title='$title'>$like_count</a>";
//Trả về kết quả
echo $before . $output . $after;
}
Cuối cùng là function xử lý ajax khi người dùng click vào link like post.
// Function ajax được gửi với người dùng đã đang nhập
add_action( 'wp_ajax_fronted_likepost', 'wp_ajax_fronted_likepost_callback' );
// Function ajax được gửi với người dùng chưa đang nhập
add_action( 'wp_ajax_nopriv_fronted_likepost', 'wp_ajax_fronted_likepost_callback' );
/**
* Function xử lý ajax likepost cho frontend.
*
*/
function wp_ajax_fronted_likepost_callback() {
// Kiểm tra có đúng mã bảo mật hay không.
check_ajax_referer( 'ajax_likepost', 'security' );
//Nếu không tồn tại submit của $post_id hoặc $post_id có không phải là số thì thoát khỏi function.
if(!isset($_POST['post_id']) || !is_numeric($_POST['post_id'])) return;
$post_id = $_POST['post_id'];
$output = array();
//Lấy giá trị like của post trong post_meta.
$like_count = get_post_meta($post_id, '_like_post', true);
/**
* Kiểm tra cookie của người dùng,
* Nếu cookie của bài post không tồn tại thì tăng like và update vào post_meta
* Và gán cookie bài post để không like lần nữa
*
*/
if( !isset($_COOKIE['like_post_'. $post_id]) ){
$like_count++;
update_post_meta($post_id, '_like_post', $like_count);
setcookie('like_post_'. $post_id, $post_id, time()*20, '/');
}
$output['count'] = $like_count;
//Dùng hàm json_encode để chuyển mảng $output thành chuỗi JSON
echo json_encode($output);
//Kết thúc trả về dữ liệu và stop không cho chạy tiếp
die();
}
Cách sử dụng
Bạn có thể đặt bất kỳ chỗ bài viết. Hiện tại mình đang xử dụng theme mặc định của wordpress (twentyfourteen). Vì vậy mình sẽ xử dụng trong file content.php
<?php like_post('<span>','</span>');?>