WordPress コメントの返信でページが遷移してしまう時の対処法

WordPressでオリジナルテーマを使用してコメント欄を作ったときに、返信ボタンを押すとページが移動してしまう問題の対処法を紹介します。

これは/wp-includes/js/comment-reply.jsが上手く動作しないのが原因です。

理想の動作

返信ボタンを押すと、そのコメントの真下にコメントフォームが移動するのが正常な動作です。

対処法は2つあります。それぞれ原因が違うので両方試してみると良いでしょう。

comment-reply.jsの読み込みタイミングを修正する
コメントの構造を修正する

1つ目の対処法

<script type="text/javascript" src='<?php bloginfo('url'); ?>/wp-includes/js/comment-reply.min.js'></script>

ヘッダーかフッターでcomment-reply.jsを読み込ませましょう。

たぶんこれでは解決しないと思いますがまずは確認しておきましょう。

2つ目の対処法

comments.phpを編集して自作テーマを使っている場合はwp_list_comments()で作られる構造を見直しましょう。

comment-reply.jsを動かす最低構成

<li id="comment-x">
  <span class="reply">
    <a class="comment-reply-link" href="?replytocom=x#respond" data-commentid="x" data-postid="x" data-belowelement="x" data-respondelement="x">返信</a>
  </span>
</li>

id=”comment-id”がついたリストの中に返信ボタンがあれば動作します。

これを生成するコードはこんな感じです。

function mytheme_comment($comment, $args, $depth) {
    <li id="comment-<?php echo $comment->comment_ID ?>">
        <span class="reply">
                <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
        </span>
    </li>
<?php
}

これをwp_list_comments()のコールバックに渡して上手く返信ボタンが動作するかを確認して、オリジナルの構造を作っていくと良いでしょう。

これでもダメならもっと細かくcomment-reply.jsを読んで問題を探すしかないです。