【freo】【freoTips】【テンプレート系TIPS】エントリーのコメントをブログ拍手っぽく利用する方法
freoのエントリーのコメント機能をブログ拍手っぽく利用する方法です。
テンプレートを変更するだけでエントリーのコメントがブログ拍手っぽくなります。
特徴
・拍手は匿名で送信されます。
・コメントを入力することはできません。
・お礼画面は表示できません。
・管理画面のコミュニティメニューのコメント管理でこれまで送信されたコメント＝拍手の合計数・日時・IPを確認できます。
・エントリー本文の最後に拍手ボタンを設置します。
・拍手ボタンには拍手が押された回数が表示されます。
・エントリー情報欄にも拍手が押された回数が表示されます。
・エントリー一覧表示時（[templates/default/default.html][templates/entry/default.html][templates/category/default.html]）の本文の最後にも拍手ボタンが表示されます。
・拍手ボタンが押されると、自動的にエントリー個別表示画面（[templates/view/default.html]）に移動します。
サンプル
※画像サンプルです。実際には動きません。
導入方法
- [freo/templates/internals/default/default.html]の136行目あたり、<div class="entry">～</div>内の<div class="content">～＜/div＞の＜/div＞の直前に以下のソースを挿入します。
<!--{if $entry_comments[$entry.id].comment != 'closed'}--> <!--{if $entry_comments[$entry.id].comment != 'view'}--> <div id="comment_form"> <h6>ブログ拍手登録</h6> <!--{if $entry.comment == 'open' or $entry.comment == 'user' and $freo.user.id}--> <form action="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}#comment_form" method="post" id="nice"> <fieldset> <legend>ブログ拍手送信フォーム</legend> <input type="hidden" name="freo[token]" value="{$token}" /> <input type="hidden" name="comment[entry_id]" value="{$entry.id}" /> <input type="hidden" name="comment[name]" value="匿名" /> <input type="hidden" name="comment[text]" value="拍手" /> <p><input type="submit" value="拍手({$plugin_comment_counts[$entry.id]})" /></p> </fieldset> </form> <!--{/if}--> </div> <!--{/if}--> <!--{/if}--> - <ul class="link">～＜/ul＞内のコメント({$plugin_comment_counts[$entry.id]})部分を、以下の通り編集します。
<!--{if $entry.comment != 'closed'}--> <li>拍手({$plugin_comment_counts[$entry.id]})</li> <!--{/if}--> - [freo/templates/internals/entry/default.html]や[freo/templates/internals/category/default.html]がある場合は、（１）と（２）をそれぞれのテンプレートに適用します。
- [freo/templates/internals/view/default.html]の120行目～217行目あたり、コメント表示部分・コメント登録フォーム部分を削除します。
- [freo/templates/internals/view/default.html]の67行目あたり、<div class="entry">～</div>内の<div class="content">～＜/div＞の＜/div＞の直前に以下のソースを挿入します。
<!--{if $entry.comment != 'closed'}--> <!--{if $entry.comment != 'view'}--> <div id="comment_form"> <h6>ブログ拍手登録</h6> <!--{if $entry.comment == 'open' or $entry.comment == 'user' and $freo.user.id}--> <!--{if $freo.query.error}--> <ul class="attention"> <li>不正なアクセスです。</li> </ul> <!--{elseif $errors}--> <ul class="attention"> <!--{foreach from=$errors|smarty:nodefaults item='error'}--> <li>{$error}</li> <!--{/foreach}--> </ul> <!--{elseif $freo.query.exec == 'insert'}--> <ul class="complete"> <li>拍手を送信しました。</li> </ul> <!--{/if}--> <form action="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}#comment_form" method="post" id="nice"> <fieldset> <legend>ブログ拍手送信フォーム</legend> <input type="hidden" name="freo[token]" value="{$token}" /> <input type="hidden" name="comment[entry_id]" value="{$entry.id}" /> <input type="hidden" name="comment[name]" value="匿名" /> <input type="hidden" name="comment[text]" value="拍手" /> <p><input type="submit" value="拍手({$comments|smarty:nodefaults|@count})" /></p> </fieldset> </form> <!--{/if}--> </div> <!--{/if}--> <!--{/if}--> - [freo/templates/utility.html]の
部分を削除する。
<!--{if $plugin_comment_recentries|smarty:nodefaults}--> <div class="utility"> <h2>新着コメント</h2> <div class="content"> <dl> <!--{foreach from=$plugin_comment_recentries|smarty:nodefaults item='plugin_comment_recently'}--> <dt><a href="{$freo.core.http_file}/{if $plugin_comment_recently.entry_id}view/{$plugin_comment_recently.entry_id}{elseif $plugin_comment_recently.page_id}page/{$plugin_comment_recently.page_id}{/if}">Re: <!--{if $plugin_comment_recently.entry_id}-->{$plugin_comment_recently_entries[$plugin_comment_recently.entry_id].title}<!--{elseif $plugin_comment_recently.page_id}-->{$plugin_comment_recently_pages[$plugin_comment_recently.page_id].title}<!--{/if}--></a></dt> <dd> {$plugin_comment_recently.created|date_format:'%Y/%m/%d'} from <!--{if $plugin_comment_recently.user_id}-->{$freo.refer.users[$plugin_comment_recently.user_id].name}<!--{else}-->{$plugin_comment_recently.name}<!--{/if}--> </dd> <!--{/foreach}--> </dl> </div> </div> <!--{/if}--> - FTPソフトで編集したテンプレートをアップロードします。
- freoにログインして管理ページを開きます。
- [システム]－[設定管理]－[本体の設定]－[コメントの設定]を開きます。
- 「コメント受け付けの初期値（エントリー）」を「受け付ける」に、「コメント承認の初期値」を「承認」に変更します。
おまけのCSS
設置したブログ拍手ボタンをそれっぽくするCSSです。
[freo/css/default.css]に加筆して利用してください。
/* ================================================================================ */
/* #nice…ブログ拍手フォーム */
/* ================================================================================ */
#nice input[type=submit] {
border:1px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font-weight:bold;
background: #fcfff4; /* Old browsers */
background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=0 ); /* IE6-9 */
-moz-box-shadow: 1px 1px 2px #E7E7E7;
-webkit-box-shadow: 1px 1px 2px #E7E7E7;
}
#nice input[type=submit]:hover {
background: #e9e9ce; /* Old browsers */
background: -moz-linear-gradient(top, #e9e9ce 0%, #fcfff4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9e9ce), color-stop(100%,#fcfff4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e9e9ce 0%,#fcfff4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e9e9ce 0%,#fcfff4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e9e9ce 0%,#fcfff4 100%); /* IE10+ */
background: linear-gradient(to bottom, #e9e9ce 0%,#fcfff4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9ce', endColorstr='#fcfff4',GradientType=0 ); /* IE6-9 */
}
#nice input[type=submit]:active {
background: #ccc;
padding: 6px 20px 4px;
}
