Personalizzare i commenti nidificati in WordPress

WordPress dalla versione 2.7 supporta il threading dei commenti, ovvero l’incapsulamento di tutte le discussioni di un articolo. Il tag wp_list_comments() si prende carico della gestione delle liste nidificate, delle classi associate ad ogni livello di commento, di predisporre i link giusti e di recuperare i contenuti dei commenti. Il problema nasce quando si vuole personalizzare la modalità di visualizzazione dei commenti. In questo caso è necessario utilizzare l’opzione di callback che viene fornito nella lista degli argomenti di wp_list_comments().

Un callback è un’istruzione per eseguire un’altra funzione definita. Nel nostro caso la useremo per personalizzare il codice HTML dei commenti, pur mantenendo la possibilità di utilizzare il threading.
 

Definiamo il callback

 
Per prima cosa definiamo la nostra funzione di callback ed inseriamola nel file function.php (ovviamente ricordatevi si fare una copia di backup).
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function miotema_comment($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment;
?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
		<div id="comment-<?php comment_ID(); ?>">
			<div class="comment-author vcard">
				<?php echo get_avatar( $comment->comment_author_email, 48 ); ?>
				<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
			</div>
			<?php if ($comment->comment_approved == '0') : ?>
				<em><?php _e('Il tuo commento è in attesa di moderazione.') ?></em>
				<br />
			<?php endif; ?>
 
			<div class="comment-meta commentmetadata">
				<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a>
				<?php edit_comment_link(__('(Edit)'),'  ','') ?>
			</div>
                        </br></br>
			<?php comment_text() ?>
			<div class="reply">
				<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
			</div>
		</div>
<?php
}

 
Vediamo quale funzione entra in gioco.
 
comment_class()
Questa funzione crea un elenco di classi come class = “classe1 class2 class3″ per identificare i commenti pari/dispari, la profondità attuale dei commenti o altro.
 
comment_ID()
L’ID è il numero univoco del commento in corso.
 
get_avatar()
Utilizza l’e-mail per associare un gravatar. Primo parametro deve essere l’oggetto $ comment, il secondo è il formato per l’avatar, l’ultimo è l’URL di un avatar di default (deve essere URL completo).
 
get_comment_link()
Ottiene il link al commento in corso.
 
edit_comment_link()
Ottiene il link per modificare il commento corrente.
 
comment_text()
Ottiene il testo del il commento in corso.
 
comment_reply_link()
Ottiene il link per rispondere al commento in corso.
 

Agganciamo la nostra funzione

 
Il layout che andiamo a ridefinire è quello generato proprio da wp_list_comments(). Per fare ciò è sufficiente fornire il parametro “callback=nome_funzione” per indicare a WordPress di ignorare il normale comportamento della funzione e utilizzare invece una nostra versione personalizzata.
 
Nel nostro file comments.php andiamo dunque a modificare wp_list_comments() in questo modo:
 

1

wp_list_comments ('callback=miotema_comment');

 
Ovviamente è possibile utilizzare un foglio di stile CSS per rendere i commenti gradevoli da vedere:  per esempio io ho utilizzato questo metodo e questo è il risultato:
 

 
Tutto qui. Come sempre lasciate dei commenti o magari mandatemi una e-mail. Anche eventuali suggerimenti o consigli sono sempre graditi.