Piccola premessa: esiste già un apposito widget da utilizzare nella sidebar per visualizzare il numero di messaggi bloccati da Akismet (potete vederlo all’opera direttamente nel blog di Akismet).
L’idea è quella di realizzare la stessa cosa direttamente nel codice php della sidebar e, cosa fondamentale, creare un codice valido W3C.

Questo è il codice da inserire (disponibile anche come file di testo), realizzato prendendo spunto dal plugin Akismet Spam Count:

<?php
$count = number_format(get_option('akismet_spam_count'));
if (($count) || (function_exists('akismet_stats'))) {
?>
<div id="akismetwrap">
<div id="akismetstats">
<a id="aka" href="http://akismet.com" title="">
<span id="akismet1">
<span id="akismetcount"><?php echo $count; ?></span>
<span id="akismetsc">commenti spam</span>
</span>
<span id="akismet2">
<span id="akismetbb">bloccati da</span><br />
<span id="akismeta">Akismet</span>
</span>
</a>
</div>
</div>
<?php
}
?>

Il codice è molto semplice:

• inserisce nella variabile $count il numero di messaggi spam bloccati
• se Akismet risulta installato visualizza il div con tutti i dati, in caso contrario non visualizza nulla

Il codice html è identico a quello generato dal widget, con la differenza che vengono utilizzati due tag span al posto dei div.

Questo è il css da associare al banner; già che c’ero ho allargato un po’ l’immagine del widget originale.

#akismetwrap #aka, #aka:link, #aka:hover, #aka:visited, #aka:active {
color:#fff;
text-decoration:none;
}
#akismetwrap {
margin: 10px 0 0;
}
#aka:hover {
border:none;
text-decoration:none
}
#akismet1, #akismet2 {
display: block;
}
#aka:hover #akismet1 {
display:none;
}
#aka:hover #akismet2, #akismet1 {
display:block;
}
#akismet2 {
display:none;
padding-top:2px;
}
#akismeta {
font-size:16px;
font-weight:bold;
line-height:18px;
text-decoration:none;
}
#akismetcount {
display:block;
font:15px Verdana,Arial,Sans-Serif;
font-weight:bold;
text-decoration:none;
}
#akismetwrap #akismetstats {
background:url(images/akismet.gif) no-repeat top left;
border:none;
color:#fff;
font:11px 'Trebuchet MS','Myriad Pro',sans-serif;
height:61px;
line-height:100%;
overflow:hidden;
padding:15px 0 0;
text-align:center;
width:141px;
}


In questa piccola guida vedremo come costruire una tag cloud artigianale per le categorie prendendo spunto dallo script presente in questa pagina.
Questo è il codice da inserire nella sidebar (è disponibile un file di testo con il codice):

<?php
// Recupero le informazioni sulle categorie dal database
$qrystr = "SELECT cat_ID, cat_name, category_count from $wpdb->categories ORDER BY cat_name";
$cats = $wpdb->get_results($qrystr);
//Recupero il numero massimo di post per una singola categoria
$max_value = 0;
foreach ($cats as $cat)
{
if ($max_value < $cat->category_count) {
$max_value = $cat->category_count;
}
}
//Considero 15 scalini , a partire da 60% a 200%
//Per modificare questi due valori basta modificare i valori delle variabili
$percentuale_minima = 100;
$percentuale_massima = 230;
$percentuale_scalino = 10;
$numero_scalini = ($percentuale_massima-$percentuale_minima)/$percentuale_scalino;
$post_per_scalino = $max_value / $numero_scalini;
// Stampo tutte le categoria all'interno di un div (id=cloud)
// assegno una classe alla categoria (o alle categorie) più grandi
echo '<div id="cloud">';
foreach ($cats as $cat)
{
$catname = $cat->cat_name;
$catlink = get_category_link($cat->cat_ID);
$postcnt = $cat->category_count;
$percentuale_fontsize = $percentuale_minima+(Round($postcnt/$post_per_scalino)*$percentuale_scalino);
echo '<a href="',$catlink,'"';
if ($percentuale_fontsize==$percentuale_massima) {
echo ' style="font-size: ', $percentuale_fontsize,'%" class="top_category" title="',$postcnt,' post">';
}
else {
echo ' style="font-size: ', $percentuale_fontsize,'%" title="',$postcnt,' post">';
}
echo $catname,"</a>\r";
}
echo "</div>";
?>

Breve spiegazione del codice:

• effettuo una query sul database di WordPress (tabella categories); l’interrogazione restituisce l’elenco delle categorie ordinato per nome. Tutti i dati necessari sono già presenti nei risultati di questa query (grazie al campo category_count)
• scorro tutti i risultati per ottenere il numero massimo di post per una singola categoria ($max_value)
• stabilisco la percentuale massima e minima del font-size da utilizzare per il carattere, la distanza percentuale tra i vari livelli e il numero di post necessari per passare di livello (per calcolare questo valore mi serve stabilire il $max_value)
• scorro le categorie e, ad ogni passo del ciclo, scrivo i dati della categoria corrente creando un link, nel tag title inserisco il numero di post (in questo modo apparirà un tooltip), se la percentuale del font-size è pari a quella massima assegno una classe speciale (top_category)

Questo è il css utilizzato per la tag cloud:
div#cloud {
border: 1px dotted #E4F0DB;
padding: 0.5em;
margin: 0.6em 0;
font-family: Tahoma, Verdana, Arial;
text-align: justify;
line-height: 1.7em;
}
div#cloud a.top_category {
color: #E87830;
}
div#cloud a.top_category:hover {
color: #C00;
}

A mio avviso questa soluzione presenta un vantaggio fondamentale rispetto al codice originale: non è necessario specificare nel css decine di classi per i vari link.

In passato avevo già provato sul blog un plugin in grado, tramite JavaScript, di visualizzare l’anteprima dei commenti durante la digitazione: l’impressione era che rallentasse notevolmente la scrittura, soprattutto su pc datati.
Ho deciso quindi di provare un altro tipo di plugin, Ajax Comment Preview, in grado di visualizzare l’anteprima “a richiesta”: basta un clic sul relativo pulsante e l’anteprima viene visualizzata direttamente nella pagina (senza ricorrere a fastidiose finestre popup).

Il plugin sembra funzionare bene: una volta attivato, nel pannello Opzioni sarà presente un’apposita sezione in cui inserire:

• gli ID dei campi del form usato per i commenti (con buona probabilità non sarà necessario modificare i valori predefiniti)
• il testo da visualizzare nel riquadro di anteprima
• il formato da usare per la data; nel mio caso:
  j F Y \a\l\l\e H:i
• il template da usare per il riquadro di anteprima

Problemi del plugin (già segnalati all’autore):

• il testo del pulsante “Preview” non è localizzabile; per risolvere basta modificare il parametro value associato al pulsante nella funzione comment_form() (ajax-comment-preview.php, linea 47)
• la data non è localizzata (visualizza il mese in inglese); per risolvere si può modificare l’ultima parte della funzione send() cambiando il valore di ritorno (ajax-comment-preview.php, linea 84)
  return str_replace(
array('%author%', '%date%', '%content%'),
array($author, mysql2date(get_settings('date_format'), current_time('mysql')).' alle '.gmdate(get_settings('time_format'), current_time('timestamp')), $text),
$preview_vars['template']
);
  In pratica la stringa per il formato della data impostata nelle opzioni del plugin verrà ignorata e verranno utilizzate le impostazioni del blog per visualizzare data e ora (come avviene per i commenti inseriti).
• sembra esserci qualche problema con Safari (i caratteri accentati vengono visualizzati in modo scorretto) (vedi commenti)

Ho apportato qualche modifica al css per gestire al meglio il riquadro di anteprima (quello con scritto “Fare clic sul pulsante…”): se lo vedete con sfondo bianco, provate con un refresh forzato per aggiornare la cache.

Con un po’ di pazienza sto cercando di sistemare i piccoli difetti del tema in uso: l’altro giorno mi sono accorto che, visualizzando un singolo articolo, l’elenco chilometrico delle categorie nella sidebar allungava inutilmente la pagina.

Per risolvere il problema ho deciso di creare una seconda sidebar (sidebarsingle.php) da utilizzare solo nella visualizzazione dei singoli post: per ridurne la lunghezza ho eliminato uno dei due referral di Google, l’elenco delle categorie e dei link.

Per caricare la sidebar alternativa non è necessario creare un nuovo template per il singolo post (single.php), è sufficiente fare una piccola modifica al file index.php introducendo un Conditional Tag.

Dal codice originale per richiamare la sidebar:

get_sidebar();

si passa a questo

if (is_single()) {
include(TEMPLATEPATH . '/sidebarsingle.php');
} else {
get_sidebar();
}

Qualche tempo fa un lettore mi ha scritto una mail chiedendomi come differenziare i commenti dell’autore del blog da quelli dei visitatori: al tempo la gestione era completamente affidata al tema in uso (K2), il nuovo tema si limita ad alternare il colore di sfondo dei commenti per facilitare la lettura.

Una rapida occhiata al file comments.php permette di scoprire in che modo si ottiene l’effetto “colori alternati”: al commento viene assegnata una classe sulla base di una variabile ($oddcomment), il valore della variabile viene “invertito” al termine di ogni ciclo.

<li class="<?php echo $oddcomment; ?>" ...
** INVERSIONE DELLA VARIABILE
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';

Prima osservazione: non ha molto senso avere un class=”” associato ai commenti dispari. Per risolvere è sufficiente modificare il codice inserendo direttamente l’attributo class nella variabile

<li <?php echo $oddcomment; ?> ...
** INVERSIONE DELLA VARIABILE
if ('class="alt" ' == $oddcomment) $oddcomment = '';
else $oddcomment = 'class="alt" ';

Ovviamente sarà necessario modificare anche il valore assegnato inizialmente alla variabile
$oddcomment = 'class="alt" ';

Per distinguere il commento dell’autore del blog è possibile utilizzare il campo user_id del database: se si tratta di un visitatore avrà valore 0, in caso contrario avrà un valore numerico (tipicamente 1 se c’è un solo utente iscritto).

Questo è il codice modificato (qui è disponibile il file comments.php completo):

/* Imposto la variabile per il numero di commento */
$numero_commento = 1;
...
if ($comment->user_id != 0) {
/* si tratta di un commento dell'autore del blog */
if ($numero_commento % 2 != 0) {$classe_commento = 'class="alt commento_autore"';}
else {$classe_commento = 'class="commento_autore" ';}
}
else {
/* si tratta del commento di un visitatore */
if ($numero_commento % 2 != 0) {$classe_commento = 'class="alt"';}
else {$classe_commento = '';}
}
...
<li <?php echo $classe_commento; ?>
...
<?php /* Incremento il numero del commento prima della fine del ciclo*/
$numero_commento++;

Nota: a differenza del codice originale il controllo del commento pari/dispari viene effettuato usando una variabile numerica.

A questo punto è possibile modificare lo stile dei commenti sfruttando la classe commento_autore nel CSS; utilizzando il campo user_id e poche righe di codice sarà ovviamente possibile distinguere i vari autori in caso di blog gestito da più persone 😉

Diciamo la verità: mi ero decisamente stufato del tema K2. L’altro giorno del feed reader mi sono trovato un post sui temi minimali per WordPress e sono stato folgorato dal tema Simpla: semplice, leggibile, facile da personalizzare.

Si attendono opinioni, suggerimenti, segnalazioni, insulti e lamentele (ne prevedo almeno una…) 😉