web-dev-qa-db-fra.com

Comment créer un bouton commentaire-réponse à l'aide de l'élément <span> et non de <a>

Je travaille actuellement à la conception de mon premier blog WordPress et je me suis retrouvé coincé quand je suis arrivé à coder le bouton commentaire-réponse parce que je veux que le commentaire-réponse-bouton soit codé dans span élément uniquement non a élément du tout. Je sais que c'est possible parce que j'ai vu cela sur un blog:

  

Ça marche. Mais, j'ai essayé de mon mieux mais je ne pouvais pas travailler. Voulez-vous des experts s'il vous plaît aidez-moi! Je parle du custom callback que j'utilise comme système de commentaires, jetez-y un coup d'œil et donnez-moi une solution.

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 

Voici le formulaire de commentaire personnalisé pour répondre également.

phpfunctionscommentswp-list-comments
1
Rishabh Jha

Vous pouvez générer un élément de réponse de commentaire personnalisé comme suit:

_ {Ceci remplacera le **** 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; ?>

Le balisage span est identique à celui de image . Mais vous pouvez le changer facilement ..

METTRE À JOUR

Si rien ne se passe lorsque vous cliquez sur l'élément span personnalisé, assurez-vous que le script de réponse en commentaire (JavaScript) est chargé:(ajoutez ce code au fichier functions.php du thème))} 

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

Et assurez-vous que respond ci-dessous est l'ID correct du wrapper : du formulaire de commentaire.

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

Et dans votre CSS, vous pouvez également ajouter quelque chose comme:

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

MISE À JOUR # 2

Pour que le script comment-reply par défaut (vérifier la mise à jour précédente) fonctionne comme prévu, dans votre commentaire <li>, .comment-reply doit être placé inférieur/suivant et non à l'intérieur de le .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>

Et dans votre CSS, vous devriez avoir quelque chose comme:

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

pour masquer le bouton "Répondre" span/après avoir cliqué dessus.

0
Sally CJ