wordpress评分插件Post Ratings美化修改版

最近大家都很热衷于给自己的文章加上评分功能,这是个对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);
}
}
68 Comments

Name *

E-mail *

Website

  1. 爱美爱魅

    改的地方太多了吧。。对于我们这些小鸟。。确实有些头疼。 :fue:
    用插件相对简单,也不怕版本升级吧。。 :huai:

    • 小蝴蝶

      @爱美爱魅 这就是插件啊 只不过把插件美化一下了

  2. […] 具体方法可以参考女程序员小蝴蝶的教程。 […]

  3. 佐仔

    小蝴蝶,请问一下你文章所说的:“然后扔一段js”,但是在你的http://xiaohudie.net/wp-content/plugins/post-ratings/post-ratings.js?ver=2.4没有发布一段JS哟。请问加到什么地方或者是不要这段代码了?谢谢。

    • 小蝴蝶

      @佐仔 如果你主题自带js的话,扔到js文件里就可以了,或者也可以直接用script标签裹起来

  4. 左尔德

    这个好,回去装个试试

  5. PC丶爱好者

    ……不知道自己折腾哪地方错了搞得只剩样式,点击评分无效……

  6. 何处揽月

    多谢小蝴蝶的无私贡献!
    还有请教怎样修改能让这个插件不需加载wp自带jquery?只注释掉wp_enqueue_script(‘jquery’);不行啊

    • 何处揽月

      @何处揽月 我搞错了,注释掉可以的~
      再帮忙修正点小问题:
      “正在投票…”的span标签应放到endif这句之后,否则会出现一排“正在投票…”
      添加的js里.ratingtextme应为.ratingtext-xhd,保持一致
      添加的css里position:absolute应改为relative,采用相对位置

      是否正确,请测试~

      • 小蝴蝶

        @何处揽月 span放在endif外层不科学,它是判断可投票用户这个条件的;
        外观什么的你自己捣腾捣腾好啦 我当时用的时候没有这些问题 可能你改了其他地方

  7. 有客东来

    用上了,谢谢小蝴蝶!
    这里想请教一个之前出现过,修改后依然存在的问题
    插件显示的时候,上面总多出一个空行来(就是在星星上面),检查元素时显示一对引号,不论是插入短码还是放在首尾,严重影响布局,万望解答

  8. 于尼玛

    学习了,正准备试试

  9. muyer

    关于post-ratings插件 我想修改成10进制评分,可是在后台直接修改了前面会变成10颗星我想保持原有5颗应该怎么做。谢谢;