Navigazione

WordPress: tag cloud per le categorie

25 Dicembre 2006

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.

Tag Technorati: ,

Related posts:

  1. WordPress 2.3 e tag cloud per le categorie
  2. WordPress: caricare una sidebar alternativa
  3. WordPress: statistiche Akismet nella sidebar
  4. WordPress: differenziare i commenti
Scritto da flod  Archiviato in blog, wordpress
20 commenti/trackback »

20 commenti/trackback a “WordPress: tag cloud per le categorie”

  1. terronista scrive:
    26 Dicembre 2006 alle 13:21

    Ottima tag-cloud, appena inserita nel mio blog

  2. flod scrive:
    26 Dicembre 2006 alle 13:32

    Strano nome per un blog 😛

    Ti conviene cambiare il colore della classe top_category, quell’arancio spara un casino contro il rosa degli altri link 😉

  3. terronista scrive:
    26 Dicembre 2006 alle 16:08

    Si hai ragione, forse lo metto di una gradazione di colore più scuro dei link normali!

  4. neon scrive:
    27 Dicembre 2006 alle 04:41

    Io preferisco tenere poche categorie ed usare UTW per i tag

  5. flod scrive:
    27 Dicembre 2006 alle 09:17

    È una soluzione interessante 😉

    Con quasi 450 articoli sulle spalle direi che non è il caso di mettere mano alle categorie 🙁

  6. maga scrive:
    27 Dicembre 2006 alle 18:46

    inserita! Grazie mille 🙂
    non ho capito però il codice per il CSS 😐

  7. flod scrive:
    27 Dicembre 2006 alle 19:17

    Prova ad inserire quel codice css in fondo al css del tuo template e vedere le conseguenze 😉

    Senza inserire il css aggiuntivo il testo non viene giustificato, non c’è un bordo esterno (che nel tuo caso puoi anche non mettere), non viene visualizzata in modo diverso la categoria con più post, ecc. ecc.

    Probabilmente nel tuo caso conviene un css del genere
    div#cloud {
    padding: 0.5em;
    margin: 0.6em 0;
    text-align: justify;
    line-height: 1.7em;
    }
    div#cloud a.top_category {
    color: #000;
    }
    div#cloud a.top_category:hover {
    color: #4A5265;
    }

    A proposito: la “gnocca” è 8 post indietro rispetto ad “attualità”, non va bene 😛

  8. maga scrive:
    27 Dicembre 2006 alle 19:36

    grazie Pseudotecnico per la dritta!
    Funziona tutto a meraviglia 🙂
    e cercheremo di postare più “gnocca” 😉

  9. Sleipnir scrive:
    29 Dicembre 2006 alle 20:36

    Ottima soluzione :)))

    Inserita anche nel mio blog :))

    Grazie ed augurissimi…

  10. danyelle.it scrive:
    13 Giugno 2007 alle 00:18

    ciao..ottimo il plugin, inserito subito..unico problema: oltre alle categorie normali becca anche i tipi di link, come ad esempio “blogroll”, che non hanno una pagina di categoria e che quindi, se cliccati, portano alla classica pagina 404. c’è qualche modo per ovviare alla cosa? grazie e complimenti..

  11. flod scrive:
    13 Giugno 2007 alle 06:40

    Bella domanda: sinceramente non mi ero posto il problema perché non uso i link 😉

    Si potrebbe risolvere escludendo le categorie senza post? In quel caso basta passare da

    foreach ($cats as $cat)
    {
    *codice*
    }
    echo "</div>";
    ?>

    a questo (salto le categorie a 0)

    foreach ($cats as $cat)
    {
    if ($cat->category_count>0) {
    *codice*
    }
    }
    echo "</div>";
    ?>

  12. danyelle.it scrive:
    19 Giugno 2007 alle 16:40

    funziona perfettamente, grazie mille…

  13. Tobi scrive:
    26 Luglio 2007 alle 21:44

    Ciao ti volevo chiedere:è possibile disporre l’elenco dei link nel blogroll come una tag cloud?

  14. flod scrive:
    27 Luglio 2007 alle 05:43

    Provo a dare un’occhiata al db e ti faccio sapere 😉

  15. Tobi scrive:
    27 Luglio 2007 alle 10:42

    ok ti ringrazio per la disponibilità 😛

  16. flod scrive:
    27 Luglio 2007 alle 11:01

    Recuperare i link non è un grosso problema, il problema è che il blogroll non è esattamente adatto alla struttura della tag cloud (i link sono tutti identici) 😕

    <?php
    $qrystr = "SELECT link_name, link_url from $wpdb->links ORDER BY link_name";
    $links = $wpdb->get_results($qrystr);
    echo '<div id="cloud">';
    foreach ($links as $link)
    {
    $linkname = $link->link_name;
    $linkurl = $link->link_url;
    echo '<a href="',$linkurl,'">'.$linkname."</a>\r";
    }
    echo "</div>";
    ?>

  17. Tobi scrive:
    29 Luglio 2007 alle 22:10

    ok grazie prova funge che è un meraviglia 😛

  18. Tobi scrive:
    29 Luglio 2007 alle 23:25

    scusa l’italiano pessimo di poco fà…..
    allora ho provato la tc… ho disattivato il blogroll e messo il codice, e devo dire che ci sta benissimo… ^^ la tag cloud mi piace tanto XD ancora grazie per la disponibilità… complimenti per il blog XD

Trackback e pingback

  1. Yet Another Tech Blog » Self made tag cloud for Wordpress
    [...] categories and place it in your sidebar without using external plug-ins or widgets (you can read here an Italian…
  2. pseudotecnico:blog » Wordpress 2.3 e tag cloud per le categorie
    [...] sull’argomento tag cloud per le categorie di WordPress: oggi ho provato ad installare in locale la versione 2.3 di…

Non è possibile inserire nuovi commenti. I commenti vengono disattivati automaticamente dopo 60 giorni.