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.

Per la visualizazione degli articoli più popolari uso il plugin WordPress.com Popular Post. Tale plugin permette molte personalizzazioni, ma manca la possibilità di poter visualizzare le immagini riferite ai post. L’idea di fondo parte da questo articolo che spiega come aggiungere delle immagini all’elenco dei post con l’ausilio di uno script esterno. Senza utilizzare script esterni, possiamo, invece, sfruttare le nuove features di WordPress 3.x.

Nel momento in cui vogliamo il percorso dell’immagine associata al post il programma procederà in questo modo:

• cerca la thumbnail associata al post;
• nel caso in cui il tema non supporti tale funzione o non si è inserita in fase di creazione del post, cerca la prima immagine nel post;
• nel caso in cui il post non abbia neanche una immagine, me associa una di default.

Vediamo come:

1) Modifica del plugin

Andando in Plugin->Editor selezioniamo il plugin WPPP e quindi il file wppp.php.

Per prima cosa troviamo il codice:

1
2
3
4
5
6
7

// Replace format with data
$replace = array(
'%post_permalink%' => get_permalink( $post['post_id'] ),
'%post_title%' => esc_html( $this->truncateText( $post['post_title'], $instance['title_length'] ) ),
'%post_title_attribute%' => esc_attr( $post['post_title'] ),
'%post_views%' => number_format_i18n( $post['views'] )
);

e aggiungiamo la seguente riga:

1

$replace['%post_thumb%']=return_post_image($post['post_id']);

A questo punto dobbiamo inserire la funzione return_post_image.

2) Modifica del file function.php

Nel file function.php aggiungiamo:

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
27
28
29
30
31
32
33
34

/**
* Capture the first image from the post.
* @global object $post
* @global object $posts
* @return string
*/
function theme_function_capture_first_image($p=null) {
$firstImg = '';
if (empty($p)) {
global $post, $posts;
$firstImg = '';
ob_start(); ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$firstImg = $matches[1][0];
} else {
$output = preg_match_all('//i', $p->post_content, $matches);
$firstImg = $matches[1][0];
}
return $firstImg;
}
 
// ritorna una immagine associata al post: thumb, prima immagine del post, default
 
function return_post_image($post,$dim) {
$imgpath = '';
if (empty($dim)) $dim = array(60,60);
$imgpath=get_the_post_thumbnail($post, $dim );
if (empty($imgpath)) {
$imgpath = theme_function_capture_first_image(get_post($post));
if (empty($imgpath)) $imgpath = get_bloginfo('template_directory').'/images/default_pp.gif';
$imgpath = '<img src="' . $imgpath . '" alt="'. $title .'" />';
}
return $imgpath;
}

N.B.: Di default la dimensione dell’imamgine è di 60×60. Nel caso in cui noi volessimo una immagine di dimensione diversa, per esempio 32×32, basta modificare la chiamata alla funzione nel file wppp.php in questo modo:

1

replace['%post_thumb%']=return_post_image($post['post_id'], array(32,32));

Un’altra modifica, in futuro, potrebbe essere fare in modo di passare la dimensione dei thumbs nel momento in cui viene richiamato il plugin.

A questo punto quando richiamiamo il plugin avremo a possibilità di inserire il tag %post_thumb% che ci darà l’<img> riferita all’immagine associata al post.

3) il CSS per lo stile

Concludiamo con il css per lo stile dell’elenco dei post, che nel mio caso è:

1
2
3
4
5
6
7
8
9
10
11
12
13

/*Popular Posts*/
 
ul.wppp_list li {
min-height:65px;
display:block;
list-style:none outside none;
}
 
ul.wppp_list img {
float:left;
margin-right:4px;
border:2px solid #ECEFF5;
}

Ed ecco il risultato finale:

Enjoy it!

Di norma non scrivo articoli sui plugin di WordPress, visto che googlando si trovano migliaia di post su questo tema, però il plugin Category Icons questa volta mi è piaciuto moltissimo, poichè è interessante l’idea di associare un articolo  alla categoria attraverso una immagine: specie nei blog con tante categorie, questo plugin può aumentare di molto la visibilità di tutti gli articoli.

Ma entriamo nel vivo….

Category Icons, qui il sito di riferimento, permette di associare delle icone alle gategorie del blog e di visualizzarle lì dove richiamate. L’interfaccia grafica per il setup è molto intuitiva e l’autore, nel suo sito, spiega in maniera molto chiara come inserire il codice all’interno delle pagine del vostro tema.

Le icone vengono carica sul server andando dal menù “Icone” e ad ogni categoria può essere associata una icona piccola ed una grande.
Il codice, per visualizzare le icone, può essere inserito in maniera automatica (menù “Opzioni” -> “Template Tags”) o manuale (menù “Template Tags”); in quest’ultimo caso l’autore ci suggerisce il file php da modificare fornendo addirittura le coordinate espesse in riga e colonna.
Con il plugin è compreso anche un widget delle categorie da personalizzare, che visualizza le icone associate, appunto, alle vostre categorie. Inoltre, sul sito alla voce “Translate the plugin” vi sono altre localizzazioni del plugin incluse quella italiana.

Un consiglio: quando scegliete le immagini fate in modo tale che abbiano la medesima dimensione. Per le immagini piccole, che compaiono nella pagina principale o associate ai permalink degli articoli, ho scelto la dimensione 32×32, mentre per le immagini grandi, che ho inserito nella pagina dell’articolo, ho scelto la dimensione 116×116. Ovviamente le dimensioni scelte dipendono dal vostro tema.

Enjoy it!