web-dev-qa-db-ja.com

<a>ではなく<span>要素を使用してcomment-reply-buttonを作成する方法

私は現在私の最初のWordPressブログをデザインしようとしています、私はcomment-reply-buttonをspanelementだけにコード化したいので、comment-reply-buttonをコーディングしましたa要素ではありません。私はこれをいくつかのブログで見たのでそれが可能であることを知っています：

 

できます。しかし、私は自分のレベルを最善を尽くしましたが、実用的なレベルにすることはできませんでした。あなたは専門家が私を手伝ってくれませんか。私はカスタムコールバックについてコメントしています。それらを一目見て解決方法を教えてください。

function comment($comment, $args, $depth) {$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
<div class="comment-author">
<cite class="fn"><?php printf(__('%s'), get_comment_author_link()) ?></cite>
</div>
<?php comment_text(); ?>
<div class="comment-reply">

**** HERE <SPAN> ELEMENT FOR REPLY-BUTTON WILL BE PLACED ****

</div>
</div>
<?php } ?>

enter image description here 

これも返信用のカスタムコメントフォームです。

phpfunctionscommentswp-list-comments
1
Rishabh Jha

次のようなカスタムコメント応答要素を生成できます。

これは**** HERE <SPAN> ELEMENT FOR REPLY-BUTTON WILL BE PLACED ****を置き換えます。

<?php if ( get_option( 'comment_registration' ) && ! is_user_logged_in() ) : ?>
    <a rel="nofollow" class="comment-reply-login" href="<?php // wrapped
      echo esc_url( wp_login_url( get_permalink() ) ); ?>">Log in to Reply</a>
<?php else : // User is logged-in or that registration not needed to comment.
// 'respond' is the ID of the comment form's wrapper.
$onclick = sprintf( 'return addComment.moveForm( "%s", "%d", "respond", "%d" )',
    'div-comment-' . $comment->comment_ID, $comment->comment_ID, get_the_ID() ); ?>
    <span class="btn btn-rwr"
      data-href="#comment-<?php echo $comment->comment_ID; ?>" onclick='<?php echo $onclick; ?>'
      aria-label="Reply to <?php echo esc_attr( $comment->comment_author ); ?>">Reply</span>
<?php endif; ?>

spanマークアップは、 image のマークアップとidenticalです。ただし、簡単に変更できます。

更新

カスタムのspan要素をクリックしても何も起こらない場合は、コメント応答（JavaScript）スクリプトがロードされていることを確認してください：（このコードをテーマのfunctions.phpファイルに追加）

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

そして、以下のrespondがコメントフォームのwrapperの正しいIDであることを確認してください：

$onclick = sprintf( 'return addComment.moveForm( "%s", "%d", "respond", "%d" )'

また、CSSに次のようなものを追加することもできます。

.comment-reply > span {
    cursor: pointer;
}

更新＃2

デフォルトのcomment-replyスクリプト（以前の更新を確認）が期待どおりに機能するようにするには、コメントに<li>、.comment-replyをbelow/after内ではなく.comment-body：

<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
    <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
        ...
    </div><!-- .comment-body -->
    <div class="comment-reply">
        ...the SPAN here..
    </div>
</li>

また、CSSには次のようなものが必要です。

#respond + .comment-reply {
    display: none;
}

「返信」span /ボタンをクリックした後、非表示にします。

0
Sally CJ