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>
   

   に変更（赤字を追加）します。
   ※buttonをdivにして css で装飾するのもOKです。

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

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