Cách thêm đánh giá sao vào WordPress trong backend

Đánh giá sao hay star rating hẳn rất quen thuộc với người dùng Internet. Ngoài việc người dùng có thể cho điểm sao, viết review một sản phẩm mà họ mua trên website bán hàng, các đánh giá sao này còn xuất hiện ở những trang web chuyên review sản phẩm. Những reviewer trên các trang web đó sẽ cho điểm sản phẩm dựa trên trải nghiệm và nhận xét của bản thân, ví dụ như trang review theme này. Để chủ website thêm các star rating, bạn có thể sử dụng custom field và tạo một plugin để thêm đánh giá sao. Đó chính là nội dung của bài hướng dẫn hôm nay.

Trước hết, các bạn cần tải và cài đặt plugin Meta Box – một framework để tạo custom field. Plugin lõi Meta Box này miễn phí ở trên wordpress.org nhé. Tải xong rồi thì bắt tay vào làm thôi.

Bước 1: Tạo một plugin mới để thêm đánh giá sao bằng custom field

Để có thể sử dụng nhiều lần, các bạn nên tạo hẳn một plugin mới cho việc thêm đánh giá sao bằng custom field. Mình sẽ đặt tên plugin này là MB Star Rating.

Đầu tiên, chúng ta bắt đầu xây dựng plugin mới này với cây thư mục như sau:

wp-content/plugins/mb-rating-field
- css
  - admin.css
  - frontend.css
- rating.php
- mb-rating-field.php

Trong đó, file mb-rating-field.php có nội dung:

/**
 * Plugin Name:  MB Star Rating
 * Plugin URI: https://metabox.io
 * Description: Add a new star rating field type for Meta Box
 * Version: 1.0
 * Author: MetaBox.io
 * Author URI: https://metabox.io
 * License: GPLv2
 */

Sau đó, bạn kích hoạt plugin này ở phần danh sách plugin đã cài trong Dashboard nhé.

Kích hoạt plugin tạo đánh giá sao giúp khách hàng review sản phẩm trong Dashboard.

Tiếp theo chúng ta sẽ bắt đầu xây dựng chức năng tạo custom field cho đánh giá sao của plugin này theo các bước sau:

Bước 2: Tạo field type để thêm star rating

Ở bước này, chúng ta sẽ tạo loại field mới tên là rating để thêm đánh giá sao.

Trước tiên, bạn tạo một class với tên RWMB_Rating_Field cho field rating này. Thông thường, muốn tạo 1 loại field nào đó, bạn nên tạo một class với cú pháp RWMB_{$field_type}_Field. Bạn có thể xem thêm chi tiết tại hướng dẫn này của Meta Box.

if ( class_exists( 'RWMB_Field' ) ) {
    class RWMB_Rating_Field extends RWMB_Field {}
}

Tiếp theo, hãy lưu class này vào một file PHP (ví dụ, mình lưu nó trong file rating.php), rồi cho file này vào file plugin mb-rating-field.php đã tạo ở Bước 1.

add_action( 'init', 'prefix_load_rating_type' );
function prefix_load_rating_type() {
    require __DIR__ . '/rating.php';
}

Bước 3: Tạo các lựa chọn để thêm đánh giá sao cho field rating

Sau khi có loại field rating rồi, bạn cần tạo các lựa chọn cho phép người dùng chấm điểm sao (chấm từ 0,5 đến 5 sao)..

Class rating này sẽ kế thừa toàn bộ các phương pháp của class RWMB_Field. Tại trường rating này, chúng ta phải xác định nội dung của phương thức html để output HTML trong backend.

Bạn làm điều đó bằng cách thêm đoạn code sau vào file rating.php.

public static function html( $meta, $field ) {
    return sprintf(
        '<fieldset class="rwmb-rating" id="%1$s">
        <input type="radio"' . checked( $meta, 5, false ) . 'id="%1$s_star5" name="%2$s" value="5" /><label class="full" for="%1$s_star5" title="5 stars"></label>
        <input type="radio"' . checked( $meta, 4.5, false ) . 'id="%1$s_star4half" name="%2$s" value="4.5" /><label class="half" for="%1$s_star4half" title="4.5 stars"></label>
        <input type="radio"' . checked( $meta, 4, false ) . 'id="%1$s_star4" name="%2$s" value="4" /><label class="full" for="%1$s_star4" title="4 stars"></label>
        <input type="radio"' . checked( $meta, 3.5, false ) . 'id="%1$s_star3half" name="%2$s" value="3.5" /><label class="half" for="%1$s_star3half" title="3.5 stars"></label>
        <input type="radio"' . checked( $meta, 3, false ) . 'id="%1$s_star3" name="%2$s" value="3" /><label class="full" for="%1$s_star3" title="3 stars"></label>
        <input type="radio"' . checked( $meta, 2.5, false ) . 'id="%1$s_star2half" name="%2$s" value="2.5" /><label class="half" for="%1$s_star2half" title="2.5 stars"></label>
        <input type="radio"' . checked( $meta, 2, false ) . 'id="%1$s_star2" name="%2$s" value="2" /><label class="full" for="%1$s_star2" title="2 stars"></label>
        <input type="radio"' . checked( $meta, 1.5, false ) . 'id="%1$s_star1half" name="%2$s" value="1.5" /><label class="half" for="%1$s_star1half" title="1.5 stars"></label>
        <input type="radio"' . checked( $meta, 1, false ) . 'id="%1$s_star1" name="%2$s" value="1" /><label class="full" for="%1$s_star1" title="1 star"></label>
        <input type="radio"' . checked( $meta, 0.5, false ) . 'id="%1$s_starhalf" name="%2$s" value="0.5" /><label class="half" for="%1$s_starhalf" title="0.5 stars"></label>
        </fieldset>',
        $field['field_name'],
        $field['id'],
        $meta
    );
}

Ở đây, chúng ta sử dụng loại field là radio để người dùng tùy chọn từ 0.5 đến 5.

Tiếp theo, hãy style lại một chút để hiển thị các tùy chọn radio trên dưới dạng sao (hiện tại chúng mới chỉ hiển thị dưới dạng hình tròn mặc định).

Thanh review mặc định là hình các chấm tròn, cần đổi sang dạng sao / star

Bạn chỉ cần thêm đoạn code sau vào file css/admin.css:

.rwmb-rating {
    border: none;
    float: left;
}
.rwmb-rating > input { display: none; }
.rwmb-rating > label:before {
    margin: 5px;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}
 
.rwmb-rating > .half:before {
    content: "\f089";
    position: absolute;
}
.rwmb-rating > label {
    color: #ddd;
    float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
 
.rwmb-rating > input:checked ~ label, /* show gold star when clicked */
.rwmb-rating:not(:checked) > label:hover, /* hover current star */
.rwmb-rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
.rwmb-rating > input:checked + label:hover, 
.rwmb-rating > input:checked ~ label:hover,
.rwmb-rating > label:hover ~ input:checked ~ label, .rwmb-rating > input:checked ~ label:hover ~ label { color: #FFED85;  }
.rwmb-rating input[type=radio]:checked+label:before {
    color: unset;
}

Để nhận được style trong admin, chúng ta dùng hàm admin_enqueue_scripts() để enqueue. Bạn hãy enqueue trong file rating.php như sau:

public static function admin_enqueue_scripts() {
wp_enqueue_style( 'rwmb-rating', plugin_dir_url( __FILE__ ) . '/css/admin.css', array(), '1.0.0' );
}

File rating.php sẽ có nội dung như này:

https://github.com/elightup/mb-rating-field

Bước 4: Tạo custom field để thêm rating với plugin MB Star Rating

Bây giờ, chúng ta có thể tạo các custom field có field type là rating với plugin MB Star Rating vừa tạo rồi đấy!

Bạn chỉ cần cho đoạn code sau vào file functions.php của theme hoặc child-theme, lưu ý là đặt ‘type' => ‘rating' như sau:

<?php
add_filter( 'rwmb_meta_boxes', 'your_prefix_register_meta_boxes' );
function your_prefix_register_meta_boxes( $meta_boxes ) {
    $prefix = '';
    $meta_boxes[] = [
        'title'      => esc_html__( 'Project Field', 'text-domain' ),
        'id'         => 'project-field',
        'post_types' => ['post'],
        'context'    => 'normal',
        'priority'   => 'high',
        'fields'     => [
            [
                'id'   => $prefix . 'name',
                'type' => 'text',
                'name' => esc_html__( 'Name', 'text-domain' ),
            ],
            [
                'id'   => $prefix . 'rating',
                'type' => 'rating',
                'name' => esc_html__( 'Rating', 'text-domain' ),
            ],
        ],
    ];
    return $meta_boxes;
}

Bây giờ, khi vào trang chỉnh sửa một bài đăng bất kỳ, bạn sẽ thấy custom field mới tạo hiển thị như sau:

Sau khi tùy chỉnh, hình dạng thanh đánh giá hiển thị hình sao.

Bạn có thể điền tên và chọn số sao để đánh giá rồi.

Bạn có thể review thử sản phẩm của mình qua thanh đánh giá vừa tạo.

Bước 5: Hiển thị đánh giá sao ngoài frontend

Như vậy chúng ta đã tạo được custom field để thêm đánh giá xếp hạng sao cho bài viết trong backend. Để hiển thị ra ngoài màn hình cho người đọc xem, bạn có thể dùng hàm wp_star_rating() của WordPress.

Tại file rating.php, bạn sử dụng phương thức format_single_value() bằng cách thêm đoạn code này vào:

public static function format_single_value( $field, $value, $args, $post_id ) {
	wp_enqueue_style( 'dashicons' );
wp_enqueue_style( 'frontend', plugin_dir_url(__FILE__) . '/css/frontend.css' );
 
require_once ABSPATH . 'wp-admin/includes/template.php';
$starrating = rwmb_get_value( $field['id'] );
       $args = array(
       	'rating' => $starrating,
             'type' => 'rating',
       );
       wp_star_rating( $args );
}

Đoạn code trên sẽ xuất ra HTML như sau ở front end:

<div class="star-rating" title=" ”Số sao lấy được”rating">
    <div class="star star-full"></div>
    <div class="star star-full"></div>
    <div class="star star-full"></div>
    <div class="star star-half"></div>
    <div class="star star-empty"></div>
</div>

Lưu ý: để dùng được hàm wp_star_rating() chúng ta cần chèn file wp-admin/includes/template.php như trên.

Cuối cùng, nếu muốn đánh giá sao ngoài trang web hiển thị đẹp mắt hơn, bạn nên style lại nó một chút. Mình sẽ enqueue Dashicons và file frontend.css như trong phương thức ở trên. Dưới đây là nội dung file frontend.css:

@font-face {
    font-family: "dashicons";
    src: url("../fonts/dashicons.eot");
}
@font-face {
    font-family: "dashicons";
    src: url(data:application/x-font-woff;charset=utf-8;base64,) format("woff"),
        url("../fonts/dashicons.ttf") format("truetype"),
        url("../fonts/dashicons.svg#dashicons") format("svg");
    font-weight: normal;
    font-style: normal;
}
 
.star-rating .star-full:before {
    content: "\f155";
}
 
.star-rating .star-half:before {
    content: "\f459";
}
 
.star-rating .star-empty:before {
    content: "\f154";
}
 
.star-rating .star {
    color: #0074A2;
    display: inline-block;
    font-family: dashicons;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    height: 20px;
    line-height: 1;
    text-align: center;
    text-decoration: inherit;
    vertical-align: top;
    width: 20px;
}

Để hiển thị kết quả cho người dùng xem, bạn chỉ cần chèn đoạn code sau tại file single.php của theme hoặc ở bất kỳ nơi nào bạn muốn hiển thị:

 rwmb_the_value( 'rating' );

Xong rồi đó, dưới đây là hình ảnh đánh giá sao ngoài frontend của mình:

Hình ảnh đánh giá sao giúp khách hàng review sản phẩm ngoài frontend của website.

Ok, vậy là chúng ta kết thúc rồi!

Lời cuối

Mình đã hướng dẫn các chủ website cách thêm đánh giá sao bằng custom field với plugin Meta Box qua 5 bước trong backend. Mình tin chắc rằng các đánh giá sao này sẽ giúp trang web, đặc biệt là các trang review sản phẩm uy tín, chất lượng, và chuyên nghiệp hơn đấy.

Chúc các bạn thành công.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *