【WordPress】テーマ「SANGO」でコメント欄を開閉式にする方法

raphicDesign 1 - 【Wordpress】テーマ「SANGO」でコメント欄を開閉式にする方法

こんにちは。 ブログを始めて数ヶ月。まだ1度もコメントをもらったことがない(汗)、、はじちょろ@(@hajityoro)です(T_T)   そんな私ですが、記事下のコメント欄のスペースが大きいことがずっと気になっていました。 「コメント欄を無くそうか」とも考えていましたが、 「いつかコメントをしてくれる人がいるはず!」という期待もあってズルズル。。   そんななか、”コメント欄を開閉式にできる”という有り難い記事を見つけましたので、そちらを参考にしてカスタマイズしてみました。   この記事の1番下にあるコメント欄のように仕上がりますので良かったら試してみてください。  

参考にしたサイト

参考 【STINGER PLUS+】コメント欄を開閉式にして省スペース化!クリックで表示・非表示を切り替えるLife Jam

手順

基本的には、上記参考サイトの通りでうまくいきますが、テーマ「SANGO」の場合、下記のアレンジが必要です。
  1. comments.phpを親テーマから子テーマにコピーし、子テーマを編集する。
  2. 下記のコードを子テーマのcomments.phpの1行目に記載する。
    comments.php
    <div id="comments-toggle">コメントを閉じる</div>
    <script>
    $(function() {
        $("#comments-toggle").click(function() {
            if ($("#comments").css("display") == "none") {
                $("#comments").slideToggle();
                $("#comments-toggle").text("コメント欄を閉じる");
            } else {
                $("#comments").slideToggle("fast");
                $("#comments-toggle").html("この記事にコメントする(<i class=\"fa fa-commenting\"></i>&nbsp;<?php echo get_comments_number(); ?>)");
            }
        });
        if (location.hash.indexOf("comment-") == -1) {
            $("#comments").hide();
            $("#comments-toggle").html("この記事にコメントする(<i class=\"fa fa-commenting\"></i>&nbsp;<?php echo get_comments_number(); ?>)");
        }
    });
    </script>
    <div id="comments">
  3. 下記のコードを子テーマのcomments.phpの最後の行に記載する。
    comments.php
    </div>
  4. style.cssについては参考サイトの通りでOKです。

まとめ

参考サイトさんが詳しく説明してくれていたのでとても簡単でした。 記事にしてみましたが、素人なので何か間違っていたらごめんなさい。 どなたかのお役に立てたら嬉しいです\(^o^)/
コメントを閉じる

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です