Đếm và hiển thị số lượt xem bài viết trên WordPress

Tịnh Nguyễn 08/04/2020 78 Comments 8725 lượt xem

Dem và hien thi so luot xem bai viet tren WordPress

Trong bài này Hocban.vn chia sẻ đến các bạn cách để đếm và hiển thị số lượt xem bài viết trên WordPress mà không dùng plugin. Sau đây là nội dung chi tiết:

MỤC LỤC NỘI DUNG

1 Mục đích của việc đếm và hiển thị số lượt xem bài viết
2 Cách đếm và hiển thị số lượt xem bài viết
3 Bài viết liên quan

Mục đích của việc đếm và hiển thị số lượt xem bài viết

À cái này nếu mà bạn đã có ý định hiển thị số lượt xem bài viết thì các bạn đã có mục đích rồi. Và ở đây mình cũng nói thêm nó có lợi như thế nào:

Hiển thị số lượt xem bài viết giúp cho tác giả nhìn ngay ra được bài viết đó được bao nhiêu lượt xem, kiểu như thành tích ấy mà, khá là hứng thú.
Đối với người dùng thì những bài viết có lượt xem nhiều sẽ thu hút họ ngay cái nhìn đầu tiên, mình tin rằng với những bài viết có nhiều lượt xem thì người ta cũng sẽ muốn xem thử nó có gì hay ho mà nhiều người xem vậy. Và chính họ cũng đã đóng góp một lượt xem cho bài viết đó :v

Cách đếm và hiển thị số lượt xem bài viết

Để đếm và hiển thị số lượt xem bài viết thì các bạn lần lượt chèn đoạn code sau vào các file tương ứng như mình hướng dẫn, ở đây mình sẽ thực hiện trên theme Smartline để các bạn tham khảo.

B1: Chèn code đếm lượt xem vào cuối file function.php của theme đang sử dụng:

//CODE LAY LUOT XEM
function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "01 lượt xem";
    }
    return $count.' lượt xem';
}
 
// CODE DEM LUOT XEM
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}
  
//CODE HIEN THI SO LUOT XEM BAI VIET TRONG DASHBOARDH
add_filter('manage_posts_columns', 'posts_column_views');
add_action('manage_posts_custom_column', 'posts_custom_column_views',5,2);
function posts_column_views($defaults){
    $defaults['post_views'] = __('Views');
    return $defaults;
}
function posts_custom_column_views($column_name, $id){
    if($column_name === 'post_views'){
        echo getPostViews(get_the_ID());
    }
}
?>

B2: Các bạn dán đoạn dưới đây vào trong file single.php như hình bên dưới

<?php setPostViews(get_the_ID()); ?>

Vị trí chèn: các bạn mở file single.php ra và chèn nó gần ở mấy dòng code đầu luôn, cụ thể là chèn nó bên dưới đoạn:

<div id="wrap" class="clearfix">

Sau khi xong nó sẽ như thế này:

Code lay luot xem sau khi duoc chen trong file single.php

Code lấy lượt xem sau khi được chèn trong file single.php

B3: Chèn đoạn code sau vào vị trí bạn muốn nó hiển thị, ở đây mình sẽ cho nó hiển thị chỗ thông tin bài viết (post info). Các bạn mở file template-tags.php (wp-content/themes/smartline-lite/inc/template-tags.php)và tìm đến đoạn Display Comments.

Ngay bên dưới nó các bạn chèn đoạn code sau vào vị trí như hình mình đã làm sẵn:

<span class="luot-xem">
<?php echo getPostViews(get_the_ID()); ?> </span>

Vị trí chèn:

Chen code hien thi so luot xem trong post info

Chèn code hiển thị số lượt xem trong post info

B4: Thêm CSS cho cái hiển thị lượt xem. Bạn nào biết CSS thì chèn nó vào trong file Style.css còn nếu không thì cứ vào phần Additional CSS và dán đoạn code sau đây xuống dưới cùng nhé !

.luot-xem:before {
    content: '\f403';
	margin-right: 3px;
}
span.luot-xem {
    color: #0000ac;
}

Sau khi làm xong thì các bạn sẽ được kết quả như cái hình ở đầu bài viết ấy, lưu ý là số lượt xem bài viết nó sẽ được đếm kể từ lúc các bạn thực hiện theo hướng dẫn này. Trước đó nếu có triệu view nó cũng không có đếm đâu.

Đồng thời trong trang quản lý bài viết các bạn cũng có thêm trường thông tin về số lượt xem bài viết nữa. Trong đoạn code đầu tiên mình có ghi chú là code để hiển thị số lượt xem trong Dashboard, bạn nào không cần thì xóa đoạn đó đi là được.

Như vậy là chúng ta vừa thực hiện xong việc đếm và hiển thị số lượt xem trên WordPress mà không dùng plugin rồi đấy. Cũng không quá phức tạp nhỉ ? Và nếu bạn nào xem xong mà chưa làm được hoặc có chỗ nào thắc mắc / góp ý thì cứ để lại bình luận bên dưới nhé !

Bài viết liên quan

About The Author

Tịnh Nguyễn

Tụi mình viết, lưu trữ và chia sẻ những kiến thức, kinh nghiệm, thủ thuật về WordPress | Web Development | SEO website và Làm việc online. Kết bạn với mình qua Facebook Tịnh Nguyễn.