はぴすぷ

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

      2017/01/11

前回コメント入力フォームが大きくて邪魔だなぁ。という話をしました。

前記事：【WordPress】コメント入力フォームのカスタマイズ①ウェブサイトを削除する（メールアドレスにも対応）

そこで、私は入力フォームは最初非表示にしておいて、表示切替えボタンを押せば表示されるように変更しようと考えました。

最終形態のイメージはこんな感じです。

SS_0824

コメントがまだ0件のうちは、表示するコメントが無いので「入力フォームを表示する」というボタンを配置する。

そしてコメントが付いた状態ではコメントも表示されるので、「コメント・入力フォームを表示する」とテキストを変更する。

コメントや入力フォームを表示させている間は、「表示する」ではなく「隠す」に変更する。

SS_0826

もちろんパッと出たり消えたりせずにアニメーションさせたい。

というわけで、jQueryのスライドアニメーション使って実装していきます！

スポンサーリンク

切替えボタン設置

まずはボタンが無いことには始まらない。何でもいいので用意する。

とりあえずspanで作ったが何でもいい。

<span id="comments-display-toggle-btn">
    <?php if (have_comments()) { echo 'コメント・'; } ?>入力フォームを<span id="comments-display-toggle-text">隠す</span>
</span>

コメントがある時だけ、前に「コメント」を付ける。
切替えた後にテキスト変えたいので、その部分だけ別のspanで囲ってidを振っておいた。
適当にスタイルをあてて、ボタンっぽくする。

#comments-display-toggle-btn {
    background-color: #b5ffa0;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: bold; 
}
#comments-display-toggle-btn:hover {
    cursor: pointer;
    -moz-opacity: 0.8;
    opacity: 0.8;
}

これでボタンは用意出来た。

ボタンを押した時に入力フォームをスライドイン・アウトさせる

単純にボタンを押す度に「表示・非表示」を切替えるだけなら「slideToggle」を使えば済みます。ただ今回は、ボタンを押した時の状態によって他の処理も行いたいので「slideUp」と「slideDown」の組み合わせで行います。

// コメント・フォームの表示・非表示切り替え
$("#comments-display-toggle-btn").click(function () {
    if ($("#comments").css("display") == 'none') {
        $("#comments").slideDown();
        $("#comments-display-toggle-text").text("隠す");
    } else {
        $("#comments").slideUp();
        $("#comments-display-toggle-text").text("表示する");
    }
});

ボタンをクリックした時に、コメントが表示されていなければ、スライドダウンで表示させて、ボタンのテキストを「表示する」から「隠す」に変更する。逆の場合は、スライドアップで隠して、ボタンを「表示する」に変更する。

出来上がり(^q^)

コメント・入力フォームの初期表示を必要に応じて出し分ける

いやいや、これだと最初に「コメント・入力フォーム」が見えっぱなしじゃないですか(・ω・｀)

あ、そっか。#commentsをdisplay:none;にしけどば良いんだよね？

その答え。Noだ！！

最初から非表示にしておくと、困るケースがある

コメントと入力フォームを最初から非表示にしておくと、コメントを書いた後と、誰かのコメントに返信しようとした時に不具合が発生する。

コメントを書いた後の不具合

コメントを書いた後にリダイレクトされる先が、以下のような場所になっている。

コメントした記事のURL/#comment-[コメントID]
(例：https://hapisupu.com/comment-after/#comment-1)

これは#comment-1の部分に移動しろという指示です。

最初にコメント関係の一番の親である「#comments」を非表示にしておくと、その子である「#comment-[コメントID]」も見つかりません。そうなると書いたばかりのコメントを、すぐに確認できなくなってしまいます。

誰かのコメントに返信しようとした時の不具合

これも、同じような理由です。

誰かのコメントに返信する時のリンク先が、以下の場所になっています。

コメントした記事のURL/?replytocom=[コメントID]#respond
(例：https://hapisupu.com/comment-after/?replytocom=1#respond)

GETパラメータの「?replytocom=[コメントID]」はフォームに隠しパラメータとして親のコメントIDを含ませる為のもの。

「#respond」は入力フォームに移動させるためのものです。入力フォームが表示されていないと移動しません。何故か画面が更新されて画面の最上部が表示されます。

これは確実にユーザーは( ﾟдﾟ)ﾎﾟｶｰﾝってなります。

「あ…ありのまま今起こったことを話すぜ！」とまた新たなポルナレフが誕生せざるを得ないです。

これは画面遷移させずに、JSでやればいいのに…。って内容ですが、本題ではないので根本の対処はしません。

対処方法

とりあえず、コメントを書いた後と、誰かのコメントに返信しようとした時に関しては非表示にしないようにします。

これらの状態を判定するのに、JSで「location.hash」を見ます。これは、今見ているページのURLのハッシュ値（#以降の文字列）が取得できます。

このハッシュ値に「comment-」と「respond」が含まれていなければ非表示にするとします。

// コメント後でも返信時でもなければコメントグループは非表示にしておく
if (location.hash.indexOf("comment-") == -1 && location.hash.indexOf("respond") == -1) {
    $("#comments").hide();
    $("#comments-display-toggle-text").text("表示する");
}

これで通常時はコメントと入力フォームが非表示の状態から始まり、コメント後や返信時には従来通りの動きを再現できます。

終わりに

今回は、jQueryのスライドアップ・ダウンを使ってコメントと入力フォームの表示切り替えまで行いました。

ただ、冒頭で紹介した完成形イメージではコメント用の見出しが付いていました。

SS_0824

関連記事に合わせた見出しの作成とコメント数の吹き出しを作成する方法を次回説明しようと思います。

次回は遅くとも明日には書き上げるのでお楽しみに(^q^)

 - jQuery, STINGER, Webサイト構築, WordPress