最近大家都很热衷于给自己的文章加上评分功能,这是个对seo很友好的功能,下面是加上评分功能后谷歌搜索结果中的样式:

但有的人开启Post Ratings之后会出现如下错位现象,

本文教你如何对Post Ratings进行修改,使它显示效果更完善酷炫: 实现正在投票的loading效果以及修复错位现象,下面是最终效果,大家可以给我投5分试试看哈哈哈

美化投票效果

首先修改post-ratings/templates/post-ratings-control.php这个文件,
找到<?php if(PostRatings()->currentUserCanRate()):,从这一行开始一直到结尾,全部替换为以下代码

<?php if(PostRatings()->currentUserCanRate()): // only display links if the user can rate the post ?>
<?php for($i = 1; $i <= $max_rating; $i++): ?>
<?php $title = apply_filters('post_ratings_control_title', sprintf(__('您准备给小蝴蝶打%1$d分,满分是%2$d分', 'post-ratings'), $i, $max_rating), $i, $max_rating); ?>
<li class="s<?php print $i; ?>">
<a title="<?php esc_attr_e($title); ?>"></a>
</li><span class="ratingtext-xhd">正在投票...</span>
<?php endfor; ?>
<?php endif; ?>
</ul>
<div class="meta">
<?php
printf(_n('%2$s分(%1$s票)', '%2$s分(%1$s票)', $votes, 'post-ratings'),
sprintf('<strong class="votes">%d</strong>', $votes), sprintf('<strong>%.2F</strong>', $rating), sprintf('<strong>%d</strong>', $bayesian_rating));
?>
</div>

</div>

然后扔一段js

//click effect  xiaohudie.net
	jQuery(document).ready(function($){
	$('.ratings a').click(function(){
	$('.ratingtextme').show(); 
	});
	});

然后在你的style.css里加一句

.ratingtext-xhd{display:none;position: absolute;top: -50px;font-weight: normal;font-size: 12px;background: #ffffe0;border: 1px solid rgb(230, 195, 85);padding: 5px;}

大功告成,快给自己投票看看吧

让js和css只在文章页加载

附:如果你只在文章页面开启了评分功能,可以让插件的js和css只在文章页面加载,方法是:
修改post-ratings/post-ratings.php这个文件,找到public function assets()这一行,把这段function(直到下一个/*前面的部分)改为:

public function assets(){
if ( is_single() )//如果你在页面也开启了评分,可以把single改成singular
{
// js
wp_enqueue_script('jquery');
wp_enqueue_script(self::ID, plugins_url('post-ratings.js', __FILE__), array('jquery'), self::VERSION, true);
// note that Atom-based themes alread have this variable "localized"
if(!class_exists('Atom') || (class_exists('Atom') && (!defined('Atom::VERSION'))))
wp_localize_script(self::ID, 'post_ratings', array('blog_url' => home_url('/')));
// allow themes to override css
$style = is_readable(get_stylesheet_directory().'/post-ratings.css') ? get_stylesheet_directory_uri().'/post-ratings.css' : plugins_url('post-ratings.css', __FILE__);
wp_enqueue_style(self::ID, $style);
}
}