Supporto volontario e collaborativo per Joomla!® in italiano

Differenziare gli articoli in base alla sezione di provenienza

PHPPrendo spunto da una domanda comparsa sul forum, per cercare di spiegare come differenziare gli articoli in home page del sito, in base alla sezione di provenienza.


Quando inseriamo un nuovo articolo sul nostro sito, è probabile che lo vogliamo poi richiamare in home page, con la funzione "featured" (in evidenza, in italiano). Con ogni probabilità il template che abbiamo scelto (a meno che non sia particolarmente intelligente) produrrà un html simile a questo:

< h2>
< a href="/link all'articolo">Titolo dell'articolo< /a>
< /h2>

Non è detto che sia esattamente così, anzi è improbabile, ma dovrebbe essere qualcosa di simile. Ovviamente dipende dal template scelto.

Questo blocco sarà ripetuto per ogni articolo richiamato a prescindere da dove siano posizionati gli articoli. In questo modo, però, non abbiamo la possibilità di differenziare gli articoli perchè non ci sono classi a cui agganciare i css: avranno tutti lo stesso aspetto. Ma a volte può essere comodo voler differenziare, magari con un colore diverso, i titoli e far capire immediatamente all'utente che provengono da sezioni diverse.

L'unica soluzione che abbiamo, a questo punto, è modificare il template. Il modo più semplice di farlo è aggiungendo una classe al tag h2; una classe diversa per ogni elemento che contenga, appunto, il nome della sezione di provenienza dell'articolo.

Per prima cosa dobbiamo trovare nel nostro template il codice che genera quell'HTML. Potrebbe non essere una operazione semplicissima, ma armandoci di un po' di pazienza, dovremmo riuscire. Quello che dobbiamo cercare è un file .php che contiene il ciclo che gestisce i "featured". Nel caso in esempio il file php dovrebbe contenere un tag h2, quindi non sarà difficilissimo trovarlo.

Quando abbiamo trovato il codice lo andiamo a modificare. Nel caso dell'esempio ad inizio pagina il tag
< h2>
diventerà
< h2 class="escape($this->item->parent_title)); ?>"

Il codice che abbiamo inserito all'interno delle virgolette è in linguaggio php (il linguaggio di programmazione in cui è scritto Joomla!) e non fa altro che inserire come classe del tag h2 il nome della categoria a cui appartiene l'articolo.
L'HTML generato sarà qualcosa tipo:

< h2 class="Nome della Sezione">

Per come viene scritto l'HTML ci ritroveremmo, nel caso in esempio, ben tre classi a cui agganciare i CSS (che ricordo sono case sensitive): "Nome", "della" e "Sezione".

A questo punto sarà sufficiente andare ad editare il nostro file template.css con qualcosa tipo:
.Sezione a{color:red;}
che cambierà il colore del link

Poichè gli articoli appartengono a sezioni diverse, avremo la possibilità di dare ai singoli titoli colori diversi a seconda del nome della sezione che compare nella classe.

Fabyo88 suggerisce di modificare il codice del template in < h2 class="cat_<?php echo $item->catid; ?>">Titolo articolo< /h2> che genera un HTML del tipo: < h2 class="cat_173">Titolo articolo< /h2>, decisamente più pulito e semplice di quanto da me proposto

NB: questa è la soluzione che mi sono "inventato" io. E' sicuramente migliorabile. Se qualche programmatore ha voglia di dare il suo contributo possiamo modificare l'articolo proponendo soluzioni migliori/più eleganti.

CommentaCommenta questo articolo sul forum