• 虹色ミツバチ
  • freoカスタマイズメモ、テンプレート・プラグイン配布/officeTIPS
検索プラグイン
虹色ミツバチ

> Entry >freo>freoTips>テンプレート系TIPS> エントリーのコメントをブログ拍手っぽく利用する方法

【freo】【freoTips】【テンプレート系TIPS】エントリーのコメントをブログ拍手っぽく利用する方法

freoのエントリーのコメント機能をブログ拍手っぽく利用する方法です。
テンプレートを変更するだけでエントリーのコメントがブログ拍手っぽくなります。

特徴

・拍手は匿名で送信されます。
・コメントを入力することはできません。
・お礼画面は表示できません。

・管理画面のコミュニティメニューのコメント管理でこれまで送信されたコメント=拍手の合計数・日時・IPを確認できます。

・エントリー本文の最後に拍手ボタンを設置します。
・拍手ボタンには拍手が押された回数が表示されます。
・エントリー情報欄にも拍手が押された回数が表示されます。
・エントリー一覧表示時([templates/default/default.html][templates/entry/default.html][templates/category/default.html])の本文の最後にも拍手ボタンが表示されます。
・拍手ボタンが押されると、自動的にエントリー個別表示画面([templates/view/default.html])に移動します。

サンプル

エントリーのコメントをブログ拍手っぽく利用する方法(1)
※画像サンプルです。実際には動きません。

導入方法

  1. [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}-->
    
  2. <ul class="link">~</ul>内のコメント({$plugin_comment_counts[$entry.id]})部分を、以下の通り編集します。
    <!--{if $entry.comment != 'closed'}-->
    <li>拍手({$plugin_comment_counts[$entry.id]})</li>
    <!--{/if}-->
    
  3. [freo/templates/internals/entry/default.html][freo/templates/internals/category/default.html]がある場合は、(1)と(2)をそれぞれのテンプレートに適用します。
  4. [freo/templates/internals/view/default.html]の120行目~217行目あたり、コメント表示部分・コメント登録フォーム部分を削除します。
  5. [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}-->
    
  6. [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}-->
    
    部分を削除する。
  7. FTPソフトで編集したテンプレートをアップロードします。
  8. freoにログインして管理ページを開きます。
  9. [システム]-[設定管理]-[本体の設定]-[コメントの設定]を開きます。
  10. 「コメント受け付けの初期値(エントリー)」を「受け付ける」に、「コメント承認の初期値」を「承認」に変更します。

おまけの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;
}

ページ移動

関連記事

ユーティリティ

Twitter

ページ上部へ