使wp_star_rating在前端可用

Question

我正在尝试在短代码中实现评级函数，以便在前端使用它。

因此，我将wp/include/template.php中的代码复制到wp-content/admin/hemingway/Functions.php中。我为参数和shortcode_atts函数添加了add_shortcode。现在看起来是这样的：

function wp_star_rating_frontend( $attr ) {
    $args = shortcode_atts( array(
        'rating' => 0,
        'type'   => 'rating',
        'number' => 0,
        'echo'   => true,
    ), $attr );
    $parsed_args = wp_parse_args( $attr, $args );
 
    // Non-English decimal places when the $rating is coming from a string.
    $rating = (float) str_replace( ',', '.', $parsed_args['rating'] );
 
    // Convert percentage to star rating, 0..5 in .5 increments.
    if ( 'percent' === $parsed_args['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 ( $parsed_args['number'] ) {
        /* translators: 1: The rating, 2: The number of ratings. */
        $format = _n( '%1$s rating based on %2$s rating', '%1$s rating based on %2$s ratings', $parsed_args['number'] );
        $title  = sprintf( $format, number_format_i18n( $rating, 1 ), number_format_i18n( $parsed_args['number'] ) );
    } else {
        /* translators: %s: The rating. */
        $title = sprintf( __( '%s rating' ), number_format_i18n( $rating, 1 ) );
    }
 
    $output  = '<div class="star-rating">';
    $output .= '<span class="screen-reader-text">' . $title . '</span>';
    $output .= str_repeat( '<div class="star star-full" aria-hidden="true"></div>', $full_stars );
    $output .= str_repeat( '<div class="star star-half" aria-hidden="true"></div>', $half_stars );
    $output .= str_repeat( '<div class="star star-empty" aria-hidden="true"></div>', $empty_stars );
    $output .= '</div>';
 
    if ( $parsed_args['echo'] ) {
        echo $output;
    }

    return $output;
}

add_shortcode('stars', 'wp_star_rating_frontend'); 

然后，我在dashicons.css中通过wp_enqueue_scripts添加了functions.php：

function additional_custom_styles() {

    /*Enqueue The Styles*/
    wp_enqueue_style( 'uniquestylesheetid', get_template_directory_uri() . '/wp-includes/css/dashicons.css' ); 
}
add_action( 'wp_enqueue_scripts', 'additional_custom_styles' );

我还在wp内容/主题/hemingway/style.css中添加了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,/* !! 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";
}

.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;
}

当我试图在一篇星号为“rating="6.5”type=“的帖子中使用它时，将”number="12434“echo=”评为真，或者在火狐中使用该帖子是空的。

当我在safari中打开网站时，我会得到这个给明星看的：

​

当我将这些框复制到文本编辑器中时，我会得到以下内容：

0,0 rating
0,0 rating

我认为css没有正确加载，但我不知道为什么。

当我更新帖子时，我会得到一个错误：“更新失败。响应不是有效的JSON响应。”(尽管如此，我还是可以删除这篇文章)

Answer 1

使用dashicons.min.css而不是dashicons.css是解决方案。