ユーティリティ

2017年10月

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

エントリー

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 ~ ― 龍の棲む場所

ページ移動

関連エントリー

コメント

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

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをカタカナ3文字で入力してください(スパム対策)