Créer un thème WordPress : 8. Le Template Comments

Cet article est une traduction du tutoriel How To Create a WordPress Theme rédigé par Ian Stewart, l’auteur du framework WordPress Thematic disponible sur son site ThemeShaper. Avec son aimable autorisation et mes remerciements.

Je déteste le template des commentaires. Et j’avoue que c’est très déroutant. La version 2.7 de WordPress a apporté des améliorations pour créer le template des commentaires – mais ces améliorations ne sont d’aucune aide dès que vous voulez séparer les commentaires des trackbacks ou avoir des balises personnalisées. C’est donc toujours aussi déroutant pour moi.

Heureusement pour vous, je m’en suis sorti. Avec pas mal d’efforts mais c’est une affaire classée. Pour ce tutoriel sur le template comments je vais simplement vous expliquer ce qui se passe, vous montrer quelques bribes personnalisées à ajouter à votre functions.php, et enfin vous livrer le tout. Je vais commencer par quelques explications et pour finir vous aurez un template comments redoutable.

Faisons une liste rapide des choses que nous devons faire dans ce template :

Empêcher la visibilité pour les robots de recherche et les articles protégés par mot de passe
Vérifier s’il y a des commentaires
Compter le nombre de commentaires et de trackbacks
S’il y a des commentaires, les afficher, en incluant la navigation au travers des pages
S’il y a des trackbacks, les afficher
Si les commentaires sont ouverts, afficher le formulaire pour répondre

Cela fait beaucoup de choses pour un seul template même si écrit de cette façon cela paraît plus clair.

Suivi des Commentaires et Trackbacks Personnalisés

Avec la version 2.7 de WordPres est apparue la fonction wp_list_comments() qui crée une liste des commentaires et des trackbacks de votre article (y compris la gestion des commentaires suivis). C’est très bien si c’est ce que vous voulez faire, mais nous voulons faire différemment. En effet nous voulons séparer les commentaires suivis des trackbacks, avec nos propres balises.

Pour réaliser le template comments, vous allez avoir du travail. Vous devez avoir un ensemble de callbacks (ndT : j’ai pas trouvé mieux pour le traduire) pour votre liste de commentaires et de trackbacks. Ajoutez les deux fonctions suivantes à votre fichier functions.php :

// Custom callback to list comments in the your-theme style
function custom_comments($comment, $args, $depth) {
  $GLOBALS['comment'] = $comment;
	$GLOBALS['comment_depth'] = $depth;
  ?>
  	<li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>
  		<div class="comment-author vcard"><?php commenter_link() ?></div>
  		<div class="comment-meta"><?php printf(__('Posted %1$s at %2$s <span class="meta-sep">|</span> <a href="%3$s" title="Permalink to this comment">Permalink</a>', 'your-theme'),
  					get_comment_date(),
  					get_comment_time(),
  					'#comment-' . get_comment_ID() );
  					edit_comment_link(__('Edit', 'your-theme'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>
  <?php if ($comment->comment_approved == '0') _e("\t\t\t\t\t<span class='unapproved'>Your comment is awaiting moderation.</span>\n", 'your-theme') ?>
          <div class="comment-content">
      		<?php comment_text() ?>
  		</div>
		<?php // echo the comment reply link
			if($args['type'] == 'all' || get_comment_type() == 'comment') :
				comment_reply_link(array_merge($args, array(
					'reply_text' => __('Reply','your-theme'), 
					'login_text' => __('Log in to reply.','your-theme'),
					'depth' => $depth,
					'before' => '<div class="comment-reply-link">', 
					'after' => '</div>'
				)));
			endif;
		?>
<?php } // end custom_comments

// Custom callback to list pings
function custom_pings($comment, $args, $depth) {
       $GLOBALS['comment'] = $comment;
        ?>
    		<li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>
    			<div class="comment-author"><?php printf(__('By %1$s on %2$s at %3$s', 'your-theme'),
    					get_comment_author_link(),
    					get_comment_date(),
    					get_comment_time() );
    					edit_comment_link(__('Edit', 'your-theme'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>
    <?php if ($comment->comment_approved == '0') _e('\t\t\t\t\t<span class="unapproved">Your trackback is awaiting moderation.</span>\n', 'your-theme') ?>
            <div class="comment-content">
    			<?php comment_text() ?>
			</div>
<?php } // end custom_pings

Ca peut paraître un peu compliqué, mais cela va beaucoup vous aider. Vous disposez maintenant les balises pour les commentaires. Je pense que les balises qui sont générées ici sont suffisantes pour pouvoir faire toutes les mises en forme avec CSS, mais si vous voulez quand même les modifier, c’est ici que ça se passe.

Nous aurons également besoin d’une fonction personnalisée qui sera appelée par la fonction custom_comments(). Cette fonction va appliquer une balise au gravatar que nous utiliserons de sorte qu’elle soit conforme au schéma microformat hcard.

// Produces an avatar image with the hCard-compliant photo class
function commenter_link() {
	$commenter = get_comment_author_link();
	if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {
		$commenter = ereg_replace( '(<a[^>]* class=[\'"]?)', '\\1url ' , $commenter );
	} else {
		$commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter );
	}
	$avatar_email = get_comment_author_email();
	$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, 80 ) );
	echo $avatar . ' <span class="fn n">' . $commenter . '</span>';
} // end commenter_link

Si vous voulez changer la taille par défaut de votre gravatar modifiez simplement le 80 dans la fonction get_avatar( $avatar_email, 80 ). Le 80 est la taille en pixels de votre gravatar.

Le Template Comments

J’espère que je ne vous ai pas fait trop peur. Pour être honnête ce n’est pas si effrayant. Voici le template comments avec les commentaires du code PHP qui devraient vous aider à comprendre son fonctionnement.

<?php /* The Comments Template — with, er, comments! */ ?>			
			<div id="comments">
<?php /* Run some checks for bots and password protected posts */ ?>	
<?php
	$req = get_option('require_name_email'); // Checks if fields are required.
	if ( 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']) )
		die ( 'Please do not load this page directly. Thanks!' );
	if ( ! empty($post->post_password) ) :
		if ( $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password ) :
?>
				<div class="nopassword"><?php _e('This post is password protected. Enter the password to view any comments.', 'your-theme') ?></div>
			</div><!-- .comments -->
<?php
		return;
	endif;
endif;
?>
 
<?php /* See IF there are comments and do the comments stuff! */ ?>						
<?php if ( have_comments() ) : ?>
 
<?php /* Count the number of comments and trackbacks (or pings) */
$ping_count = $comment_count = 0;
foreach ( $comments as $comment )
	get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;
?>
 
<?php /* IF there are comments, show the comments */ ?>
<?php if ( ! empty($comments_by_type['comment']) ) : ?>
 
				<div id="comments-list" class="comments">
					<h3><?php printf($comment_count > 1 ? __('<span>%d</span> Comments', 'your-theme') : __('<span>One</span> Comment', 'your-theme'), $comment_count) ?></h3>
 
<?php /* If there are enough comments, build the comment navigation  */ ?>					
<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>
					<div id="comments-nav-above" class="comments-navigation">
								<div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>
					</div><!-- #comments-nav-above -->					
<?php endif; ?>					
 
<?php /* An ordered list of our custom comments callback, custom_comments(), in functions.php   */ ?>				
					<ol>
<?php wp_list_comments('type=comment&callback=custom_comments'); ?>
					</ol>
 
<?php /* If there are enough comments, build the comment navigation */ ?>
<?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>					
	  			<div id="comments-nav-below" class="comments-navigation">
						<div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>
	        </div><!-- #comments-nav-below -->
<?php endif; ?>					
 
				</div><!-- #comments-list .comments -->

<?php endif; /* if ( $comment_count ) */ ?>
 
<?php /* If there are trackbacks(pings), show the trackbacks  */ ?>
<?php if ( ! empty($comments_by_type['pings']) ) : ?>
 
				<div id="trackbacks-list" class="comments">
					<h3><?php printf($ping_count > 1 ? __('<span>%d</span> Trackbacks', 'your-theme') : __('<span>One</span> Trackback', 'your-theme'), $ping_count) ?></h3>
 
<?php /* An ordered list of our custom trackbacks callback, custom_pings(), in functions.php   */ ?>					
					<ol>
<?php wp_list_comments('type=pings&callback=custom_pings'); ?>
					</ol>				
 
				</div><!-- #trackbacks-list .comments -->			

 
<?php endif /* if ( $ping_count ) */ ?>
<?php endif /* if ( $comments ) */ ?>
 
<?php /* If comments are open, build the respond form */ ?>
<?php if ( 'open' == $post->comment_status ) : ?>
				<div id="respond">
    				<h3><?php comment_form_title( __('Post a Comment', 'your-theme'), __('Post a Reply to %s', 'your-theme') ); ?></h3>
 
    				<div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>
 
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
					<p id="login-req"><?php printf(__('You must be <a href="%s" title="Log in">logged in</a> to post a comment.', 'your-theme'),
					get_option('siteurl') . '/wp-login.php?redirect_to=' . get_permalink() ) ?></p>
 
<?php else : ?>
					<div class="formcontainer">	
 
 
						<form id="commentform" action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">
 
<?php if ( $user_ID ) : ?>
							<p id="login"><?php printf(__('<span class="loggedin">Logged in as <a href="%1$s" title="Logged in as %2$s">%2$s</a>.</span> <span class="logout"><a href="%3$s" title="Log out of this account">Log out?</a></span>', 'your-theme'),
								get_option('siteurl') . '/wp-admin/profile.php',
								wp_specialchars($user_identity, true),
								wp_logout_url(get_permalink()) ) ?></p>
 
<?php else : ?>
 
							<p id="comment-notes"><?php _e('Your email is <em>never</em> published nor shared.', 'your-theme') ?> <?php if ($req) _e('Required fields are marked <span class="required">*</span>', 'your-theme') ?></p>
 
              <div id="form-section-author" class="form-section">
								<div class="form-label"><label for="author"><?php _e('Name', 'your-theme') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'your-theme') ?></div>
								<div class="form-input"><input id="author" name="author" type="text" value="<?php echo $comment_author ?>" size="30" maxlength="20" tabindex="3" /></div>
              </div><!-- #form-section-author .form-section -->

              <div id="form-section-email" class="form-section">
								<div class="form-label"><label for="email"><?php _e('Email', 'your-theme') ?></label> <?php if ($req) _e('<span class="required">*</span>', 'your-theme') ?></div>
								<div class="form-input"><input id="email" name="email" type="text" value="<?php echo $comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div>
              </div><!-- #form-section-email .form-section -->

              <div id="form-section-url" class="form-section">
								<div class="form-label"><label for="url"><?php _e('Website', 'your-theme') ?></label></div>
								<div class="form-input"><input id="url" name="url" type="text" value="<?php echo $comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div>
              </div><!-- #form-section-url .form-section -->

<?php endif /* if ( $user_ID ) */ ?>
 
              <div id="form-section-comment" class="form-section">
								<div class="form-label"><label for="comment"><?php _e('Comment', 'your-theme') ?></label></div>
								<div class="form-textarea"><textarea id="comment" name="comment" cols="45" rows="8" tabindex="6"></textarea></div>
              </div><!-- #form-section-comment .form-section -->
              
              <div id="form-allowed-tags" class="form-section">
	              <p><span><?php _e('You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:', 'your-theme') ?></span> <code><?php echo allowed_tags(); ?></code></p>
              </div>
 
<?php do_action('comment_form', $post->ID); ?>
 
							<div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php _e('Post Comment', 'your-theme') ?>" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div>
 
<?php comment_id_fields(); ?>  
 
<?php /* Just … end everything. We're done here. Close it up. */ ?>  
 
						</form><!-- #commentform -->										
					</div><!-- .formcontainer -->
<?php endif /* if ( get_option('comment_registration') && !$user_ID ) */ ?>
				</div><!-- #respond -->
<?php endif /* if ( 'open' == $post->comment_status ) */ ?>
			</div><!-- #comments -->

C’est tout, vous avez maintenant un template comments personnalisé rien qu’à vous.

Cet article fait partie du tutoriel Créer un Thème WordPress :

Introduction

Outils de Développement

Structure HTML du Thème

Structure des Dossiers et Templates

Template Header

Template Index

Templates Single, Attachment et 404

Template Comments

Template Search et Page

Template Archives, Auteur, Catégories et Mots clés

Template Sidebar

Design du Thème, Initialisation et Construction CSS

Créer un thème WordPress : 8. Le Template Comments

Suivi des Commentaires et Trackbacks Personnalisés

Le Template Comments

2 commentaires

Laisser un commentaire

Mes galeries

RSS

Recherche

Catégories

Archives

Articles récents

What I'm Doing...

Créer un thème WordPress : 8. Le Template Comments

Suivi des Commentaires et Trackbacks Personnalisés

Le Template Comments

2 commentaires

Laisser un commentaire

Mes galeries

RSS

Recherche

Catégories

Archives

Mots-clefs

Articles récents

What I'm Doing...