• Apr
  • 2012
  • 10
  • Stampa
  • Categoria: Joomla
  • Scritto da Andrea Rossi

Per stampare un semplice elenco di tag, non c'è bisogno di ricorrere a particolari plugin. Con una semplice modifica al vostro template, potrete ottenere facilmente la lista di tag articolo, completamente cliccabili.

Override template: Lista Tag articolo

Funziona sujoomla 2.5

Ogni blog che si rispetti, per ogni articolo ha una lista di tag, linkati, con la funzione di indicare all'utente quali sono gli argomenti correlati. L'utilità non è del tutto insignificante:

  • prolungare le visite dell'utente
  • fornire argomenti correlati con l'articolo, in maniera del tutto autonoma
  • aumentare la flessibilità della struttura dati del vostro sito

Struttura HTML

  1. <?php if($this->item->metakey) :?>
  2. <h5>Tag Correlati</h5>
  3. <ul class="list-tag-article">
  4. <?php /*Show tag list*/
  5. $search_intro=$this->baseurl."/component/search/?searchword=";
  6. $search_end="&amp;searchphrase=all";
  7. $string=$this->item->metakey;
  8. $tag_list=explode(",",$string);
  9. foreach ($tag_list as $x)
  10.     echo "<li><a href=\"".$search_intro.$x.$search_end."\">".$x."</a></li>";
  11. ?>
  12. </ul>
  13. <?php endif; ?>
I tag vengono salvati in una sola stringa, inframezzata dalle virgole, quindi con un semplice explode, funzione di php non deprecata, serve un semplice array per accogliere tutte le singole keywords.

Le variabili


$search_intro=$this->baseurl."/component/search/?searchword=";
$search_end="&amp;searchphrase=all";
le ho ottenuto, facendo una semplice ricerca sul mio sito, inserendo una serie di parole (anche accentate), per ottenere la stringa. Una rapida pulita dele variabili inutilizzate, ed il gioco è fatto. Testate il vostro motore di ricerca per capire come funziona.

Effetto Css

  1. ul.list-tag-article{
  2.  margin:0px;
  3.  padding:0px;
  4.  list-style:none;
  5.  display:block;
  6.  width:100%;
  7.  }
  8.  ul.list-tag-article li{
  9.  display:inline;
  10.  padding:0px;
  11.  margin:0px;
  12.  float:left;
  13.  position:relative;
  14.  }
  15.  ul.list-tag-article li a,ul.list-tag-article li a:visited{
  16.  border:2px solid #DDD;
  17.  padding:2px 0px;
  18.  margin:3px 0px;
  19.  line-height:24px;
  20.  white-space:nowrap;
  21.  }
  22.  ul.list-tag-article li:first-child a{
  23.  border-bottom-left-radius:10px;
  24.  border-top-left-radius:10px;
  25.  }
  26.  ul.list-tag-article li:last-child a{
  27.  border-bottom-right-radius:10px;
  28.  border-top-right-radius:10px;
  29.  }
  30.  ul.list-tag-article li a:hover{
  31.  background:#DDD;
  32.  }
In teoria non serve nessun codice css, ma graficamente è più accattivante avere un elenco di tag, allineati, piuttosto che una lista, capace di sfalsare il resto del template. Inoltre, ricordatevi di gestire gli spazi bianchi, quindi, al posizionamento:

  • display:inline;
    per allineare ul.list-tag-article li
  • float:left;
    utilizzo il float, a causa della gestione spazi bianchi. Infatti, senza di questo, potrebbe capitarvi di avere dei tag che sovvrascrivono sulle altre aree. Rendendo queste inleggibili
  • white-space:nowrap;
    per tenere "unito" il singolo elemento dell'elenco.

Queste attenzioni sono accessorie: di fatto vi serve la modifica alla struttura HTML!

Risultato

Tag Correlati

A me, piace da impazzire, e voi? Sicuramente è un ottima alternativa all'installazione di qualche plugin,  per mantenere una certa omogeneità con il template. Se avete bisogno di "bloggare" joomla, provate a fare queste modifiche a mano, cosi potrete ottenere l'effetto desiderato.

Altre informazioni

Per fare tutto ciò, vi basterà prelevare il singolo file root/component/com_content/views/default.php ed incollarne il contenuto in root/templates/vostro-template/html/com_content/default.php. Ovviamente se già avete modificato l'aspetto dell'articolo,  dovrete solamente modificare il file già presente nel template.

  • Dettagli

  • Condividi