Hướng dẫn cài đặt và sử dụng GD Star Rating cho wordpress – Plugin dành cho wordpress giúp người dùng đánh giá bài viết, hỗ trợ tốt tính năng Rich Snippets của Google.
Giới thiệu
Như mình đã nói trên, GD Star Rating là một plugin rất tốt hỗ trợ tính năng tương tác rating và review bài viết dành cho người dùng.
Tính năng
- Chức năng đánh giá bài viết
- Tích hợp đánh giá comment
- Nhiều giao diện đẹp mắt
- Tùy biến vị trí hiển thị
- Hỗ trợ Rich Snippets dạng Review & Rating cho máy tìm kiếm
- Hệ thống quản lý rate
- Ban IP chặn spam rate.
Và còn nhiều tính năng khác.
Yêu cầu: Xài WordPress self-host (không dùng wordpress.com). Tải plugin GD Star Rating cho wordpress, bản mới nhất hiện tại là 1.9.16
Sau khi cài xong, mặc định plugin sẽ hiển thị đầy đủ tính năng của nó như đánh giá thang điểm sao, nút thích và không thích, và comment rating.
Sau khi active plugin GD Star Rating, bạn chọn vào menu GD Star Rating->settings để cấu hình thêm.
Nếu không thích thành phần nào thì bỏ chọn, ví dụ ở đây mình sẽ bỏ tính năng thumbs up/down.
Và kết quả chỉ còn đánh giá sao vàng.
Một số thiết lập cài đặt cơ bản:
Setting – Article tab: thiết lập tính năng và chế độ hiển thị cho phần Rating ở bài viết.
- Rating: chọn kiểu hiển thị, số lượng ngôi sao và kích thước của ngôi sao đánh giá.
- Auto insert rating code: chọn các trang /kiểu dữ liệu để rate hoạt động ở đó.
- Auto insert location: vị trí hiển thị của plugin, bạn có thể lựa chọn hiển thị ở trên, dưới hoặc cả hai.
- Default: cài đặt việc tương tác, mặc định là ai cũng có thể đánh giá bài viết bạn có thể giới hạn quyền đánh giá chỉ dành cho user đăng ký trên website wordpress.
Setting – Comments tab: thiết lập tương tự dành cho comments.
Các phần còn lại bạn cấu hình tương tự như thêm tính năng Vote up/down. Nhấn vô Save Setting để lưu lại các cấu hình đã thiết lập.
Thống kê tổng quan: để xem các thống kê bạn truy cập vào Gd Star Rating – My Ratings.
Quản lý IP và danh sách IP bị bạn ban thì truy cập vào menu GD Star Rating – Ip’s
Giờ chúng ta thử kiểm tra Google Rich Snippets nhé.
Fix những lỗi còn lại theo chỉ dẫn. Lưu ý: bạn cần chờ 3 tiếng để Google Update rate cho bạn. Chúc bạn thành công.
Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook
Xin chào cộng đồng Anonystick! Đây là bài viết đầu tiên của mình ở anonystick.com, có gì sai sót mong nhận được góp ý từ các bạn.
Hôm nay vô tình có task trong trong dự án liên quan đến đánh giá xếp hạng. Mình tham khảo qua thì thấy star rating (đánh giá dùng biểu tượng ngôi sao) được dùng khá phổ biến. Trước đây chắc chắn quen thuộc nhất là hệ thống đánh giá nhà hàng và khách sạn với năm sao là chất lượng cao nhất.
Khalachackeo là có sẵn nhiều plugin, library hỗ trợ sẵn để các bạn làm việc này, nhưng hôm nay với tiêu chí "HẠN CHẾ TỐI DÙNG THƯ VIỆN NGOÀI" nên trong project và cũng trong tut này mình sẽ hướng dẫn các bạn làm star rating thuần bằng html, css.
Đầu tiên để làm 1 ngôi sao riêng lẽ mình sẽ dùng 2 thẻ:
+ input[type="radio"] để chứa value người dùng chọn. Lưu ý là các ngôi sao phải cùng name mục đích đảm bảo mỗi lần rating chỉ chọn duy nhất.
+ label để làm chỗ cho icon star và làm GUI cho input[type="radio"]
Lưu ý: chúng ta phải viết css theo thứ tự 5-1 thay vì 1-5, mình sẽ làm rõ hơn về chi tiết ở phần sau.
Các bạn có thể xem DEMO tại đây: SEE DEMO
I. HTML
I.a. HTML 5 level
<div id="rating"> <input type="radio" id="star5" name="rating" value="5" /> <label class = "full" for="star5" title="Awesome - 5 stars"></label> <input type="radio" id="star4" name="rating" value="4" /> <label class = "full" for="star4" title="Pretty good - 4 stars"></label> <input type="radio" id="star3" name="rating" value="3" /> <label class = "full" for="star3" title="Meh - 3 stars"></label> <input type="radio" id="star2" name="rating" value="2" /> <label class = "full" for="star2" title="Kinda bad - 2 stars"></label> <input type="radio" id="star1" name="rating" value="1" /> <label class = "full" for="star1" title="Sucks big time - 1 star"></label> </div>
Bên trên là phần html cho phép đánh giá đơn giản chỉ 5 mức: 1-5, nếu các bạn muốn cho phép rating 10 mức: từ 0.5-5 thì chỉ việc thêm vào các group half xen kẽ với 5 group có sẵn là xong.
<div id="rating"> <input type="radio" id="star5" name="rating" value="5" /> <label class = "full" for="star5" title="Awesome - 5 stars"></label> <input type="radio" id="star4half" name="rating" value="4 and a half" /> <label class="half" for="star4half" title="Pretty good - 4.5 stars"></label> <input type="radio" id="star4" name="rating" value="4" /> <label class = "full" for="star4" title="Pretty good - 4 stars"></label> <input type="radio" id="star3half" name="rating" value="3 and a half" /> <label class="half" for="star3half" title="Meh - 3.5 stars"></label> <input type="radio" id="star3" name="rating" value="3" /> <label class = "full" for="star3" title="Meh - 3 stars"></label> <input type="radio" id="star2half" name="rating" value="2 and a half" /> <label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label> <input type="radio" id="star2" name="rating" value="2" /> <label class = "full" for="star2" title="Kinda bad - 2 stars"></label> <input type="radio" id="star1half" name="rating" value="1 and a half" /> <label class="half" for="star1half" title="Meh - 1.5 stars"></label> <input type="radio" id="star1" name="rating" value="1" /> <label class = "full" for="star1" title="Sucks big time - 1 star"></label> <input type="radio" id="starhalf" name="rating" value="half" /> <label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label> </div>
Xong phần `html`, đến phần theo mình là quan trọng nhất trong tut, `CSS` để các bạn dễ dàng bám sát mình sẽ thêm trực tiếp comment vào những đoạn css quan trọng. Trước tiên cho dễ hình dung mình sẽ nói sơ về kỹ thuật css trong tut này, mình có dùng 2 selector css hơi lạ có thể các bạn không thường thấy:
+ Next siblings (dùng dấu +): secletor này sẽ giúp chúng ta lấy 1 thẻ tiếp theo ngay sau thẻ được chọn. Để hiểu rõ về next siblings các bạn có thể tham khảo thêm ở đây
+ All next siblings (dùng dấu ~): selector này có thể xem là mở rộng của next siblings, giúp chúng ta lấy tất cả thẻ cùng cấp được chỉ định tiếp theo thẻ được chọn. Thông tin thêm của All next siblings các bạn tham khảo ở đây
CSS hoàn toàn không có selector cho previous siblings, đây cũng là lý do để chúng ta lật ngược lại html như mình đã đề cập ở trên.