adiaryに「記事評価」を設置する方法

この記事がおもしろかったらシェアしてね

20081116_225000.jpg
某サイトでよくある「記事評価」。読者さんが記事を投票します。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をカスタマイズする。」を参考にいろいろ触ってみてくださいね。

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

スポンサーリンク
NO IMAGE
この記事をお届けした
ひとぅブログの最新ニュース情報を、
いいねしてチェックしよう!

この記事がおもしろかったらシェアしてね

ひとぅに興味を持った方はフォローしてね

関連記事

この記事に関連するオススメ


コメント

  1. NonO_ より:

    なんかおもしろそうw
    はてなの★と比べると使い勝手良いかも?

  2. ひとぅ より:

    コメントありがとうございます。
    はてなの★はログインしていないと使えないのと、読者さんの評価がわかりにくいですもんね。
    この記事評価は面白そうなのでしばらく運用してみようと思います。

Highslide for Wordpress Plugin