-
-
Save diggeddy/ef3dc0315a73c0caad839c5348b89aa6 to your computer and use it in GitHub Desktop.
function make_star_bar( $atts ) { | |
$value = shortcode_atts( array( | |
'stars' =>5, | |
'color' => '#f00' | |
),$atts); | |
$prefix = 'star-bar-'; | |
$uniqueClass = uniqid($prefix); | |
$percentage = 100 * $value['stars'] / 5; | |
$html = '<span class="'.$uniqueClass.'">★★★★★</span> | |
<style> | |
.'.$uniqueClass.' { | |
background: linear-gradient(90deg, '. $value['color'] . ' ' . $percentage .'%, rgba(0,0,0,0) '. $percentage.'%); | |
color: rgba(0,0,0,.2); | |
background-clip: text; | |
-webkit-background-clip: text; | |
color: rgba(0,0,0,.2); | |
} | |
</style> | |
'; | |
return $html; | |
} | |
add_shortcode('star_bar', 'make_star_bar'); |
Hey @diggeddy
Can you please add https://schema.org/Rating schema to the code. Like when ever we use the stars, it generates the rating schema also. That would be really great :)
Like this:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Rating",
"ratingValue": "4.5",
"bestRating": "5",
"worstRating": "1"
}
</script>
I implemented Rating Schema, here:
function make_star_bar($atts)
{
$value = shortcode_atts(array(
'stars' => 5,
'color' => '#f00'
), $atts);
$prefix = 'star-bar-';
$uniqueClass = uniqid($prefix);
$percentage = 100 * $value['stars'] / 5;
$html = '<span class="' . $uniqueClass . '">★★★★★</span>
<style>
.' . $uniqueClass . ' {
background: linear-gradient(90deg, ' . $value['color'] . '' . $percentage . '%, rgba(0, 0, 0, 0) ' . $percentage . '%);
color: rgba(0, 0, 0, .2);
background-clip: text;
-webkit-background-clip: text;
color: rgba(0, 0, 0, .2);
}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Rating",
"ratingValue": ' . $value['
stars '] . ',
"bestRating": "5",
"worstRating": "1"
}
</script>
';
return $html;
}
add_shortcode('star_bar', 'make_star_bar');
A simple x out of 5 Star Bar. Basic use with default color #f00:
[star_bar stars="2.6"]
With color attribute:
[star_bar stars="2.6" color="#0000ff"]
Can we implement this to block template with dynamic data? I have a rating field as a ACF custom field, I can display rating number but I want to show star rating. How can I feed the rating from dynamic data?
EDIT:
I found the solution, GeneratePress is amazing! 🎉
My custom field name is "rating". It's magic:
function make_star_bar( $atts ) {
$rating_term = get_field('rating');
$value = shortcode_atts( array(
'stars' => $rating_term,
'color' => 'orange'
),$atts);
$prefix = 'star-bar-';
$uniqueClass = uniqid($prefix);
$percentage = 100 * $value['stars'] / 5;
$html = '<strong>'.$value['stars'].'/5</strong>
<span class="'.$uniqueClass.'">★★★★★</span>
<style>
.'.$uniqueClass.' {
background: linear-gradient(90deg, '. $value['color'] . ' ' . $percentage .'%, rgba(0,0,0,1) '. $percentage.'%);
color: rgba(0,0,0,0);
background-clip: text;
-webkit-background-clip: text;
}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Rating",
"ratingValue": '.$value['stars'].',
"bestRating": "5",
"worstRating": "1"
}
</script>
';
return $html;
}
add_shortcode('star_bar', 'make_star_bar');
Hi Gentlemen. I came looking for this and I found it! Question--where do I add this code? I know how to reference the shortcode on my post. Do I create an element with the code? And the element would be a shortcode?
@Sparkledump the code is PHP.
If you're using a Child Theme, then add it to the Child theme functions.php
If you're not, then use the Code Snippets plugin to add the code to a new snippet
@buraste very nice :)
hey guys, one question. so i need to use shortcode with star value on every of my post? Because the data input from ACF is not showing
Now support a uniqueClass allowing for multiple shortcodes to be used on the same post.