Gérer les commentaires dans wordpress

Aujourd’hui on va tenter de comprendre comment sont construits les commentaires dans wordpress, et comment les modifier..

On part d’un formulaire de commentaire classique

On a généralement les input par défaut nom, mail et site web.Une asterisque pour les champs obligatoires, et des labels devant chaque input.

et on veut parvenir à ce résultat:

On veut pouvoir changer l’ordre des input, remplacer les labels par des placeholders etc…

D’abord la première chose à faire est de se documenter, chercher, puis enfin trouver ou se trouve le code du formulaire de commentaire, et comment le modifier.

Le template du formulaire, c’est à dire toute la partie de la page concernant le formulaire se trouve dans le fichier comments.php, généralement, sous cette forme et accessible dans chaque thème

<div id="comments" class="comments-area">

	<?php // You can start editing here -- including this comment! ?>

	<?php if ( have_comments() ) : ?>

<br />

<h2 class="comments-title">

			<?php

				printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'utopia' ),

				number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );

			?>

</h2>

<p>

<br />

<ol class="commentlist">

			<?php wp_list_comments( ); ?>

</ol>

<p>

<!-- .commentlist -->

		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>

<br />

<nav id="comment-nav-below" class="navigation" role="navigation">

<br />

<h1 class="assistive-text section-heading"><?php _e( 'Comment navigation', 'utopia' ); ?></h1>

<p>



<br />

<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'utopia' ) ); ?></div>

<p>

<br />

<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'utopia' ) ); ?></div>

<p>

		</nav>

<p>

		<?php endif; // check for comment navigation ?>

		<?php /* If there are no comments and comments are closed, let's leave a note. * But we only want the note on posts and pages that had comments in the first place. */ if ( ! comments_open() && get_comments_number() ) : ?>

		

<?php _e( 'Comments are closed.' , 'utopia' ); ?>

		<?php endif; ?>

	<?php endif; // have_comments() ?>

	<?php comment_form(); ?>

</div>

<p>

<!-- #comments .comments-area -->

A la manière d’une page d’archive, elle est structurée dans une condition : if{}else..
Comme titre, on a le nombre de commentaires, en dessous la loop wordpress affichant la liste des commentaires, avec wp_list_comments().

En dessous, la navigation dans les commentaires, puis une condition pour dire s’il n’y a pas de commentaires, marque « les commentaires sont fermés »
En fait c’est comme une page d’archive de posts, avec la condition finale pour dire s’il n’y a pas de post, retourne moi la page content-none, par exemple
A la fin de cette grande condition, on retrouve notre formulaire avec <?php comment_form(); ?>

C’est donc bien ce que l’on retrouve sur la plupart de nos sites: sur la page d’article, un message invitant à poster un commentaire, une liste de commentaire..puis le formulaire.

En résumé, on a donc deux endroits ou modifier le code de nos templates de commentaires;

La fonction wp_list_comment, que l’on va modifier pour changer l’aspect global des blocs de commentaires, et comment_form, à laquelle on va rajouter des arguments et sur laquelle on va ajouter un filtre, pour modifier le formulaire lui meme.

Modifier le formulaire

Comme on sait qu’il ne faut jamais toucher au code code du cms, on doit trouver un moyen d’éffacer cette version du formulaire pour créer la notre.Cela est possible grace à filtre que l’on va appliquer sur la fonction comment_form():

add_filter('comment_form_default_fields',..)

Voici un exemple, à insérer dans functions.php:

/*COMMENT FORM CUSTOM*/

function ecommerce_modify_comment_form_fields($fields){

$commenter = wp_get_current_commenter();

$req = get_option( 'require_name_email' );

$aria_req = ( $req ? " aria-required='true'" : '' );

$fields['author'] = '

<br />

<div class="form-group">

<br />

<div class="row">

<br />

<div class="col-lg-6 col-xs-12">

'. 	

	( $req ? '<span class="required"></span>' : '' ) .

	'<input id="author" name="author" type="text" placeholder="Nom(required)" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />

</div>

<p>

</div>

<p>

</div>

<p>

';					

        $fields['email'] = '

<br />

<div class="form-group">

<br />

<div class="row">

<br />

<div class="col-lg-6 col-xs-12">

'.

	( $req ? '<span class="required"></span>' : '' ) .

	'<input id="email" name="email" type="text" placeholder="Adresse de messagerie(ne sera pas diffusée) required" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />

</div>

<p>

';

	$fields['url'] = '

<br />

<div class="col-lg-6 col-xs-12">

'.

	'<input id="url" name="url" type="text" placeholder="Site web" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" />

</div>

<p>

</div>

<p>

</div>

<p>

';	

    return $fields;

}

add_filter('comment_form_default_fields','ecommerce_modify_comment_form_fields');

Comme on le voit, on décide ici d’afficher rajouter ou supprimer des inputs, mis à part l’input textarea qui reste séparé du groupe..

je fais ici appel à des classe bootstrap pour englober mes input, et rendre le tout responsive plus rapidement.Le résultat, est le deuxième formulaire visible en haut de page

Grace à ce filtre, je viens donc de modifier le formulaire lui même, c’est à dire les input par défaut et leur donner des classes pour styliser le tout.On peut changer l’ordre des input etc..La fonction comment_form() va donc maintenant renvoyer mon formulaire modifié.

Maintenant , on veut modifier ce qui englobe le formulaire : le titre et le footer de ce formulaire. Généralement on a ici un message, comme sur le premier formulaire du genre « votre adresse ne sera pas publiée« …

Dans l’appel de notre fonction. comment_form(), fichier comments.php, on va rajouter des arguments pour définir ce qui précède notre formulaire et ce qui lui succède: un message, une image, peu importe:

 <?php $comments_args = array( // change the title of send button 'label_submit'=>'Soumettre le commentaire',

        // change the title of the reply section

        'title_reply'=>'

<br />

<h2>Laissez un commentaire</h2>

<p>

',

        // remove "Text or HTML to be displayed after the set of comment fields"

        'comment_notes_after' => '',

        'comment_notes_before' => '',

        // redefine your own textarea (the comment body)

        'comment_field' => '

<textarea id="comment" name="comment" placeholder="Message" cols="45" rows="8" aria-required="true"></textarea>

',

);



comment_form($comments_args);?>

Le message à afficher avant et après avec ‘comment_notes_after’ => »,
‘comment_notes_before’ => », laissés volontairement vides ici
Le message de l’input submit avec ‘label_submit’=>’Soumettre le commentaire’,
Le titre du formulaire avec ‘title_reply’=>'<h2>Laissez un commentaire</h2>’.

Modifier le template de commentaire

Maintenant on va voir comment modifier tout le bloc des commentaires, la ou s’affichent tous les messages des internautes.

C’est le bloc des commentaires visible dans chaque article, lorsqu’une personne a posté un commentaire sur votre site et que vous avez bien sur activé les commentaires et activé l’affichage des avatars dans les réglages du backoffice.

De ca, on veut passer à ca:

Dan le fichier comments.php de tout à l’heure, on a parlé de la fonction wp_list_comment, qui affiche justement une liste de commentaires..C’est sur elle que l’on va appliquer une méthode de call_back, pour créer notre propre template de commentaire: en principe, en regardant dans les thèmes, gratuits ou payant, on retrouve toujours une fonction qui remplace le template de commentaires par défaut de wordpress.

Voici un exemple à intégrer dans le fichier functions.php

/*CUSTOM COMMENT TEMPLATE*/

function my_comments_callback( $comment, $args, $depth ) {

    $GLOBALS['comment'] = $comment;?>

    <br />

<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">

<br />

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

<br />

<div class="comment-header">

                <span class="comment-author vcard">

                    <?php if ( 0 != $args['avatar_size'] ) echo get_avatar( $comment, $args['avatar_size'] ); ?>

			<?php printf( __( '<cite class="fn">%s</cite>' ), get_comment_author_link() ); ?>

                </span>

                <?php if ( '0' == $comment->comment_approved ) : ?>

		<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ) ?></em>

		

		<?php endif; ?>

                <span class="comment-meta commentmetadata">

                    <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID, $args ) ); ?>">

			<?php /* translators: 1: date, 2: time */ printf( __( '%1$s at %2$s' ), get_comment_date(), get_comment_time() ); ?></a>                    

                </span>

</div>

<p>

<br />

<div class="commentbloc">

<br />

<div class="comment-content"><?php comment_text(); ?></div>

<p>

<br />

<div class="reply">

                <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Répondre <span></span>', '202' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>

</div>

<p>

</div>

<p>

        </article>

<p>

</li>

<p>

    <?php

}

c’est ici qu’on va retrouver les classes pour l’avatar, le titre, la date, le texte etc…il suffit donc de styliser tout ca, changer l’ordre des choses afin d’obtenir l’apparence souhaitée, pour les blocs de commentaires.

Etape finale

Maintenant que l’on a modifié l’apparence de la liste des commentaires, on va retourner dans notre fichier comments.php et donner en argument à la fonction wp_list_comments(), notre fonction de call_back

<ol class="comment-list">

            <?php wp_list_comments(array('callback' => 'my_comments_callback'));

            ?>

</ol>

<p>

<!-- .comment-list -->

je signale à wordpress mes nouveaux arguments, pour qu’il prenne en compte mon template de commentaire.

Voici le fichier comments.php en entier:

<?php /** * The template for displaying comments. * * This is the template that displays the area of the page that contains both the current comments * and the comment form. * * @link https://codex.wordpress.org/Template_Hierarchy * * @package ecommerce */ /* * If the current post is protected by a password and * the visitor has not yet entered the password we will * return early without loading the comments. */ if (post_password_required()) { return; } ?>



<br />

<div id="comments" class="comments-area">

    <?php // You can start editing here -- including this comment! ?>

    <?php if (have_comments()) : ?>

<br />

<div class="comments-list">

<br />

<h2 class="comments-title">

                <?php

                printf(// WPCS: XSS OK.

                        esc_html(_nx('One thought', '%1$s thoughts', get_comments_number(), 'comments title', 'ecommerce')), number_format_i18n(get_comments_number()), '<span>' . get_the_title() . '</span>'

                );

                ?>

</h2>

<p>

                <?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : // Are there comments to navigate through? ?>

<br />

<nav id="comment-nav-above" class="navigation comment-navigation" role="navigation">

<br />

<h2 class="screen-reader-text"><?php esc_html_e('Comment navigation', 'ecommerce'); ?></h2>

<p>

<br />

<div class="nav-links">

<br />

<div class="nav-previous"><?php previous_comments_link(esc_html__('Older Comments', 'ecommerce')); ?></div>

<p>

<br />

<div class="nav-next"><?php next_comments_link(esc_html__('Newer Comments', 'ecommerce')); ?></div>

<p>

</div>

<p>

<!-- .nav-links -->

                </nav>

<p>

<!-- #comment-nav-above -->

    <?php endif; // Check for comment navigation. ?>

<br />

<ol class="comment-list">

            <?php wp_list_comments(array('callback' => 'my_comments_callback'));

            ?>

</ol>

<p>

<!-- .comment-list -->

                <?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : // Are there comments to navigate through? ?>

<br />

<nav id="comment-nav-below" class="navigation comment-navigation" role="navigation">

<br />

<h2 class="screen-reader-text"><?php esc_html_e('Comment navigation', 'ecommerce'); ?></h2>

<p>

<br />

<div class="nav-links">

<br />

<div class="nav-previous"><?php previous_comments_link(esc_html__('Older Comments', 'ecommerce')); ?></div>

<p>

<br />

<div class="nav-next"><?php next_comments_link(esc_html__('Newer Comments', 'ecommerce')); ?></div>

<p>

</div>

<p>

<!-- .nav-links -->

                </nav>

<p>



<!-- #comment-nav-below -->

    <?php endif; // Check for comment navigation. ?>



    <?php // If comments are closed and there are comments, let's leave a little note, shall we? if (!comments_open() && '0' != get_comments_number() && post_type_supports(get_post_type(), 'comments')) : ?>

                

<?php esc_html_e('Comments are closed.', 'ecommerce'); ?>

            <?php endif; ?>

</div>

<p>

<?php endif; // Check for have_comments(). ?>

<br />

<div class="comments-form">

        <?php $comments_args = array( // change the title of send button 'label_submit'=>'Soumettre le commentaire',

        // change the title of the reply section

        'title_reply'=>'

<br />

<h2>Laissez un commentaire</h2>

<p>

',

        // remove "Text or HTML to be displayed after the set of comment fields"

        'comment_notes_after' => '',

        'comment_notes_before' => '',

        // redefine your own textarea (the comment body)

        'comment_field' => '

<textarea id="comment" name="comment" placeholder="Message" cols="45" rows="8" aria-required="true"></textarea>

',

);



comment_form($comments_args);?>

</div>

<p>



</div>

<p>

<!-- #comments -->

En principe, il ne vous reste plus qu’a appliquer vos propres styles, l’avatar en position absolute par exemple pour le faire sortir du cadre.Sans oublier la position relative pour le cadre parent bien sur pour que ca marche..etc etc..

On est donc intervenu dans deux fichiers, comments.php et functions.php, Le style ensuite dépendra de chacun.

05/09/2015 Mis à jour le 19/12/2019 Par Copier coller | Dans wordpress