Đếm lượt views bài viết trong wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Đếm lượt views bài viết trong wordpress

Không thể lắc đầu sự ra đời của dịch vụ lưu giữ dữ liệu thời gian thực Firebase, nó đem lại giá trị khá to lớn giúp bạn thêm tính năng hình như không tưởng cho những blogs miễn phí (wordpress.com, blogger.com…) và self-hosting.
Trước đây, để tạo phần mềm thời gian thực bạn cần mất công cài đặt Nodejs lên VPS, với những ai sử dụng hosting thì không giúp cài ứng dụng lên server. Tuy nhiên việc cài phần mềm thứ 3 lên VPS gặp ít nhiều khó khăn, với những người không rành về kỹ thuật host. Cần kiến thức quản trị hệ điều hành windows hay Linux.
Trong blog này tôi cũng đã có bài chỉ dẫn cài đặt Node.js và socket.io lên heroku server, một dịch vụ VPS miễn phí.
Cũng giống như VPS bạn mua, với heroku sẽ cho bạn đăng ký tài khoản VPS miễn phí và có trả phí nếu nhu cầu sử dụng tài nguyên lớn hoặc bổ trợ đầy đặn tính năng của một VPS trả phí. Sau khi tạo một tài khoản heroku miễn phí, bạn có thể bắt đầu tạo phần mềm mới và cài đặt các ứng dụng bên thứ 3 như web server, nodejs..
Với Heroku bạn cũng có thể làm được mọi thứ, nhưng cũng sẽ gặp những lỗi trong quá trình vận hành. Bạn phải theo dấu hoạt động của phần mềm trên heroku để đảm bảo nó chạy ổn định.

Tuy nhiên trong bài hôm nay mình không lên tiếng về heroku, mình sẽ sử dụng Firebase để tạo ứng dụng xem lượt views cho bài viết một cách đơn giản hơn rất nhiều.
Điểm lợi:

  • Không yêu cầu cài đặt phần mềm thứ 3
  • Dịch vụ ổn định
  • Quản trị dữ liệu mau chóng với tốc độ thời gian thực.

Trước khi bắt đầu, nhìn qua bài Sử dụng firebase API với javascript.

Giải thích

Chúng ta cần đếm số lượt views cho mỗi URL của website, mỗi một trang có địa điểm URL không trùng lặp dựa vào thông số này để đặt firebase location.
Khi nạp trang xong, nếu là trang mới chưa thiết lập views vào firebase data thì cho thêm mới. Dữ liệu có thể gồm tin tức về page như sau:
{
id:”page slug hoặc id nhận dạng của page lấy trên tham số URL.”,
url: “địa chỉ URL của trang”,
value: “số views của trang này”
}
Ví dụ:
count-views-firebase

Nếu tiếp tục đếm lượt xem cho trang cũ, thì +1 views vào giá trị value cho đối tượng json phía trên của dữ liệu trang URL đó.

Code đếm lượt views cho bài viết

Bước 1: Chèn thư viện Firebase js vào trong thẻ head.

   

Bước 2: Tạo đối tượng Firebase cho location tương ứng với URL của page hiện tại.

 var blogStats = new Firebase('https://your-db.firebaseio.com/pages/id/  ');  

Lấy thông tin dữ liệu của URL lưu trên location theo cấu trúc JSON mình phác thảo ở trên, bởi sự kiện value .

 blogStats.once('value', function(snapshot) { var data = snapshot.val(); .... });  

Kiểm tra nếu dữ liệu trả về trống, nghĩa là page lần trước mắt ghi vào firebase, bạn thiết lập giá trị views khởi đầu “0” cho nó. Và tăng thêm 1 view và thêm mới/cập nhật dữ liệu cho page. Xem đoạn code dưới đây.

 var blogStats = new Firebase('https://your-db.firebaseio.com/pages/id/  '); blogStats.once('value', function(snapshot) { var data = snapshot.val(); var isnew = false; if(data == null) { data= {}; data.value = 0; data.url = window.location.href; data.id = 'page1'; isnew = true; } $('#views').removeClass('mbtloading').text(data.value); data.value++; if(window.location.pathname!='/') { if(isnew) blogStats.set(data); else blogStats.child('value').set(data.value); } });  

Hiển thị số lượng lượt xem cho bài viết vào HTML #views . Do lấy dữ liệu động nên lúc đầu bạn cũng có thể có thể cho hiển thị ảnh trạng thái loading..cho #views với >

Hiển thị lượt views cho mỗi bài viết wordpress

Tùy vào thiết kế theme và sử dụng theme framework trong wordpress của bạn mà cách cài đặt sẽ khác nhau. Trong bài viết này mình lấy genesis làm thí dụ mẫu.
Chúng ta sẽ cho hiển thị lượt views của bài viết trong bản kê liệt kê posts và bài viết chi tiết, nhưng chỉ thêm nữa đó views khi người dùng xem bài viết tức ở template single.php

Đầu tiên bạn tạo thẻ html hiển thị số lượng views cho từng bài viết, bằng cách can thiệp vào phần genesis_post_info . Xem hướng dẫn chi tiết cách tùy chỉnh post info trong genesis.
Đưa nội dung hiển thị views vào shortcode. Ví dụ:

 add_filter( 'genesis_post_info', 'post_info_filter' ); function post_info_filter($post_info) { return $post_info.''; }  

Tạo shortcode postviews trong functions.php với nội dung sau:

 add_shortcode('postviews','hw_sc_postviews'); function hw_sc_postviews(){ global $post; return ''; }  

Theo thiết kế trong genesis framework, chức năng post info chứa tin tức của post như ngày tháng đăng bài, người sáng tác bài viết, số bình luận…và được đặt vào trong vòng lặp lấy các dữ liệu posts. Do đó, chúng ta sẽ lấy ID của mỗi bài viết $post-> ID làm căn cứ để xác định firebase location của bài viết nơi lưu trữ dữ liệu views cho từng bài viết đó.
Ví dụ Firebase location của post cũng có thể có thể lấy địa chỉ: https://your-db.firebaseio.com/posts/id/post-{ID}
Trong đó {ID} là chỉ số bài viết.
Chép đoạn code lấy và thiết lập post views trong theme functions.php

        

Mỗi thẻ chứa số views của bài viết có xác định firebase location thông qua thuộc tính id của tag A với . Để khỏi bị giật mình sử dụng CSS thêm ảnh loading chờ trước khi dữ liệu views được lấy.

 .preloading { background: url(images/loading-oval.GIF) no-repeat 0px 4px; width: 14px; height:14px; display: inline-block; margin-left:10px; }  

Download: loading-oval.GIF.
Sau khi firebase location của bài viết trả về dữ liệu, chúng ta xóa class "preloading" và thêm thay class mới "post-views" .

 .post-views{ background: url('images/icon_social_views.png') no-repeat 1px 2px; width: 40px; display: inline-block; padding-left:20px; margin-left: 10px; }  

Download: icon_social_views.png
Chú ý: Chỉ nên đếm thêm lượt view khi người dùng đọc nội dung bài viết.

    data.value++; if(window.location.pathname!='/') { if(isnew) blogStats.set(data); else blogStats.child('value').set(data.value); }     

Kết quả:
count-views-wp
Tác giả: hoangweb.com

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và hãy nhớ chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng cũng có thể có thể theo dõi blog này trên Twitter và Facebook

Bài viết Đếm lượt views bài viết trong wordpress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang