投稿した記事の評価をしてもらうプラグインを導入してみた
今更書くのもなんだけど、WordPressに、投稿した記事を、第三者が評価できるプラグイン（WP-PostRatings）を導入してみたよ。星をマウスでグリグリし、気に入ったところでクリックするだけで、記事を評価できるという優れもの。知らない間に、便利な世の中になってたんだね。hamasakuはちっとも気がつかなかったよ。
さて、このプラグイン、表示させたいところに「<?php if(function_exists('the_ratings')) { the_ratings(); } ?>」と書くだけで使えるので、とっても便利なんだけど、どこか気になるよね。hamasakuは、形から入る人なので、ビジュアル面で気に入らないところがあると、それだけで、テンションがた落ちなんだよ。
気に入らないのは、星をクリックした後に表示されるLoading画像の場所。デフォルトのコードだと、レイティング画像の下に表示されるんだけど、スタイルシートで「display: none;」にしてあるから、表示されると、それより下の部分がパカパカして、見た目が美しくないんだよね。
だから、postratings.phpの79行目以降をこんな感じで変更してみたよ。。
// If User Voted Or Is Not Allowed To Rate
if($user_voted) {
if(!$display) {
return "<$start_tag id=\"post-ratings-$id\" class=\"post-ratings\">".$loading.the_ratings_results($id).'<!--'.$start_tag.'-->';
} else {
echo "<$start_tag id=\"post-ratings-$id\" class=\"post-ratings\">".$loading.the_ratings_results($id).'<!--'.$start_tag.'-->';
return;
}
// If User Is Not Allowed To Rate
} else if(!check_allowtorate()) {
if(!$display) {
return "<$start_tag id=\"post-ratings-$id\" class=\"post-ratings\">".$loading.the_ratings_results($id, 0, 0, 0, 1).'<!--'.$start_tag.'-->';
} else {
echo "<$start_tag id=\"post-ratings-$id\" class=\"post-ratings\">".$loading.the_ratings_results($id, 0, 0, 0, 1).'<!--'.$start_tag.'-->';
return;
}
// If User Has Not Voted
} else {
if(!$display) {
return "<$start_tag id=\"post-ratings-$id\" class=\"post-ratings\">".$loading.the_ratings_vote($id).'<!--'.$start_tag.'-->';
} else {
echo "<$start_tag id=\"post-ratings-$id\" class=\"post-ratings\">".$loading.the_ratings_vote($id).'<!--'.$start_tag.'-->';
return;
}
}
ちっとわかりにくいと思うけど、良く見ると「$loading」の位置がオリジナルと違うのがわかると思うよ。ここまで出来たら後は簡単。Postrating-css.cssの.post-ratings-loadingクラスに「float: right」を追加するだけ。簡単だよね。
.post-ratings {
width:95%;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
/* background-color: #ffffff; */
line-height: 130%;
padding: 5px 10px;
margin-bottom: 10px;
border: 1px dotted #cccccc;
}
.post-ratings-loading {
display: none;
height: 16px;
text-align: left;
float: right;
}
これで見た目もすっきりしたよ。そうそう、実際の動作を見たかったら、この記事の評価をしてみると良くわかるよ。
関連記事
Facebook comments:
