wordpress

【wordpress】jsでコメントエリアに開閉ボタンを割り当てる

ワードプレスのテンプレートでコメントエリアなど一部を開閉表示させたいときの備忘録。

【広告】

コメントに開閉ボタンを割り当てる

必要な作業は以下の3点。

  1. footer.phpにコードを記述
  2. comments.phpにコードを記述
  3. style.cssでデザインを整える

1、footer.php

フッター(footer.php)のフッター開始タグ(footer)の直後に以下のコードを記述する。

<!-- ここからコメント欄開閉ボタン用script -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    jQuery(function(){
        jQuery("#comment-box dt").click(function() {
            jQuery(this).next().slideToggle();
            jQuery(this).toggleClass("active");
        });
    });
</script><!-- ここまでコメント欄開閉ボタン用script -->

2、comments.php

コメント(comments.php)の開閉させたい部分の最初と最後を以下のようにコードで挟む。

<dl id="comment-box">
    <dt> コメント<?php comments_number(__( ' (0)' ), __( '(1)' ), __( ' (%)' )); ?></dt>
    <dd style="display: none;>

<div class="comment-box">

~~~~~~~~~~~~~~~
【開閉させたいコメントエリア】
~~~~~~~~~~~~~~~

</dd>
</dl>

3、style.css

スタイルシート(style.css)でデザインを整える。


/* comment
-------------------------------------------------------------- */
#comment-box {margin-top: 60px; margin-bottom: 70px;}
#comment-box dt {font-size: 25px; margin-bottom: 30px; font-weight: normal; cursor:pointer; transition: all 0.3s ease-in-out;}

/* 上下反転矢印 */
#comment-box dt:before {content:'↓'; color:#fff; background-color: #616161; padding: 14px 18px; border-radius: 50px;}
#comment-box dt.active:before {content:'↑'; color:#fff; background-color: #dddddd;}

動かない場合

フッターに記述した最初のコードだけをヘッダー(header.php)のヘッド閉じるタグ(/head)の直前に記述すると動くかもしれない。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

これでも動かない場合は、jsが動かないページを開いた状態で++を押してデバッグ画面を開き、タブを見ることでjsが動かない原因を調べることができる。

   
コメント ( 1 )

コメントを残す

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