Tutorial Membuat Blog dengan Hugo di Android

Cara Memasang Inline Star Rating di WordPress (Tanpa Plugin) - Star Rating di Wordpress atau bintang pada artikel dapat memberikan dampak yang baik, cepat dan menarik secara visual bagi pengguna untuk menilai kualitas konten maupun produk nya. Baik itu ulasan produk, resep, atau artikel, Rating di Wordpress dapat menawarkan rasa kredibilitas dan kepercayaan secara langsung. Pengunjung dapat dengan mudah menilai tentang suatu item atau postingan tertentu, membantu mereka untuk memilih keputusan yang tepat.

Rating di Wordpress yang tertanam dapat memberi anda lebih banyak fleksibilitas dalam merancang konten artikel anda karena, Anda dapat menempatkan rating tersebut sejajar dengan teks apa pun di WordPress.

Menambahkan Rating di Wordpress

Dalam tutorial ini, saya akan memberikan Anda langkah-langkah untuk menambahkan inline star rating di wordpress di WordPress Anda menggunakan metode shortcode. Kita akan mulai dengan membuat shortcode yang diperlukan. Mari kita mulai!

Membuat Shortcode Inline Star Rating di Wordpress

Untuk mulai ngebuat shortcode star rating di wordpress, masuk ke dasbor admin WordPress Anda, kemudian pilih menu Tampilan → Editor File Tema dan tambahkan kode dibawah ini di file functions.php pada tema yang sedang digunakan.

function star_rating_shortcode($atts) {
    // Default attributes
    $atts = shortcode_atts(array(
        'rating' => 0,       // Default rating value
        'color' => 'yellow', // Default star color
        'size' => '24px'     // Default star size
    ), $atts);

    //validate attributes
    $rating = absint($atts['rating']);
    $color = sanitize_text_field($atts['color']);
    $size = esc_attr($atts['size']);

    // Validate rating (between 0 and 5)
    if ($rating < 0) {
        $rating = 0;
    } elseif ($rating > 5) {
        $rating = 5;
    }

    // Generate the star rating
    $output = '<div class="star-rating" style="color:' . $color . '; font-size:' . $size . ';">';
  $output .= '<style>.star-rating .star { text-shadow: 0 0 1px black; }</style>';
    for ($i = 1; $i <= 5; $i++) {
        if ($i <= $rating) {
            $output .= '<span class="star">★</span>'; 
        } else {
            $output .= '<span class="star">☆</span>';
        }
    }
    $output .= '</div>';

    return $output;
}

add_shortcode('star_rating', 'star_rating_shortcode');

Script di atas berfungsi untuk membuat shortcode [star_rating], yang memungkin Anda untuk menampilkan star rating di wordpress dengan atribut yang bisa disesuaikan untuk warna dan ukuran. Setelah Anda menambahkan script, klik tombol Perbarui File.

Menambahkan Shortcode Star Rating di WordPress pada Gutenberg

Sekarang yang perlu Anda lakukan yaitu menambahkan shortcode rating ke postingan atau halaman yang Anda inginkan. Anda juga bisa menentukan warna dan ukuran serta nilainya saat menggunakan shortcode nya, seperti yang ada di bawah ini

Contoh: [star_rating rating="3" color="#4290f5" size="30px"

shortcode ddi gutenberg editor

hasil akhir star rating di wordpress pada artikel

Jika Anda menggunakan shortcode tanpa menentukan atribut warna dan ukurannya, seperti: [star_rating rating="4"], kode tersebut akan otomatis menggunakan pengaturan default, yang berupa warna kuning dan ukuran bintang 24px.

Kesimpulan

Star di Wordoress adalah alat yang berharga bagi pengguna untuk menilai konten atau produk dengan cepat, menawarkan kredibilitas dan kepercayaan. Ini sangat berguna sehingga diintegrasikan ke dalam plugin premium dari beberapa pembuat halaman paling populer, seperti Divi maupun Elementor.

Saya hanya menunjukkan kepada Anda cara menambahkan inline star di wordpress sebaris yang memberikan fleksibilitas dalam desain, memungkinkan penempatan didalam teks, warna bintang yang bisa disesuaikan, dan ukuran yang dapat diatur sesuai keinginan di WordPress tanpa memerlukan plugin tambahan.

Dengan menggunakan shortcode, anda sudah menghemat space hosting karena ngga perlu buat download plugin.