web-dev-qa-db-ja.com

Comment_reply_linkがコメントセクションの間違った場所に返信フォームを開くのはなぜですか？

私はこのカスタムextended Walker_Commentsクラスを持っています：

class Custom_Comment_Walker extends Walker_Comment {
    var $tree_type = 'comment';
    var $db_fields = array( 'parent' => 'comment_parent', 'id' => 'comment_ID' );

    function __construct() { ?>
        <ul class="comments-list col-md-12">

    <?php }

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1;
        ?>

        <ul class="child-comments comments-list col-md-12">

    <?php }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1; ?>

        </ul>

    <?php }

    function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 ) {
        $depth++;
        $GLOBALS['comment_depth'] = $depth;
        $GLOBALS['comment'] = $comment;

        $tag = 'li';
        $add_below = 'comment';
        ?>

        <li <?php comment_class( $depth == '1' ? 'parent col-md-12' : 'child col-md-11') ?> id="comment-<?php comment_ID() ?>" itemprop="comment" itemscope itemtype="http://schema.org/Comment">
            <div class="comment-wrapper col-md-12">
                <?php echo get_avatar( $comment, 65, '[default gravatar URL]', 'Author’s gravatar' ); ?>
                <div class="info">
                    <div class="comment-meta" role="complementary">
                        <h2 class="comment-author">
                            <a class="comment-author-link" href="<?php comment_author_url(); ?>" itemprop="author"><?php comment_author(); ?></a>
                        </h2>
                        <time class="comment-time" datetime="<?php comment_date('Y-m-d') ?>T<?php comment_time('H:iP') ?>" itemprop="datePublished"><?php comment_date('jS F Y') ?>, <a href="#comment-<?php comment_ID() ?>" itemprop="url"><?php comment_time() ?></a></time>
                        <?php edit_comment_link('<p class="comment-meta-item">Edit this comment</p>','',''); ?>
                        <?php if ($comment->comment_approved == '0') : ?>
                        <p class="comment-time">Your comment is awaiting moderation.</p>
                        <?php endif; ?>
                    </div>
                    <div class="comment-content" itemprop="text">
                        <?php comment_text() ?>
                        <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ) ?>
                    </div>
                </div>
            </div>

    <?php }

    function end_el(&$output, $comment, $depth = 0, $args = array() ) { ?>

        </li>

    <?php }

    function __destruct() { ?>

        </ul>

    <?php }
}

レンダリング後、これは次のようにレイアウトされます。

enter image description here 

返信ボタンを押すと、フォームがそれを起動したコメントの下に移動したいのですが、代わりにフォームがツリーの開始位置の下に表示されます（gif image）

https://i.imgur.com/QQij8a4.gifv

私はこれが正しいパラメータを渡さないことに関係していると思います

comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) )

これを達成するにはどうすればよいでしょうか。

commentscomment-formcomments-templatewp-list-comments
3
Jonathan Guerin

これはJavaScriptで行われるので、ドキュメントに記載されているように、それが機能するにはそのJavaScriptをエンキューする必要があります。

JavaScriptが有効で、comment-reply.js JavaScriptがロードされている場合、リンクはコメントフォームをコメントのすぐ下に移動します。

https://codex.wordpress.org/Function_Reference/comment_reply_link

例えば.

function wpse289875_enqueue_comments_reply() {
    if ( is_singular() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'comment_form_before', 'wpse289875_enqueue_comments_reply' );

https://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#Javascript_Comment_Functionality にも注意してください。

編集 基本的な問題は、コードが同じフォーマットを使用していないため、必要なIDが存在しないことです。

たとえば、コメント返信はIDを使用して返信フォームを配置するコメントを見つけますが、HTMLにはIDがありません。wp-includes/class-walker-comment.phpの次の行を参照してください。

<div id="div-comment-<?php comment_ID(); ?>" class="comment-body">

あなたのコードに同等なものはありません。外観から少なくともこれらのIDが存在する必要があります。

  • コメント-x
  • div-comment-x

後者は前者の内側にネストされ、xはそのコメントのIDです。

ローカルのdev envなどのテスト環境でデフォルトのテーマの1つに切り替えてデフォルトの動作HTMLを取得することも、コアのwp-includes/class-walker-comment.phpのコメントウォーカークラスを見ることによっていつでも切り替えることができることに注意してください。

参考のために、ここで定義されているmoveform関数をオーバーライドすることもできます。

https://github.com/WordPress/WordPress/blob/master/wp-includes/js/comment-reply.js#L213

それはメインのwindowオブジェクトに追加されるので、あなたはそれをあなた自身のコピーに置き換えることができます。

1
Tom J Nowell