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!

Per chi sviluppa siti web o anche per gli smanettoni dei temi di wordpress, cercando di migliorare il layout, il codice HTML o il CSS, uno strumento che senza dubbio non deve mancare è il programma Firebug.

Firebug è un’estensione di Mozilla Firefox che permette il debug, la modifica e il monitoraggio di tutti gli aspetti di una pagina web, come i fogli di stile, il codice HTML, la struttura DOM e il codice JavaScript. Firebug fornisce anche altri strumenti per lo sviluppo web come una console JavaScript e una funzione chiamata “Net” che permette di monitorare il tempo di caricamento in millisecondi di immagini e script. Oltre che per il debug, Firebug è uno strumento indispensabile per testare la sicurezza e la performance dei siti web.
Firebug è stato creato da Joe Hewitt, uno dei creatori di Firefox, ed è attualmente sviluppato e mantenuto dal Firebug Working Group.
Addirittura FireBug è estendibile con add-on che aggiungono nuove funzionalità o migliorano quelle esistenti. Una selezione la trovate in questo post di SixRevisions.
Una volta installato come estensione di firefox, l’uso è semplicissimo.
Il video seguente spiega chiaramente le potenzialità di Firebug (per una migliore visualizazione visualizzare il video a schermo interno).