2013年10月21日 WordPressjQuery・javascriptphp

ホームページやブログの記事なんかにスター評価を表示させたい場合は、jQuery Ratyで簡単に設定出来ます。
jQuery Raty – A Star Rating Plugin

ダウンロード

スクリーンショット 2013-10-21 16.35.27

まずは、必要なファイルを以下からダウンロードします。ダウンロードしたファイルを解凍して、jquery.raty.min.jsとimgフォルダ(星の画像)を任意の場所にアップロードします。
Raty on Github

ヘッダーでjsファイルの読み込み設定

jQueryファイルとratyのjsファイルをヘッダーで読み込みます。

jQuery読み込み
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
Raty読み込み
<script type="text/javascript" src="/js/jquery.raty.min.js"></script>
Ratyの設定
この場合は、Ratyを設置した箇所にスコア3なので、星が3つだけ色づいたレーティングが表示されます。 スクリーンショット 2013-10-21 16.48.23
<script type="text/javascript">
    $('#star').raty({ score: 3 });
</script>

表示したい場所にコードを設置

以下のコードをレーティングを設置したい場所に記述します。
<div id="star"></div>

複数レーティング、動的表示

ページ内に複数のレーティング表示をしたい場合や、PHPなどで動的に表示させたい場合は、スコアをHTML側で設定するようにしてやれば簡単です。

read only、サーバ上の画像のパスは任意、スコアを動的に設定する場合
<script type="text/javascript">
	$(function() {
			$('#star').raty( {
			 readOnly: true,   //閲覧者によるスコアの変更不可  
			 score: function() {
			    return $(this).attr('data-score');
			 },
			 path:  'http://your-server.com/img/' //サーバ上のRaty画像のパス
});
		});
</script>

表示させたい場所に設置

<div id="star" data-score="<?php echo $score1 ;?>"></div>
<div id="star" data-score="<?php echo $score2 ;?>"></div>
<div id="star" data-score="<?php echo $score3 ;?>"></div>

コード内にも説明がありますが、readOnlyをtrueにすると閲覧モード(投票機能なし)、scoreの設定は、HTML側のdata-scoreの値($score1,$score2,$score3)でレーティングスコアの設定、pathの項目で星画像のパス設定、といった感じです。これなら、PHPで動的にレーティング表示させるのも簡単に実装出来ますね。

この投稿へのコメント

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

XML-RPC を利用してwordpressに記事を投稿する

2017年05月30日 WordPressphp
必要なライブラリをダウンロード XML-RPCを利用するのに必要なライブラリをダウンロードして、インクルードします。 IXR_Library.phpをダウンロード [php]include_once("IXR_Library.php"); $client=new IXR_Client("http://wordpress-domain.com/xmlrp…
「XML-RPC を利用してwordpressに記事を投稿する」をはてなブックマークに追加

WordPressのテーマをウィジェットに対応させる

2013年10月06日 web関連WordPressphp
WordPressのテーマをウィジェットに対応させる
Wordpressで自作のテーマを作った場合などは、自分でウィジェットを利用可能にしない限り、ウィジェットは利用出来ません。このサイトのテーマは自作なのですが、今までウィジェットは使う機会がなかったので、未対応のままになっていました(:_;) 今回は、サイドにWordPress Popular Postsプラグインの人気記事一覧を表示させたかったので、調べてみましたよっ!ってことで、ウィジェ…
「WordPressのテーマをウィジェットに対応させる」をはてなブックマークに追加

PHP 短縮URLのAPIから短縮後のURLを取得

2011年08月09日 web関連phptwitter API
twitterに関連したwebサービスを作っているとURL短縮の必要が出てくることが多々あります。 そんな時には、有名なurl短縮サービスを利用することになると思うのですが、代表的なbit.ly、TinyURLを利用する方法です。 …
「PHP 短縮URLのAPIから短縮後のURLを取得」をはてなブックマークに追加

php mb_convert_kanaがうまく動かないとき

2011年07月07日 php
mb_convert_kanaは半角カタカナを全角カタカナに直したり、半角スペースを全角に直したりするときに重宝する関数ですが、環境(サーバ設定かな)によっては、期待通りに動かない場合があるようです。 …
「php mb_convert_kanaがうまく動かないとき」をはてなブックマークに追加

WordPress ソースコードを整形する SyntaxHighlighter

2011年05月27日 WordPress
SyntaxHighlighter Evolved を入れてみました。WordPress バージョン3.xx(調べるのメンドイ)ですが、ん~~すんなり動きませんでした。 デフォルトでは、コードを表示するにはしてくれるのですが、ソースをコピーなどのボタンが表示されない状態でした。 テンプレートの関係などあるのかなと思い、複数のテンプレートでも試しましたが、変化なしでした。 いろいろ調べました&…
「WordPress ソースコードを整形する SyntaxHighlighter」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy