Formattare i titoli degli articoli di Joomla! aggiungendo nuovi parametri di stile

Il concetto esposto nel prosieguo dell'articolo ricalca quello riguardante il "Page Class Suffix" [ Suffisso di classe per la pagina ] e "Module Class Suffix" [ Suffisso di classe per i Moduli ], i quali vengono utilizzati per la formattazione di un singolo elemento. Il motivo per cui è stata scelta questa metodologia, invece di utilizzare il "Page Class Suffix", è che quest' ultimo tende a modificare di molto l'output. Con questo semplice tutorial, invece, verrà aggiunto solo un parametro ad un elemento della pagina, vale a dire al titolo dell'articolo. Possiamo vedere nell'immagine seguente il risultato finale che si otterrà:

Titolo articolo personalizzato con aggiunta di paramentri
Titolo articolo personalizzato con aggiunta di paramentri

Come si può vedere, accanto ad ogni titolo appare una immagine esplicativa che riconduce al tema della categoria.

Creare una sezione, categorie ed articoli di esempio

Si crei una sezione che verrà nominata "Articoli". Il passaggio successivo prevede la creazione di 3 categorie - appartenenti alla sezione Articoli - così nominate:

Si creino ora alcuni articoli; è sufficente anche uno solo per ogni categoria.

Aggiungere Parametri al file xml per il Tipo di Menu

Aprire un qualsiasi programma FTP e portarsi nella directory in cui è installato Joomla!; raggiungere la seguente cartella:

Root-Joomla/components/com_content/views/category/tmpl

Portare su desktop il file blog.xml; aprirlo in vista codice ed aggiungere un parametro - di seguito riportato - immediatamente dopo l'apertura del tag <advanced>:

<param name="icon_suffix" type="text" default="" label="Article Icon Class" description="Adds a class suffix for individual category article title styling" />

Riportare il file blog.xml in remoto.

N.B. Assicurarsi che il codice venga scritto tutto su un rigo e che non ci siano spazi che rimandino a capo.

La stessa procedura va fatta per il file default.xml.

Salvare entrambi i files ed uplodare in remoto.

Creare l'override del template

In Joomla! l' Override del Template permette di sovrascrivere l'output fornito dal Core e presentarlo in maniera differente, a seconda delle esigenze richieste dal sito. Come illustrato in altri articoli precedenti, si devono copiare i files di layout dalla cartella Components in un' altra nominata html e posizionarla in quella del template attualmente in uso. Quando Joomla! trova i files nella cartella html, esso utilizza tali files per sovrascrivere il layout del Core.

Portarsi nella cartella del template /templates/Template-In-Uso e creare una cartella nominandola html. In html, creare un' altra cartella, nominandola com_content.

All' interno della cartella com_content, crearne altre 2:

  1. article
  2. category

Avremo la seguente struttura:

/templates/Template-In-Uso/html/com_content/article

e

/templates/Template-In-Uso/html/com_content/category

Portarsi nella cartella:

/components/com_content/views/article/tmpl/

e copiare - NON SPOSTARE - il file default.php e trasferirlo in

/templates/Template-IN-Uso/html/com_content/article/default.php

Stesso procedimento con l'altro file; andare in:

components/com_content/views/category/tmpl/

e copiare - NON SPOSTARE - il file blog_item.php in

/templates/Template-In-Uso/html/com_content/category/blog_item.php

Aggiungere lo stile per le icone del titolo al file di layout

Aprire il file "blog_item.php" in vista codice per apportare alcune modifiche. Il codice che deve essere aggiunto è il seguente:

<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>

Più precisamente, il suddetto snippet di codice deve essere inserito nel punto in cui viene richiamato il titolo dell'articolo; portarsi - indicativamente - al rigo n. 15:

<td class="contentheading<?php echo $this->escape($this->item->params->get( 'pageclass_sfx' )); ?>" width="100%">	
<?php if ($this->item->params->get('link_titles') && $this->item->readmore_link != '') : ?>
<a href="/<?php echo $this->item->readmore_link; ?>" class="contentpagetitle<?php echo $this->escape($this->item->params->get( 'pageclass_sfx' )); ?>">    
<span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
<?php echo $this->escape($this->item->title); ?></a> <?php else : ?> <span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span>
<?php echo $this->escape($this->item->title); ?> <?php endif; ?> </td>

Salvare e riportare il file blog_item.php in remoto.

Aprire il file default.php. Individuare - indicativamente - il rigo n. 15 e ripetere lo stesso procedimento:

<td class="contentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>" width="100%">
<?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?> <a href="/<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>"> <span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span> <?php echo $this->escape($this->article->title); ?></a> <?php else : ?> <span class="<?php echo $this->params->get( 'icon_suffix' ); ?>"></span> <?php echo $this->escape($this->article->title); ?> <?php endif; ?> </td>

Salvare ed uplodare il file in remoto.

Scrivere il codice CSS per le immagini dei titoli

Con i passaggi appena compiuti, Joomla! è pronto per visualizzare le immagini di background accanto ai titoli. Adesso si deve scrivere il codice CSS per poter far apparire tali immagini.

A seconda delle categorie che si intendono creare, sarebbe bene prepararsi delle immagini rappresentative che verranno mostrate nel frontend del sito. Per l' esempio in oggetto, sono state reperite in rete icone della dimensione di 20 px per 20 px circa. Tali immagini, una volta ottimizzate ed esportate, vanno uplodate nella cartella images del template:

/templates/Template-In-Uso/images

Si effettui il download del file .css di tutto il sito, solitamente template.css, e lo si porti sul desktop. Si aggiungano le classi, come riportato di seguito:

span.book {
background: url(../images/book.png) no-repeat 0 0;
width: 20px;
height:19px;
display:block;
float: left;
margin:0 5px 0 0;}


span.mp3 {
background: url(../images/mp3.png) no-repeat 0 0;
width: 20px;
height: 25px;
display: block;
float: left;
margin:0 5px 0 0;}


span.mobile {
background: url(../images/mobile.png) no-repeat 0 0;
width: 20px;
height: 19px;
display: block;
float: left;
margin:0 5px 0 0;}

Salvare ed uplodare il file nella cartella css del template.

Definire lo stile nella gestione del menu

Guardando il codice CSS appena scritto, possiamo notare i nomi che sono stati assegnati a ciascuna classe: book, mp3 e mobile. Questi nomi altro non sono che i parametri da utilizzare nella gestione del Menu.

Per poter utilizzare tali valori, portarsi nel backend di Joomla! e creare una nuova voce di menu ArticoliCategoria Blog. Nel pannello Parametri, della parte destra, espandere il tab Parametri Avanzati. Noteremo la presenza di un nuovo parametro: Article Icon Class. Nel campo di testo associato, possiamo scrivere uno dei tre valori appena creati nel foglio di stile: book, mp3, mobile.

Article Icon Class
Article Icon Class

Come si nota, il nuovo parametro Article Icon Class è frutto dell'aggiunta di codice nei due files .xml, fatta all'inizio.

Aprire il tab Parametri - Componente ed accertarsi che la terza voce "Mostra titolo articolo" sia impostato su SI. Salvare la nuova voce di menu ed aggiornare il frontend. Se il tutto è stato fatto in maniera corretta, selezionare dal menu di navigazione la voce appena creata e dovremmo vedere accanto al titolo l'icona che rappresenta la categoria stessa, come l'immagine mostrata all'inizio dell' articolo.

Se volessimo cambiare le icone oppure aggiungerne altre, non dobbiamo fare altro che scrivere ulteriori classi nel foglio di stile ed in questo modo potrà essere assegnato tale parametro.

Buon divertimento con i nuovi parametri di Joomla!

Fonte: community.joomla.org

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati