ＷｏｒｄＰｒｅｓｓ(ＳＴＩＮＧＥＲ７)のコメント欄の表示・非表示をクリックで切替えるＪａｖａＳｃｒｉｐｔを使った簡単な方法
2016/09/13
コメント欄って、あまり利用されない割に場所を取ってるよね
もちろん訪問者の数が少ないせいもあるんですが、当ブログにコメントを残してくれる人っていないんですよね。
それなのに、ＷｏｒｄＰｒｅｓｓのコメント欄って、けっこうスペースを取ってて無駄だなとか思いまして。
そのコメント欄をクリックするごとに開閉する感じで、表示・非表示を切り替えられたらなと調べてやってみたので、記録として記事にしておきますよと。
ＪａｖａＳｃｒｉｐｔを使って表示・非表示を切替える
やり方はいろいろあるんでしょうが、今回はＪａｖａＳｃｒｉｐｔでやってみました。
このブログでは「ＳＴＩＮＧＥＲ７」というテーマを使ってるんですが、変更対象となるのは、「ｃｏｍｍｅｎｔｓ．ｐｈｐ」というファイルです。
ファイルの冒頭にある元のコメント欄の表示部分は、以下のようになってまして。
<hr class="hrcss" />
<div id="comments">
<?php
if ( have_comments() ):
?>
<h5 id="resp"><i class="fa fa-commenting"></i> comment</h5>
<ol class="commets-list">
<?php wp_list_comments( 'avatar_size=55' ); ?>
</ol>
<?php
endif;
$args = array(
'title_reply' => 'Message',
'label_submit' => __( 'Submit Comment' , 'affinger' )
);
comment_form( $args );
?>
</div>
これを次のように変更しましたよ。
<hr class="hrcss" />
<div onclick="obj=document.getElementById('comments').style; obj.display=(obj.display=='none')?'block':'none';" style="cursor: pointer; background-color: #006600; border-radius: 10px; margin: 10px 0; padding: 6px 0; color: #fff; font-size: 20px; font-weight: bold; text-align:center;">
コメント
</div>
<div id="comments" style="display:none;">
<?php
if ( have_comments() ):
?>
<h5 id="resp"><i class="fa fa-commenting"></i> comment</h5>
<ol class="commets-list">
<?php wp_list_comments( 'avatar_size=55' ); ?>
</ol>
<?php
endif;
$args = array(
'title_reply' => 'Message',
'label_submit' => __( 'Submit Comment' , 'affinger' )
);
comment_form( $args );
?>
</div>
黄字の部分が新しく追加したところで、赤字の部分が変更を加えたところです。
まず赤字の変更部分ですが、ＤＩＶ要素として囲まれたコメント欄の属性を「ｄｉｓｐｌａｙ：ｎｏｎｅ」として、初期状態で非表示になるようにしました。
次に黄字の新しく追加した部分ですが、ここにＪａｖａＳｃｒｉｐｔを記述してるんですね。
正確には、
onclick="obj=document.getElementById('comments').style; obj.display=(obj.display=='none')?'block':'none';"
という部分なんですが、ここでクリックされたときの動作を指定してまして。
まず最初に「ｏｂｊ＝ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ(’ｃｏｍｍｅｎｔｓ’)．ｓｔｙｌｅ」によって、ＩＤが“ｃｏｍｍｅｎｔｓ”の「ｓｔｙｌｅ」要素を取得しています。
その次の「ｏｂｊ．ｄｉｓｐｌａｙ＝（ｏｂｊ．ｄｉｓｐｌａｙ＝＝’ｎｏｎｅ’）？’ｂｌｏｃｋ’：’ｎｏｎｅ’」の部分ですが、上で取得したｓｔｙｌｅ要素の状態をここで切替えています。
これは、ＪａｖａＳｃｒｉｐｔの三項演算子を使ってまして。
つまり「ｓｔｙｌｅ」要素の「ｄｉｓｐｌａｙ」プロパティが“ｎｏｎｅ”であった場合は、これを“ｂｌｏｃｋ”に切替え、逆に“ｂｌｏｃｋ”であったばあいは、“ｎｏｎｅ”に切替えるという動作をするようになってます。
その後ろの、
style="cursor: pointer; background-color: #006600; border-radius: 10px; margin: 10px 0; padding: 6px 0; color: #fff; font-size: 20px; font-weight: bold; text-align:center;"
の部分は、背景色などの見た目を調整しているところです。
もしもこの記事を参考にされる方がいらっしゃいましたら、この部分は好みで変えて頂ければよろしいかと。
まとめ
というわけで、変更の結果はこの記事の下のコメント欄をご参照ください。
今回は最も簡単と思われるＪａｖａＳｃｒｉｐｔでやってみましたが、ＣＳＳなんかでも実現することができるようなので、興味がある方は調べてみると面白いでしょうね。
ところで、ずっと「コメント欄」と言ってますが、実はこの「コメント欄」にはコメントを書き込むフォーム部分だけじゃなくて、投稿されたコメントの表示の部分も含まれています。
それはＩＤが“ｃｏｍｍｅｎｔｓ”のＤＩＶ要素を一固まりで処理対象にしているためでして、投稿されたコメントは表示したままにしたいという場合は、そのあたりを工夫する必要がありますので念のため。
ともあれ、この記事がアナタにとっても何かの参考になれば幸いです。
それでは、楽しいＷｏｒｄＰｒｅｓｓライフを！
