HƯỚNG DẪN TỰ THÊM CODE CHỨC NĂNG ĐẾM LƯỢT XEM VÀ TOP BÀI XEM NHIỀU TRÊN WEBSITE Trong thời gian qua có nhiều bạn thắc mắc thêm chức năng tự đếm lượt xem bài viết , kiểu như xem một lần
Trang 1HƯỚNG DẪN TỰ THÊM CODE CHỨC NĂNG ĐẾM LƯỢT
XEM VÀ TOP BÀI XEM NHIỀU TRÊN WEBSITE
Trong thời gian qua có nhiều bạn thắc mắc thêm chức năng tự đếm lượt xem bài viết ,
kiểu như xem một lần thì lượt xem sẽ tăng lên một giá trị, và kết hợp với cái chức năng
đếm lượt xem đó để làm tính năng widget hiển thị bài viết xem nhiều Cái vấn đề mà
mình thường thấy ở đây là có nhiều bạn tìm được plugin nhưng lại không có đủ chức
năng cần, mà plugin có đủ tính năng thì lại hoạt động không tốt, không như ý muốn
Vậy thì ở bài này, mình sẽ hướng dẫn bạn tự viết một plugin có chức năng đếm lượt
xem cho post hoặc bất cứ cái gì, đồng thời hướng dẫn luôn cách viết code tạo widget
hiển thị post nhiều trong tuần, tháng hoặc bao nhiêu ngày tùy ý bạn
Tổng quan kỹ thuật
Ở bài hướng dẫn này, chúng ta sẽ làm việc với hai tính năng khá quan trọng và cũng rất
thú vị trong WordPress đó là Custom Post Field để tạo khóa (meta key) chứa dữ liệu
lượt xem (meta data) cho mỗi bài và tính năng tạo widget để làm cái widget hiển thị
danh sách các bài theo thứ tự từ được xem nhiều đến thấp, kèm theo thumbnail và số
lượt view nếu thích
Sở dĩ ở đây chúng ta nên sử dụng Custom Post Field cho chức năng đếm lượt xem là
vì con số lượt xem chúng ta có thể hiểu rằng nó là một dữ liệu thêm vào của mỗi bài
viết, mà trong WordPress thì đã có Custom Post Field có nhiệm vụ cho phép chúng ta
tạo ra những cái khóa (key) tùy ý và mỗi khóa đều sẽ có giá trị riêng của nó Vậy thì việc
sử dụng Custom Post Field để tạo ra một khóa riêng để xác định và sử dụng giá trị của
nó như là con số lượt xem là điều hợp lý nhất và rút ngắn thời gian triển khai vì chỉ cần
vài dòng code là được
Trang 2Còn đối với tính năng tạo widget hiển thị danh sách các bài xem nhiều thì chắc chắn sẽ
sử dụng Query & Loop để liệt kê các bài viết xem nhiều ra rồi Nhưng làm sao để lấy
được các bài được xem nhiều, và làm sao lấy dữ liệu đó trong khoảng thời gian nhất
định (7 ngày chẳng hạn)? May mắn thay, WordPress cho phép chúng ta tạo query
và lấy dữ liệu dựa theo meta key (khóa của Custom Post Field) và chúng ta có thể sắp
xếp lại kiểu dữ liệu này theo hướng giảm dần trong giá trị, thành ra chúng ta sẽ có danh
sách các bài viết xem nhiều nhất
Hướng dẫn chi tiết
1 Thiết lập plugin
Bước này quá dễ dàng rồi, chúng ta sẽ tạo một thư mục tên là topview trong thư
mục /wp-content/plugins để chứa plugin, và trong thư mục này sẽ có 2 file tên
là plugins.php và styles.css như hình dưới
Và trong file plugins.php ta có vài đoạn khai báo thông tin cho plugin như sau:
<?php
Trang 3/*
Plugin Name: PostView
Plugin Author: ThachPham
Description: Plugin đếm lượt xem bài viết và hiển thị top bài xem nhiều
Version: 1.0
Author URI: http://thachpham.com
*/
Tí nữa chúng ta sẽ viết code vào phía bên dưới Bây giờ hãy tạm thời vào Plugins ->
Installed Plugins và kích hoạt nó lên đi
2 Viết code đếm lượt view
Code đếm lượt view ở đây khá ngắn gọn vì nó là tính năng đơn giản mà, chỉ có các
Trang 4Trong code này, chúng ta sẽ tạo ra một hàm tên là postview_set() với ý nghĩa cụ thể là:
Dòng số 02 – 03 : Thiết lập biến riêng để kiểm tra dữ liệu trong meta key,
cái $count_key nghĩa là thiết lập tên metakey được lưu trong table wp_postmeta
Lưu ý là sau này nếu bạn đổi cái tên key này, tất cả giá trị sẽ được reset lại
Dòng số 04 – 08 : Kiểm tra xem cái meta key postview_number có dữ liệu chưa,
nếu dữ liệu của nó là rỗng thì sẽ tiến hành tạo mới cho nó một meta key với
tên postview_number ở trên Đồng thời đưa biến $count về giá trị là0
Dòng số 08 – 11 : Nếu meta key postview_number đã có dữ liệu (phủ định của việc
không có dữ liệu thì nghĩa là đã có dữ liệu chứ còn gì) thì biến $count sẽ được
tăng thêm một giá trị
Vậy thì hàm này sẽ thực thi thế nào? Để hàm này chạy được, bạn phải đặt code sau
vào file single.php trong theme đang sử dụng, và phải chèn nằm trong loop (trong
cặp while ):
<?php postview_set(get_the_ID()); ?>
Trang 5Nghĩa là mỗi khi khách truy cập vào website thì hàm này sẽ được lặp lại một lần nữa và
cập nhật vào database, cứ như thế, như thế sau mỗi lần khách truy cập, đó là lý do tại
sao nếu website bạn đông lượt truy cập thì có thể tính năng này sẽ chiếm khá nhiều tài
nguyên vì sửa dữ liệu liên tục
3 Viết code hiển thị lượt xem
Ở code trên chúng ta chỉ tiến hành viết code cho việc cập nhật lượt xem thôi chứ chưa
hiển thị ra, nếu bạn có nhu cầu hiển thị lượt xem ra trang nội dung bài viết thì chèn thêm
đoạn sau vào file plugins.php
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
Đoạn code này cũng tương tự như code đếm lượt xem thôi, chỉ khác một cái là nó
return thêm biến $count ra ngoài để hiển thị giá trị của meta key postview_number, tức là
lượt xem Sau đó bạn chèn đoạn sau vào file single.php ở vị trí cần hiển thị lượt xem,
dĩ nhiên là phải đặt trong cặp while:
Trang 6<?php echo postview_get(get_the_ID()); ?>
Tất nhiên bạn có thể chèn ở vị trí nào nếu thích trong cặp while vì mỗi theme có cấu trúc
khác nhau và ý mỗi người mỗi khác nên mình không thể chỉ ra vị trí cụ thể để chèn
được Nhưng đẹp nhất là chèn kế bên các đoạn code hiển thị lượt bình luận, category,
tên tác giả Nếu bạn thấy file single.php của bạn có
đoạn get_template_part('content', ) thì cứ tìm file content.php và content-xxx.php
trong theme rồi chèn code vào tất cả file đó cũng được
Kết quả sau khi chèn:
Trang 7Lưu ý khi dùng các plugin tạo cache cho website như WP Super Cache , W3 Total
Cache thì nó sẽ hiển thị lượt xem không chính xác và hàm này cũng vô tác dụng Lý do
là cache sẽ được lưu dưới dạng file tĩnh html nên giá trị sẽ không thay đổi khi họ truy
cập cho đến khi cache được xóa Nhưng database cache và object cache thì vẫn làm
việc, mình test thì thấy như vậy còn đối với bạn thế nào thì không chắc chắn lắm
4 Viết widget hiển thị bài xem nhiều
Trước hết, để hiểu hết toàn bộ code nếu bạn chưa biết thì nên đọc qua hai bài này:
Hướng dẫn Query & Loop trong WordPress toàn tập
Hướng dẫn tạo widget trong 6 bước
Và code tạo widget hiển thị bài được xem nhiều ta sẽ có như sau, chèn vào
file plugins.php luôn nhé:
Trang 8/* Tạo widget hiển thị bài xem nhiều
* @tham khảo tại http://bit.ly/1tY8TFn
*/
function create_topview_widget() {
register_widget( 'TopView_Widget' );
}
add_action( 'widgets_init', 'create_topview_widget' );
class TopView_Widget extends WP_Widget {
* Tạo form điền tham số cho widget
* ở đây ta có 3 form là title, postnum (số lượng bài) và postdate (tuổi của bài
*/
function form($instance) {
Trang 9$instance = wp_parse_args( (array) $instance, $default );
$title = esc_attr( $instance['title'] );
$postnum = esc_attr( $instance['postnum'] );
$postdate = esc_attr( $instance['postdate'] );
echo "<label>Độ tuổi của bài viết (ngày)</label> <input class='widefat'
type='number' name='".$this->get_field_name('postdate')."' value='".$postdate."' />";
Trang 10
function widget($args, $instance) {
global $postdate; // Thiết lập biến $postdate là biến toàn cục để dùng ở hàm
* Cách lấy bài viết theo độ tuổi (-30 days = lấy bài được 30 ngày tuổi)
* @tham khảo tại http://bit.ly/1y7WXFp
*/
function filter_where( $where = '' ) {
global $postdate;
Trang 11$where = " AND post_date > '" date('Y-m-d', strtotime('-'.$postdate.'
Trang 12Và bây giờ bạn vào Appearance -> Widget và kéo widget tên Top View vào sidebar và
đặt tùy chọn cho nó là xong
Nếu bạn đang sử dụng plugin WP-PostViews và muốn sử dụng widget này cho plugin
đó thì chỉ việc đổi 'meta_key' => 'postview_number' thành 'meta_key' => 'views'
5 Thêm CSS cho widget
Trang 13Để widget mặc định thì nó chuối quá, ở đây mình có 1 vài đoạn CSS ngắn để bạn làm
cái widget top bài xem nhiều nó có cái gì đó đặc biệt hơn một xíu Tuy nhiên do chỉ là
demo nên mình chẳng có làm gì nhiều ngoài việc đánh số thứ tự ho danh sách bài cả,
do đó hãy tự viết thêm CSS nếu cần
Chèn đoạn sau vào file styles.css
Trang 14wp_register_style( 'topview-css', plugins_url( 'styles.css', FILE ) ,
false, false, 'all' );
wp_enqueue_style( 'topview-css' );
}
add_action( 'wp_enqueue_scripts', 'custom_styles' );
Bây giờ ta tạm có kết quả:
Trang 15Vậy là xong bài rồi đấy
6 Toàn bộ code trong bài
File plugins.php
<?php
/*
Plugin Name: PostView
Plugin Author: ThachPham
Description: Plugin đếm lượt xem bài viết và hiển thị top bài xem nhiều
Trang 17/* Tạo widget hiển thị bài xem nhiều
* @tham khảo tại http://bit.ly/1tY8TFn
*/
function create_topview_widget() {
register_widget( 'TopView_Widget' );
}
add_action( 'widgets_init', 'create_topview_widget' );
class TopView_Widget extends WP_Widget {
* Tạo form điền tham số cho widget
* ở đây ta có 3 form là title, postnum (số lượng bài) và postdate (tuổi của bài
*/
function form($instance) {
Trang 18$instance = wp_parse_args( (array) $instance, $default );
$title = esc_attr( $instance['title'] );
$postnum = esc_attr( $instance['postnum'] );
$postdate = esc_attr( $instance['postdate'] );
echo "<label>Độ tuổi của bài viết (ngày)</label> <input class='widefat'
type='number' name='".$this->get_field_name('postdate')."' value='".$postdate."' />";
Trang 19
function widget($args, $instance) {
global $postdate; // Thiết lập biến $postdate là biến toàn cục để dùng ở hàm
* Cách lấy bài viết theo độ tuổi (-30 days = lấy bài được 30 ngày tuổi)
* @tham khảo tại http://bit.ly/1y7WXFp
*/
function filter_where( $where = '' ) {
global $postdate;
Trang 20$where = " AND post_date > '" date('Y-m-d', strtotime('-'.$postdate.'
Trang 21wp_register_style( 'topview-css', plugins_url( 'styles.css', FILE ) ,
false, false, 'all' );
Trang 22Giải pháp đếm view và tương thích với cache
Trong bài này mình chỉ hướng dẫn bạn làm tính năng đếm view đơn giản nên nó sẽ
không thể tương thích với cache vì lý do mình đã giải thích trong bài rồi Nhưng mình
nghĩ có một giải pháp khác có thể làm cái đếm view này rất tốt và tương thích với cache
đó là sử dụng AJAX để sửa đổi giá trị meta key và sử dụng AJAX để lấy dữ liệu trong
database để hiển thị ra ngoài
Lý do sử dụng AJAX có thể tương thích với cache đó là dù trang bạn có cache hay
không có cache thì các file Javascript vẫn xử lý bình thường, do vậy việc sử dụng AJAX
Trang 23bạn có thể hiểu là nó sẽ chỉ lấy dữ liệu ra sau khi trang được tải xong nên việc có cache
hay không đều không quan trọng Nhưng còn cụ thể thế nào thì mình sẽ test nhiều hơn
rồi viết hướng dẫn sau
Lời kết
Bài tới đây có vẻ cũng dài rồi, và hy vọng với cách giải thích của mình bạn có thể hiểu
được tính năng này làm việc như thế nào và quan trọng nhất là cách xây dựng bộ tính
năng này Bài vẫn còn cơ bản nên sẽ còn nghèo ý tưởng, nếu bạn có thêm ý tưởng nào
để phát triển code tối ưu hơn thì hãy chia sẻ thêm cho mình ở phần bình luận nhé
Nguồn: thachpham.com