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

2017年8月6日2018年10月7日

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

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

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

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

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

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

３、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が動かないページを開いた状態でCtrl+Shift+Iを押してデバッグ画面を開き、Consoleタブを見ることでjsが動かない原因を調べることができる。