エントリー

freoのコメント登録フォームを折りたたむボタン

freoエントリーやページのコメント登録フォームが大きいのでなんか邪魔だなと感じていたところ、jQueryで簡単に折りたためる方法を見つけたので実装してみました。

【2017/06/10 修正】ボタンのテキストも切り替えられるようにjsとcssを変更し、全面的に書き直しました。

  1. js/default.js の上から9行目あたりの
    $(document).ready(function() {

    の下に、

      //コメント表示ボタン
      $('#comment_form_contents').hide();
      $('.toggle').click(function(){
        $('#comment_form_contents').slideToggle();
        $(this).toggleClass('open');
      });
      /* 確認後[戻る]ボタンを押して戻っても登録フォームが開いた状態 */
      var hashVal = location.hash;
      if (location.hash == '#comment_form') {
        $('#comment_form_contents').show();
        $('.toggle').toggleClass('open');
      }
    を追加します。
  2. css/default.css の195行目にある(コメント関連の部分)
    div#comment div.comment ul.information li {
      display: inline;
      margin-left: 5px;
    }

    の下に、

    div#comment .toggle {
      margin-bottom: 15px;
    }
    div#comment_form .toggle::before {
      content:'コメント登録フォームを表示' ;
    }
    div#comment_form .toggle.open::before {
      content:'コメント登録フォームを閉じる' ;
    }
    div#comment_form_contents {
      margin-top: 0px;
    }
    を追加します。
  3. templates/internals/view/default.html の170行目あたりと templates/internals/page/default.html の160行目あたりにある
          <ul>
    <li>コメントを入力してください。</li>
    <!--{if $entry.comment == 'user'}--><li>コメントは登録ユーザーからのみ受け付けています。</li><!--{/if}-->
    </ul>
    <form action="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}#comment_form" method="post">

    ~(略)~

    </form>
    <!--{elseif $entry.comment == 'user' and !$freo.user.id}-->
    <ul>
    <li>コメントを登録するには<a href="{$freo.core.https_file}/login">ログイン</a>してください。</li>
    </ul>
    <!--{/if}-->

    の部分を、

          <button class="toggle">コメント登録フォームを表示</button>
    <div id="comment_form_contents">
    <ul>
    <li>コメントを入力してください。</li>
    <!--{if $entry.comment == 'user'}--><li>コメントは登録ユーザーからのみ受け付けています。</li><!--{/if}-->
    </ul>
    <form action="{$freo.core.http_file}/view/{if $entry.code}{$entry.code}{else}{$entry.id}{/if}#comment_form" method="post">

    ~(略)~

    </form>
    <!--{elseif $entry.comment == 'user' and !$freo.user.id}-->
    <ul>
    <li>コメントを登録するには<a href="{$freo.core.https_file}/login">ログイン</a>してください。</li>
    </ul>
    <!--{/if}-->
    </div>
    に変更(赤字を追加)します。
    buttondivにして css で装飾するのもOKです。

※実装してみた感じ ⇒ このサイトのエントリーのコメント表示に導入しています。
※実装したのに表示がうまくできない場合は、templates_c フォルダ内にある .htaccess 以外のphpファイルを全部削除してから更新してみてください。

※コメント登録フォームを隠したからといってスパムが来なくなるわけではありません(よくあるパターンのスパムはHTMLソースをたどってくる)ので下を参考に別途コメント対策をすることをおすすめします。
参考:freoTIPS ~ スパム対策に関するTIPS ~ ― 龍の棲む場所

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

ユーティリティ

2024年03月

- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -

キーワード検索

キーワード検索フォーム

ユーザー

  • cccのアバター

新着画像

ブログパーツ

Twitter

Twilogを見る

Feed