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

最近大家都很热衷于给自己的文章加上评分功能,这是个对seo很友好的功能,本文教你如何对Post Ratings进行修改,使它显示效果更完善酷炫: 实现正在投票的loading效果以及修复错位现象. 作者:小蝴蝶

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

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 xsinger

    :guzhang: 沙发了~~突然很有成就感,哈哈! :huai:

    三月 3, 2013 17:43:35
  2. 板 凳 xsinger

    貌似你右边栏标签云上面的搜索框有个input飞到下面了~~
    是不是.widget #searchsubmit漏了个float: left?

    三月 3, 2013 17:50:39
  3. 地 板 所谓刚子

    又是一篇技术文章 支持 哈哈哈

    三月 3, 2013 18:02:31
  4. 地 毯 郑永

    呵呵,小蝴蝶又能折腾又厉害啊。

    三月 3, 2013 20:56:23
  5. 地 面 不亦乐乎

    这个插件大不大?要是能直接写到functions.php里去就好了。

    三月 4, 2013 08:33:48
    • 小蝴蝶

      @不亦乐乎 这个不大,但由于需要调用相应js,还是做成插件比较好,其实要放在function消耗的资源是一样的..

      501室 三月 4, 2013 08:37:01
  6. 地 下 airoschou

    我也来凑凑热闹 :smile:

    三月 4, 2013 09:47:39
  7. 7 楼 巧克力

    来支持一下!试着用一下,效果不错,像淘宝评价那样!收藏!

    三月 4, 2013 17:46:39
  8. 8 楼 胡倡萌

    看到效果了,赞一个 :huai: :guzhang:

    三月 6, 2013 07:46:25
  9. 9 楼 小蝴蝶

    忘了我怎么爆你头了?

    三月 14, 2013 12:03:07
  10. 10 楼 爱美爱魅

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

    四月 3, 2013 14:53:53
  11. 11 楼 佐仔

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

    四月 16, 2013 08:08:36
    • 小蝴蝶

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

      1101室 四月 18, 2013 23:17:34
  12. 12 楼 左尔德

    这个好,回去装个试试

    四月 17, 2013 11:29:53
  13. 13 楼 J@ck

    这是博主自己本人么?没看明白。。

    六月 1, 2013 06:07:41
  14. 14 楼 PC丶爱好者

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

    七月 2, 2013 22:08:25
  15. 15 楼 何处揽月

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

    七月 13, 2013 16:13:56
    • 何处揽月

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

      是否正确,请测试~

      1501室 七月 13, 2013 17:33:00
      • 小蝴蝶

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

        1502室 七月 13, 2013 22:43:02
  16. 16 楼 有客东来

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

    七月 27, 2013 13:09:25
  17. 17 楼 于尼玛

    学习了,正准备试试

    十二月 23, 2013 20:31:23
  18. 18 楼 muyer

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

    一月 12, 2014 12:58:27
  19. PingBacks: 1