楽ブログ

楽に楽しくやるブログ

スポンサーリンク(レスポンシブ)横長

スポンサーリンク

WordPress(STINGER7)のコメント欄の表示・非表示をクリックで切替えるJavaScriptを使った簡単な方法

2016/09/13

No Comments!

コメント欄って、あまり利用されない割に場所を取ってるよね

もちろん訪問者の数が少ないせいもあるんですが、当ブログにコメントを残してくれる人っていないんですよね。

それなのに、WordPressのコメント欄って、けっこうスペースを取ってて無駄だなとか思いまして。

そのコメント欄をクリックするごとに開閉する感じで、表示・非表示を切り替えられたらなと調べてやってみたので、記録として記事にしておきますよと。

JavaScriptを使って表示・非表示を切替える

やり方はいろいろあるんでしょうが、今回はJavaScriptでやってみました。

このブログでは「STINGER7」というテーマを使ってるんですが、変更対象となるのは、「comments.php」というファイルです。

ファイルの冒頭にある元のコメント欄の表示部分は、以下のようになってまして。

<hr class="hrcss" />
<div id="comments">
     <?php
     if ( have_comments() ):
          ?>
    <h5 id="resp"><i class="fa fa-commenting"></i>&nbsp;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>&nbsp;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>

黄字の部分が新しく追加したところで、赤字の部分が変更を加えたところです。

まず赤字の変更部分ですが、DIV要素として囲まれたコメント欄の属性を「display:none」として、初期状態で非表示になるようにしました。

次に黄字の新しく追加した部分ですが、ここにJavaScriptを記述してるんですね。

正確には、

onclick="obj=document.getElementById('comments').style; obj.display=(obj.display=='none')?'block':'none';"

という部分なんですが、ここでクリックされたときの動作を指定してまして。

まず最初に「obj=document.getElementById(’comments’).style」によって、IDが“comments”の「style」要素を取得しています。

その次の「obj.display=(obj.display==’none’)?’block’:’none’」の部分ですが、上で取得したstyle要素の状態をここで切替えています。

これは、JavaScriptの三項演算子を使ってまして。

つまり「style」要素の「display」プロパティが“none”であった場合は、これを“block”に切替え、逆に“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;"

の部分は、背景色などの見た目を調整しているところです。

もしもこの記事を参考にされる方がいらっしゃいましたら、この部分は好みで変えて頂ければよろしいかと。

スポンサーリンク

まとめ

というわけで、変更の結果はこの記事の下のコメント欄をご参照ください。

今回は最も簡単と思われるJavaScriptでやってみましたが、CSSなんかでも実現することができるようなので、興味がある方は調べてみると面白いでしょうね。

ところで、ずっと「コメント欄」と言ってますが、実はこの「コメント欄」にはコメントを書き込むフォーム部分だけじゃなくて、投稿されたコメントの表示の部分も含まれています。

それはIDが“comments”のDIV要素を一固まりで処理対象にしているためでして、投稿されたコメントは表示したままにしたいという場合は、そのあたりを工夫する必要がありますので念のため。

ともあれ、この記事がアナタにとっても何かの参考になれば幸いです。

それでは、楽しいWordPressライフを!

記事下アフィリウィジェット


こちらは、WordPressの基礎を勉強したい人におすすめの書籍です。

WordPressレッスンブック HTML5&CSS準拠

著者:エビスコム

amazon

楽天で探す

いちばんやさしいWordPressの教本

人気講師が教える本格Webサイトの作り方 第2版 WordPress 4.x対応

amazon

楽天で探す

スポンサーリンク

楽天モーションウィジェット(600×200)スマホ非表示

-ブログの話
-,