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


ピックアップ記事

WordPressの検索にカテゴリでの絞り込み機能を追加

2011年11月24日 WordPress
[php] <form method="get" id="searchform" action="<?php bloginfo('url'); ?>"> <input type="text" value="<?php the_search_query(); ?>&qu…
「WordPressの検索にカテゴリでの絞り込み機能を追加」をはてなブックマークに追加

【無料】IPから国番号、組織情報、位置情報などを取得可能なサービス

2022年10月26日 php
使い方 ip2location.io 使い方は簡単で、上記サイトに無料アカウント登録し、API KEYを取得します。 API KEYと情報を取得したいIPをパラメータに設定して、 以下のURLにアクセスすれば、情報が取得できます。 [php]https://api.ip2location.io/?ip=218.42.223.17&key=【API KEY】&ip=【IP】…
「【無料】IPから国番号、組織情報、位置情報などを取得可能なサービス」をはてなブックマークに追加

Facebook APIを利用して、外部サイトから自分のウォールに投稿する

2012年03月19日 Facebookphp
ウォールへ投稿 外部サイトからFacebook上のウォールに投稿する方法です。 説明が不要なぐらい簡単でした。 [php]<?php $data = array( 'access_token' => $facebook->getAccessToken(), 'message' => 'API投稿テスト', ); $response = $facebook->…
「Facebook APIを利用して、外部サイトから自分のウォールに投稿する」をはてなブックマークに追加

WordPressでカテゴリ一覧やタグ一覧を取得・表示させる

2014年08月27日 WordPressphp
WordPressでカテゴリ一覧やタグ一覧を取得・表示させる
WordPressでカテゴリ一覧を表示させるには、wp_list_categoriesというテンプレートタグがありますが、出力結果が思い通りにならないことが多いので、get_termsを使って、カテゴリ一覧を表示させる方法です。 カテゴリ一覧を表示させる get_termsでカテゴリ情報を取得するには、最初の引数にcategoryを指定します。 [php]echo '<ul…
「WordPressでカテゴリ一覧やタグ一覧を取得・表示させる」をはてなブックマークに追加

WordPressのREST APIを使って最新記事を取得・表示させる

2017年06月14日 WordPressphp
1.WP REST APIプラグインをインストール 管理画面から「WordPress REST API」プラグインをインストールし、有効化します。 これで http://◯◯◯.com/wp-json/wp/v2/posts にアクセスすれば、記事の情報がjson形式で表示されます。 WordPress REST API jsonを取得・表示させる [php]&l…
「WordPressのREST APIを使って最新記事を取得・表示させる」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy