WordPress

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

ブログをやっていると、たまにコメントを頂くことがありますよね。

読者からの質問であったり、意見であったり、記事に対しての感想をコメントを通じて受け取ることができます。また、ブロガー同士の交流の場として使われる場合もあります。

ただ、こうしてコメントを送ってきてくれるのは、記事を読んでくれた人のごく一部。大多数の人は、わざわざコメントなんてしません。

記事下のコメント欄って結構スペースをとってしまうし、無くしてしまえばスッキリするかな…とも考えました。しかし、そうすると、せっかくコメントを送ってきてくれる読者のことを無視してしまうことになるし、読者との貴重なコミュニケーションの機会を失ってしまいます。

コメント欄は残しつつ、もう少しコンパクトにできれば理想的なんじゃないの？

では、やりましょう。

コメント欄を開閉式にして、必要に応じてクリックすることで開いたり、閉じたりできるようにカスタマイズしてみました。

「コメント欄は残したいけど、省スペース化したい！」そんな人には、ピッタリかもしれません。

参考サイト

今回、コメント欄のカスタマイズでお世話になったサイトです。ありがとうございます。

【WordPress】コメント入力フォームのカスタマイズ②jQueryのスライド機能で表示を切替える

開閉スイッチのボタンを作成

まずは、コメント欄の開閉スイッチとなるボタンを作ります。

<div id="comments-toggle">コメントを閉じる</div>

こんな感じで、ボタンとなるものを準備。<div>でも<span>でも何でもいいと思います。

id名は「comments-toggle」としていますが、自分が分かりやすくて、他と重複しないものにしましょう。

これを、「comments.php」に追記します。

コメント（comments.php）にコードを追記

WordPress管理画面で「外観」⇒「テーマの編集」⇒子テーマ「comments.php」の編集画面へ。

<hr class="hrcss" />
<div id="comments-toggle">コメントを閉じる</div>
<div id="comments">
     <?php
     if ( have_comments() ):

上記のように2行目に追記してください。

これで、コメント欄の上部に「コメントを閉じる」と表示されています。この時点では、ただ文字が表示されているだけなので、ボタンだと分かるようにデザインしていきましょう。

スタイルシート（style.css）にコードを追記

子テーマ「style.css」の編集画面へ。

/* コメント欄の開閉ボタン */
#comments-toggle {
    display: block;
    margin-top: 10px;
    padding: 3px 0px;
    background-color: #228b22;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center; 
}
#comments-toggle:hover {
    cursor: pointer;
    opacity: 0.8;
}

上記のコードを追記してください。

すると、このようなデザインのボタンになります。

色や形状は適宜お好みで変更してくださいね。

ここまでの手順で“ボタンっぽいもの”が表示されるようになりました。が、今のままではクリックしても当然何も起こりません。

jQueryでコメント欄を開閉式に

続いて、クリックでコメント欄が開いたり、閉じたりするようにしていきます。

コメント（comments.php）にコードを追記

再び、子テーマ「comments.php」の編集画面へ。

<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>

上記のコードを先の手順で記載したボタンの下に追記してください。
<hr class="hrcss" />
<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">
     <?php
     if ( have_comments() ):

追記すると、こんな感じになります。

これで、ボタンをクリックする毎に、コメント欄がスライドして表示・非表示が切り替わるようになりました。

ちょっとした解説

どのようなことが書かれているのか、少し解説していきますね。

$("#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(); ?>）");
    }
});

「#comments-toggle」をクリックすると、
もし「#comments」が非表示だった場合、
「#comments」を表示に切り替え、
「#comments-toggle」はカッコ内のテキストを表示する。
その他の場合（「#comments」が表示だった場合）、
「#comments」を非表示に切り替え、
「#comments-toggle」はカッコ内のhtmlを表示する。

id名「comments」は投稿コメントと入力フォームを合わせたコメント欄全体。
id名「comments-toggle」はカスタマイズで用意した開閉ボタン。

つまり、「開閉ボタンをクリックすると、コメント欄の表示・非表示を切り替えますよ。ボタンに表示される言葉も連動して変化させますよ。」ってことです。

コメント欄が表示されているときは、閉じさせるような言葉を。非表示のときは、ここからコメントできると分かる言葉を。どのようなテキストにするかは、お好みで変更してください。

 

slideToggle()は表示・非表示をスライドで切り替えてくれます。（）の中に“slow”、“normal”、“fast”を記入すれば速度を調整することも可能です。未記入の場合は、“normal”と同じ。

上記のコードでは、開くときは“normal”、閉じるときは“fast”に設定してあります。普通に開いて、サッと閉じるイメージでしょうか。

 

<?php echo get_comments_number(); ?>

このコードでコメント数を取得できるので、Font Awesomeアイコンと合わせて、テキスト内に組み込んでみました。そのため、7行目はtextではなくhtmlとしています。

コメント数を表示させる必要がなければ、該当する箇所は削除してもらって構いませんので。

 

さて、これでクリックで開閉するボタンが完成…なんですが、このままでは最初からコメント欄が開いた状態になっています。省スペース化を狙っているので、最初は閉じた状態にしておきたいですよね。

そこで次のコード。

if (location.hash.indexOf("comment-") == -1) {
    $("#comments").hide();
    $("#comments-toggle").html("この記事にコメントする（<i class=\"fa fa-commenting\"></i>&nbsp;<?php echo get_comments_number(); ?>）");
}

もしハッシュ値に「comment-」が含まれていなかったら、
「#comments」は非表示にして、
「#comments-toggle」はカッコ内のhtmlを表示する。

ハッシュ値とはURLの#以降の部分です。

記事にコメントを送信、または返信すると、末尾に「#comment-〇」が付いたURLに遷移し、送信したコメントを確認できるようになっています。

例えば、この記事にコメントを送信した場合、

//life-jam.com/stingerplus-comment-openable-switch/#comment-〇

というページに遷移します。

コメント送信後はコメント欄が開いた状態にしておかないと、自分が送信した内容が確認できずに記事トップが表示されてしまいます。コメントを送信した読者も「あれ？ちゃんと送信できたのかな？」と困ってしまいます。

なので、コメント送信後のURLに「#comment-〇」が含まれているときはコメント欄は表示、その他の普通に記事閲覧しているときは非表示にしているわけです。

この辺の話は、参考サイト様でも分かりやすく解説されています。

以上で、コメント欄を開閉式にするカスタマイズの完了です。

まとめ

ブログならコメント欄は設置してあった方がいいのかな、と思います。

SNSなどと連携しているブログであれば、そちらで連絡をとることも可能ですが、気軽にコミュニケーションをとる手段としてコメント欄は有効ではないでしょうか。読者との距離が近くなる感じがします。

ただ、記事下でスペースをとってしまうので、その対策として今回のようなカスタマイズをしてみました。

コメントを確認・投稿するときに“クリックしてコメント欄を開く”ひと手間が増えてしまいますが、そのくらいなら問題ないと思っています。…たぶん。

コメント欄の扱いに悩んでいる人は、参考にしてみてください。

 

…ちなみに、当ブログへのコメントはまだない(´；ω；｀)ﾌﾞﾜｯ

 

<追記>
コメントが無いこと嘆いたら、たくさんコメントを貰えました。ありがとうございます♪

-WordPress

© 2023 Life Jam Powered by AFFINGER5