ひとぅブログ

某サイトでよくある「記事評価」。読者さんが記事を投票します。5点評価と手軽なため読者さんも気軽に投票してくれるのが特徴です。この記事評価システムをadairyに搭載してみました。記事評価のベースはJS-Kitさんの「Ratingsサービス」を利用させていただきました。

以下にadiaryで設置する方法をご紹介します。

■ adiaryに記事評価システム「Ratingsサービス」を設置する方法

1. FTPソフトでサーバに接続します。「diary.user.skel」に「_main.html」がある場合はFTPソフトでダウンロードしてテキストエディタで開きます。
   ない場合は、「diary.skel」から「_main.html」をFTPソフトでダウンロードしてテキストエディタで開きます。
   
2. 100行目付近の
   

   		<@>記事のリスト
   		<@ifexec(t.upnode ne '', begin)><div class="upnode-foot"><a href="<@v.myself2><@t.eupnode>"><span>→</span>親記事（関連記事）へ</a></div><$end>
   		<@if(t.children_cache, t.children_cache)>
   		<div class="clear"></div>
   	</div> <!-- end of body -->
   <$s.bodyend_1st="">
   

   に
   

   		<h3><span class="sanchor">■</span>この記事はいかがでしたか？</h3>
   		<div class="js-kit-rating" view="split" path="<@t.this_diary_url>" title="<@t.title>" permalink="<@v.server_url><@t.this_diary_url>"></div>
   		<script src="http://js-kit.com/ratings.js"></script> 
   

   を挿入し
   

   		<@>記事のリスト
   		<@ifexec(t.upnode ne '', begin)><div class="upnode-foot"><a href="<@v.myself2><@t.eupnode>"><span>→</span>親記事（関連記事）へ</a></div><$end>
   		<@if(t.children_cache, t.children_cache)>
   
   		<h3><span class="sanchor">■</span>この記事はいかがでしたか？</h3>
   		<div class="js-kit-rating" view="split" path="<@t.this_diary_url>" title="<@t.title>" permalink="<@v.server_url><@t.this_diary_url>"></div>
   		<script src="http://js-kit.com/ratings.js"></script> 
   
   		<div class="clear"></div>
   	</div> <!-- end of body -->
   <$s.bodyend_1st="">
   

   とします。
   
3. 「_main.html」を上書き保存し「diary.user.skel」ディレクトリ内にFTPソフトでアップロードします。
4. 「diary.user.skel」に「_main_onelog.html」がある場合はFTPソフトでダウンロードしてテキストエディタで開きます。
   ない場合は、「diary.skel」から「_main_onelog.html」をFTPソフトでダウンロードしてテキストエディタで開きます。
   
5. 100行目付近の
   

   		<@>記事のリスト
   		<@ifexec(t.upnode ne '', begin)><div class="upnode-foot"><a href="<@v.myself2><@t.eupnode>"><span>→</span>親記事（関連記事）へ</a></div><$end>
   		<@if(t.children_cache, t.children_cache)>
   		<#@s.bodyend_1st><@s.bodyend>
   		<div class="clear"></div>
   	</div> <!-- end of body -->
   
   <$s.bodyend_1st="">
   

   に
   

   		<h3><span class="sanchor">■</span>この記事はいかがでしたか？</h3>
   		<div class="js-kit-rating" view="split" path="<@t.this_diary_url>" title="<@t.title>" permalink="<@v.server_url><@t.this_diary_url>"></div>
   		<script src="http://js-kit.com/ratings.js"></script> 
   

   を挿入し
   

   		<@>記事のリスト
   		<@ifexec(t.upnode ne '', begin)><div class="upnode-foot"><a href="<@v.myself2><@t.eupnode>"><span>→</span>親記事（関連記事）へ</a></div><$end>
   		<@if(t.children_cache, t.children_cache)>
   		<#@s.bodyend_1st><@s.bodyend>
   
   		<h3><span class="sanchor">■</span>この記事はいかがでしたか？</h3>
   		<div class="js-kit-rating" view="split" path="<@t.this_diary_url>" title="<@t.title>" permalink="<@v.server_url><@t.this_diary_url>"></div>
   		<script src="http://js-kit.com/ratings.js"></script> 
   
   		<div class="clear"></div>
   	</div> <!-- end of body -->
   
   <$s.bodyend_1st="">
   

   とします。
   
6. 「_main_onelog.html」を上書き保存し「diary.user.skel」ディレクトリ内にFTPソフトでアップロードします。

以上で完了です。うまく上記画像のような☆が表示されていますか？テストで投票してみましょう。

なお☆の色やフォーマット等は、カスタマイズ可能です。カスタマイズしたい方は、「JS-Kit: Ratingsをカスタマイズする。」を参考にいろいろ触ってみてくださいね。

さてでは、早速、↓の☆をクリックしてこの記事を評価してみましょう！！(*^_^*)