Cara Menambahkan Rating Bintang di Theme Wordpress Tanpa Plugin

Cara Menambahkan Rating di Theme Wordpress Tanpa Plugin


Cara Menambahkan rating bintang tanpa plugin

Code Pelajar - Assalamualaikum sobat code pelajar, kembali lagi dengan saya admin yang jarang update di blog ini. Yah karena kesibukan dan ingin menghela sejenak waktu berlibur ini saya menyempatkan diri menulis artikel disini.



Pada kesempatan kali ini, saya akan membahas "Bagaimana sih kita menambahkan sistem rating di theme wordpress?" dan "Rating tanpa plugin tentunya". Oke cara ini kebetulan saya temukan saat saya sedang mengerjakan theme Anime orderan jasa dari admin Komikost yang kebetulan juga setiap index postnya harus ada rating bintangnya seperti pada situs Bacamanga dot me. Pada awalannya saya bingung ini ntah pakai apa atau pake plugin apa pasalnya dari star ratingnya saja saya tidak menemukan plugin yang sama (mungkin kurang ikhtiar saya hehehe...).



Tapi setelah saya mencari sendiri akhirnya ketemu dengan sistem rating bawaan dari wordpressnya sendiri tanpa plugin. Fungsi PHP sistem rating ini yaitu ditulis dengan kode wp_star_rating(). Setelah saya mencari informasi di codex dan referensi lain akhirnya didapat informasi cara penggunaan wp_star_rating() ini.


Menggunakan wp_star_rating() untuk sistem rating pada theme wordpress

Untuk sekarang saya hanya akan menjelaskan penggunaan singkat dan dasarnya saja karena saya juga belum mengoprek fungsi ini di theme-theme yang saya buat.



Deskripsi

Menghasilkan elemen HTML dengan peringkat bintang yang terlihat pada skala 0-5 dengan peningkatan setengah bintang (mis. 1, 1,5, 2 bintang). Secara opsional, jika ditentukan, jumlah peringkat juga dapat ditampilkan dalam atribut judul dengan melewatkan parameter $ number.



Penggunaan


<?php wp_star_rating( $args ); ?>


Parameter

$args (array)(opsional) Array of arguments dengan nilai default 0


Argumen

  • rating : Nilai peringkat numerik 0-5 dalam kenaikan 0,5. (atau peringkat 0-100 persen untuk jenis persen) Default 0.
  • type : Nilai yang dapat diterima adalah 'percent' atau menggunakan default 'rating'
  • number : jumlah yang menginput rating (opsional) defaultnya 0.

Contoh penggunaan wp_star_rating()

Fungsi ini harus di panggil didalam looping postingan seperti index atau dalam singel/postingannya sendiri. Pertama kita harus meng-include fungsinya terlebih dahulu di file function.php


require_once( ABSPATH . 'wp-admin/includes/template.php' );

Atau kamu bisa menulis fungsinya sendiri tanpa harus mengincludenya dengan menempelkan kode fungsi ini kedalam file function.php.


function wp_star_rating( $args = array() ) {
$defaults = array(
'rating' => 0,
'type' => 'rating',
'number' => 0,
);
$r = wp_parse_args( $args, $defaults );
extract( $r, EXTR_SKIP );
 
// Non-english decimal places when the $rating is coming from a string
$rating = str_replace( ',', '.', $rating );
 
// Convert Percentage to star rating, 0..5 in .5 increments
if ( 'percent' == $type ) {
$rating = round( $rating / 10, 0 ) / 2;
}
 
// Calculate the number of each type of star needed
$full_stars = floor( $rating );
$half_stars = ceil( $rating - $full_stars );
$empty_stars = 5 - $full_stars - $half_stars;
 
if ( $number ) {
/* translators: 1: The rating, 2: The number of ratings */
$title = _n( '%1$s rating based on %2$s rating', '%1$s rating based on %2$s ratings', $number );
$title = sprintf( $title, number_format_i18n( $rating, 1 ), number_format_i18n( $number ) );
} else {
/* translators: 1: The rating */
$title = sprintf( __( '%s rating' ), number_format_i18n( $rating, 1 ) );
}
 
echo '<div class="star-rating" title="' . esc_attr( $title ) . '">';
echo str_repeat( '<div class="star star-full"></div>', $full_stars );
echo str_repeat( '<div class="star star-half"></div>', $half_stars );
echo str_repeat( '<div class="star star-empty"></div>', $empty_stars);
echo '</div>';
}


Selanjutnya, kita menambahkan css untuk bintangnya. Sistem rating bintang 5 ini memerlukan dashicons maka jika theme kamu belum memasukan dashicons bisa menambahkan tag <link> dibawah ini.


<link rel="stylesheet" type="text/css" href="<?php echo get_bloginfo('url');?>/wp-includes/css/dashicons.css" />

Lalu kita tambahkan css dibawah ini:


@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,/* !! Large amount of data removed, see wp-includes/css/dashicons.css for complete data !! */) 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";
}
/* Ubah warna dan ukuran custom bintang disini */
.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;
}

Setelah selesai include dan mengatur cssnya. selanjutnya kita memanggil fungsi nya pada theme. Misalnya dalam hal ini saya memanggilnya di bagian index.php. Secara default penggunaannya bisa seperti berikut ini.


<?php $args = array(
   'rating' => 3.5,
   'type' => 'rating',
   'number' => 1234,
);
wp_star_rating( $args ); ?>

Maka output yang di hasilkan akan seperti berikut:


<div class="star-rating" title="3.5 rating based on 1,234 ratings">
    <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>

"rating" adalah rating bintang yang akan di tampilkan di hasil jadi theme, "type" adalah jenis rating untuk menentukan hasil ratingnya (jika menggunakan tipe "rating", maka "rating" hanya boleh di isi dengan nomor 1 s/d 5). "number" adalah jumlah yang menginput rating (dalam hal ini hanya opsional). Nilai number akan berguna jika kita menggunakan sistem rating user secara langsung maka perhitungan yang harus berlaku adalah rating = nilai rata-rata dari semua rating (number)



Contoh implementasi sederhana untuk fungsi wp_star_rating ini saya gunakan pada gambar di bawah ini:

Cara Menambahkan rating bintang tanpa plugin

Untuk ratingnya sendiri saya tentukan dari rating My Anime List karena theme ini menggunakan grabber MAL seperti yang pernah ditulis diblog ini tutorial grabbernnya.


Baiklah cukup sekita postingan dari saya. Semoga tutorial ini bermanfaat bagi kamu yang ingin coba-coba atau iseng saja. Jika tutorial ini bermanfaat silahkan like dan share postingannya. Nantikan kembali tutorial antimainstream dari Code Pelajar, apabila ada kekurangan atau pertanyaan bisa tanyakan di komentar disqus dibawah setelah artikel ini. Wassalamualaikum...

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel