Comment personnaliser WordPress comment_form();

Publié par Jean-Michel le

Je développe actuellement mon propre thème WordPress et j’ai récemment travaillé sur un fichier comments_template();. J’ai lu que l’utilisation de la wp_list_comments();méthode est la meilleure pratique pour extraire et afficher les commentaires par page/poste. J’ai personnalisé avec succès la manière dont les commentaires sont extraits et affichés par cette méthode.

J’ai également lu que l’utilisation de la comment_form();méthode est la meilleure pratique pour afficher le formulaire de commentaire. Cependant, j’ai vraiment du mal à essayer de personnaliser cela. Je suis un peu confus entre les $args , les filtres et les actions .

Essentiellement, je voudrais changer radicalement certaines parties du formulaire de commentaire. Comment puis-je modifier des parties du formulaire de commentaire tout en utilisant les meilleures pratiques avec la comment_form();méthode ?

Tout ce que j’ai vraiment besoin de faire, c’est d’envelopper plusieurs des <p>balises existantes dans <divs>. La liste des mises à jour que j’essaie de faire est ci-dessous :

  1. Ajustez l’ <h3>en-tête pour<h2 class="comments-header">Tell us about you!</h2>
  2. Enveloppez les champs de formulaire dans<fieldset></fieldset>
  3. Envelopper <label>_<div class="label"></div>
  4. Envelopper <input>_<div class="field"></div>
  5. Afficher <p class="form-allowed-tags"></p>avant le commentaire plutôt qu’après<textarea>
  6. Modifier le bouton Soumettre du formulaire pour utiliser l’ <button>élément plutôt que<input>

S’il vous plaît voir le code ci-dessous pour plus d’explications …

comment_form(); code qui est sorti :

<div id="respond">
    <h3 id="reply-title">Leave a Reply</h3>
    <form action="http://localhost/.../wp-comments-post.php" method="post" id="commentform">
        <p class="comment-notes">
            Your email address will not be published. Required fields are marked
            <span class="required">*</span>
        </p>
        <p class="comment-form-author">
            <label for="author">Name</label>
            <span class="required">*</span>
            <input id="author" name="author" type="text" value="John Doe" size="30" aria-required="true">
        </p>
        <p class="comment-form-email">
            <label for="email">Email</label>
            <span class="required">*</span>
            <input id="email" name="email" type="text" value="johndoe@dodgeit.com" size="30" aria-required="true">
        </p>
        <p class="comment-form-url">
            <label for="url">Website</label>
            <input id="url" name="url" type="text" value size="30">
        </p>
        <p class="comment-form-comment">
            <label for="comment">Comment</label>
            <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
        </p>
        <p class="form-allowed-tags">
            You may use these HTML tags and attributes...
        </p>
        <p class="form-submit">
            <input name="submit" type="submit" id="submit" value="Post Comment">
            <input type="hidden" name="comment_post_ID" value="22" id="comment_post_ID">
            <input type="hidden" name="comment_parent" id="comment_parent" value="0">
        </p>
    </form>
</div> <!-- #respond -->

Code que j’essaie de sortir:

<div id="respond">
    <h2 class="comments-header">Tell us about you!</h2>
    <form action="http://localhost/.../wp-comments-post.php" method="post" id="commentform">
        <fieldset>
            <div class="label"><label for="author">Name <span class="required">*</span></label></div>
            <div class="field"><input id="author" name="author" type="text" value="<?php echo $comment_author_email; ?>" size="30" aria-required="true"></div>
        </fieldset>
        <fieldset>
            <div class="label"><label for="email">E&ndash;mail (will not be published) <span class="required">*</span></label></div>
            <div class="field"><input id="email" name="email" type="text" value="<?php echo $comment_author_email; ?>" size="30" aria-required="true"></div>
        </fieldset>

        <p class="form-allowed-tags">
            You may use these HTML tags and attributes...
        </p>

        <fieldset>
            <div class="field"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></div>
        </fieldset>

        <p class="form-submit">
            <button class="story-submit-btn" type="submit" name="submit" id="sub">Post your story</button>
            <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" id="comment_post_ID">
            <input type="hidden" name="comment_parent" id="comment_parent" value="0">
        </p>
    </form>
</div> <!-- #respond -->

Toute aide est grandement appréciée!

Lire également:  Wordpress : Comment définir la valeur par défaut cochée pour la case à cocher dans la méta-boîte

Solution n°1 trouvée

Si tout le reste échoue, dans comments.php dans votre répertoire de thème, changez comment_form($args);pour

ob_start();
comment_form($args);
$comment_form = ob_get_clean();
//insert code to modify $comment_form
echo $comment_form;

Je l’ai utilisé pour changer le bouton d’envoi en un bouton d’image.

Solution n°2 trouvée

Exemple simple de modification de certains champs de formulaire de commentaire.

$comments_args = array(
        // change the title of send button 
        'label_submit'=>'Send',
        // change the title of the reply section
        'title_reply'=>'Write a Reply or Comment',
        // remove "Text or HTML to be displayed after the set of comment fields"
        'comment_notes_after' => '',
        // redefine your own textarea (the comment body)
        'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br /><textarea id="comment" name="comment" aria-required="true"></textarea></p>',
);

comment_form($comments_args);

Pour plus d’informations : documentation comment_form() sur WordPress Codex

Lire également:  Wordpress : Manière sécurisée de permalien de lier des pages à l'intérieur de footer.php

Solution n°3 trouvée

J’utilise functions.phppour modifier l’affichage des commentaires. Je ne sais pas si c’est ainsi que les choses se passent maintenant (le dernier site que je développais avec WP et qui nécessitait des commentaires était en 2009 ;)), mais le voici (mettez-le dans functions.phple fichier ! :

function THEMENAME_comment($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
  *your comment display code*
}

N’oubliez pas de créer également un thème de pingback. Vous le faites de la même manière que les commentaires, la seule différence est la première ligne :

fonction THEMENAME_pings($comment, $args, $depth)

Une autre méthode peut être d’utiliser comments_template.

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *