Nuvola di tag che funziona
Venerdì 20 Giugno 2008
Tags: hack, tag, tag cloud, WordPress
In questi giorni sto dando una mano a migliorare un blog fatto con WordPress.
Per realizzare la tag cloud ho usato la funzione wp_tag_cloud(); che WordPress offre “aggratis” (aka di default, senza dover installare nessun plugin): serve a visualizzare tutti i tag usati nel blog in forma di nuvola di tag (o tag cloud).
Qui trovate la descrizione della funzione, con la lista dettagliata degli argomenti accettati ed un esempio d’uso.
E’ una funzione molto semplice che se chiamata senza parametri:
< ?php wp_tag_cloud(''); ?>
mostra una tag cloud in cui la grandezza del font dei tag con meno occorrenze è 8 punti e quella del font dei tag con più occorrenze è 22 punti; la grandezza dei tag intermedi è calcolata in base a questi valori e a quanti tag ci sono in totale.
Questa grandezza può quindi essere un numero con la virgola.
Semplice no? Ovviamente no! I CSS (fogli stile) non mostrano la grandezza giusta di un font nel caso in cui il valore di questa è rappresentato appunto con un valore non intero, quindi la grandezza relativa di un tag non è (sempre) direttamente proporzionale al numero delle sue occorrenze.
Per correggere il malfunzionamento basta apportare una piccola modifica alla funzione obbligandola a effettuare un typecast da reale ad intero del valore che viene interpretato come grandezza del font.
A riga 417 del file “wp-includes/category-templates.php“, modificate la seguente istruzione:
$a[] = "<a href='$tag_link' class='tag-link-$tag_id' title='" . attribute_escape( sprintf( __ngettext('%d topic','%d topics',$count), $count ) ) . "'$rel style='font-size: " .
( $smallest + ( ( $count - $min_count ) * $font_step ) )
con:
$a[] = "<a href='$tag_link' class='tag-link-$tag_id' title='" . attribute_escape( sprintf( __ngettext('%d topic','%d topics',$count), $count ) ) . "'$rel style='font-size: " .
(int) ( $smallest + ( ( $count - $min_count ) * $font_step ) )
Tutto qui!
Per capire la situazione basta guardare questa immagine, in cui la stessa sequenza di tag è mostrata prima e dopo la modifica:
Nel primo caso il tag con più occorrenze (4) è “WordPress”, seguito da “blog” e “foto” (3 occorrenze) e “plugin” (2): la visualizzazione varia di poco ed è errata proprio nei casi in cui il font-size dei tag ha valori con la virgola (3 occorenze: font-size:146,666666667%; 2 occorrenze: font-size: 113,333333333%;).
Nel secondo caso, a modifica effettuata, la visualizzazione è corretta; 3 occorenze: font-size:146%; 2 occorrenze: font-size: 113%;.
Il codice è:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Prova font</title> </head> <body> <h2>Tag Cloud</h2> <p>Percentuali <strong>con</strong> decimali (es: 'font-size: 146,666666667%;'):</p> <p> <a href='#' class='tag-link-4' title='3 argomenti' rel="tag" style='font-size: 146,666666667%;'>blog</a> <a href='#' class='tag-link-12' title='1 argomento' rel="tag" style='font-size: 80%;'>cloud</a> <a href='#' class='tag-link-9' title='3 argomenti' rel="tag" style='font-size: 146,666666667%;'>foto</a> <a href='#' class='tag-link-7' title='2 argomenti' rel="tag" style='font-size: 113,333333333%;'>plugin</a> <a href='#' class='tag-link-10' title='1 argomento' rel="tag" style='font-size: 80%;'>Tag</a> <a href='#' class='tag-link-6' title='1 argomento' rel="tag" style='font-size: 80%;'>tag&amp;amp;amp;nbsp;di&amp;amp;amp;nbsp;quattro&amp;amp;amp;nbsp;parole</a> <a href='#' class='tag-link-8' title='1 argomento' rel="tag" style='font-size: 80%;'>temi</a> <a href='#' class='tag-link-3' title='4 argomenti' rel="tag" style='font-size: 180%;'>WordPress</a> </p> <p>Percentuali <strong>senza</strong> decimali (es: 'font-size: 146%;'):</p> <p> <a href='#' class='tag-link-4' title='3 argomenti' rel="tag" style='font-size: 146%;'>blog</a> <a href='#' class='tag-link-12' title='1 argomento' rel="tag" style='font-size: 80%;'>cloud</a> <a href='#' class='tag-link-9' title='3 argomenti' rel="tag" style='font-size: 146%;'>foto</a> <a href='#' class='tag-link-7' title='2 argomenti' rel="tag" style='font-size: 113%;'>plugin</a> <a href='#' class='tag-link-10' title='1 argomento' rel="tag" style='font-size: 80%;'>Tag</a> <a href='#' class='tag-link-6' title='1 argomento' rel="tag" style='font-size: 80%;'>tag&amp;amp;amp;nbsp;di&amp;amp;amp;nbsp;quattro&amp;amp;amp;nbsp;parole</a> <a href='#' class='tag-link-8' title='1 argomento' rel="tag" style='font-size: 80%;'>temi</a> <a href='#' class='tag-link-3' title='4 argomenti' rel="tag" style='font-size: 180%;'>WordPress</a> </p> </body> </html>
PS: Per la gestione dei tag in un blog fatto con WordPress consiglio comunque di installare il noto plugin Simple Tags, usato incidentalmente anche sul blog che state leggendo, che permette una gestione molto flessibile ed approfondita dei tag; consente anche di realizzare e gestire una nuvola di tag attraverso una comoda interfaccia direttamente dal pannello di amministrazione del blog.
Plugin che tra l’altro soffre dello stesso problema.
Articoli forse collegati...
- Prova plugin Simple Tags
Ho finalmente aggiornato il blog alla versione 2.3 di WordPress. Questa è solo una prova per vede... - Er contromano
Ce sei mai stato in mezzo ar traffico de Roma? Ce l'hai presente? Lo sai come funziona? T'è capi... - Ragazzine nei ministeri
Leggendo il post "Per amore, solo per amore" del sempre interessante blog di Leonardo mi ha impress... - 5xmille e 8xmille
Un paio di giorni fa ho presentato la mia dichiarazione dei redditi al CAAF della UIL del Ministero... - Homepage del sito come biglietto da visita (aggiornato)
Stamane cercavo qualche notizia inerente i nuovi concorsi pubblici che si vociferava sarebbero stat...
