Il suffisso di pagina di Joomla, come utilizzarlo in un template personalizzato

Come impostare il suffisso pagina (page suffix) di Joomla! nel tuo template personalizzato, scopri come effettuare personalizzazioni avanzate sulle pagine del tuo sito.

Le pagine generate da Joomla possono avere un determinato aspetto in base a come hai impostato il css del tuo template, quando il CMS genera una nuova pagina crea diverse classi CSS associate ad elementi HTML, queste classi generalmente hanno "nomi" pre impostati.

In poche parole, se attribuisci uno sfondo colorato al tag body, questa regola css verrà applicata a tutte le pagine del sito.

Non proprio la situazione ideale visto che pagine diverse possono avere scopi diversi, per cui anche un aspetto diverso.

Per superare questo ostacolo Joomla! offre la possibilità di assegnare classi css supplementari alle singole pagine.

L'immagine raffigura una voce di menù nel backend di Joomla! 4, in particolare la tab "Visualizzazione pagina", dove come ultima opzione si trova "Classe pagina", in questo campo puoi inserire un nome che verrà applicato al tag body di quella specifica pagina.

Per far funzionare questa opzione il tuo template personalizzato deve essere predisposto, per cui vediamo assieme:

Come inserire il page suffix di Joomla! nel tuo template personalizzato.

Questo articolo è il settimo della serie dedicata alla creazione di template personalizzati per Joomla! 4, ti mostrerò come intervenire su i file del template fin ora realizzati, se non hai ancora letto gli altri articoli puoi iniziare da qui.

Per prima cosa apri il file index.php del tuo template, alla riga 1 troverai questo codice:

<?php defined( '_JEXEC' ) or die( 'Restricted access' );
$app = JFactory::getApplication();
$titolo = $this->params->get('titolo');
$sitetitle = $this->params->get('sitetitle');
$logo = $this->params->get('logo');
$logofile = $this->params->get('logofile');
$templateparams  = $app->getTemplate(true)->params; ?>

Subito prima del tag di chiusura ?>, inserisci questo codice:

$menu   = $app->getMenu()->getActive();
$pageclass = $menu !== null ? $menu->getParams()->get('pageclass_sfx', '') : '';

Riassumendo molto, hai appena inserito un parametro nel tuo template per "attivare" la possibilità di inserire una suffisso di pagina nelle voci di menù.

Ora bisogna "collocare" il page suffix dove ti interessa, in questo caso specifico sul tag body, che trovi alla riga 21 del tuo index.php, al posto di <body> inserisci questo codice:

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

In questo modo stai dicendo a Joomla! che se verrà assegnata una Classe pagina dal backend, il tag body avrà un id con il nome assegnato, altrimenti l'id userà default.

Salva per terminare.

Per controllare che tutto sia stato impostato correttamente, apri il front end del tuo sito e visiona il codice sorgente, ora il tuo tag body sui presenterà così:

<body id="default">

Con nessuna classe assegnata l'id ha il nome default.

Prova ad assegnare la classe "home" alla voce di menù corrispondente all' home page del tuo sito e controlla il codice sorgente della pagina dal front end, ora il tag body si presenterà così:

<body id="home">

Sei arrivato a metà del percorso, ora è giunto il momento di personalizzare l'aspetto degli elementi della pagina tramite css, per cui apri il file style.css del tuo template.

Ti mostrerò come personalizzare l'aspetto del "breadcrumb", utilizzando ispezione codice del browser, puoi notare che utilizza la classe breadcrumb all'interno del tag html "ol", per cui la utilizzerai per la personalizzazione scrivendo questo codice:

#home .breadcrumb{background-color:red; color:white;}
#home .breadcrumb .active{color:white; font-weight:bold;}

Hai assegnato uno sfondo rosso alla classe breadcrumb dell'home page, il colore bianco alle scritte, inoltre hai assegnato il colore bianco ed il grassetto alla voce attiva, ovvero quella che indica la pagina che si sta visionando.

Ora il breadcrumb della tua home page avrà questo aspetto:

breadcrumb personalizzato tramite suffisso pagina Joomla!

Mentre in una quasiasi delle altre pagine l'aspetto sarà questo:

breadcrumb senza personalizzazioni Joomla!

Nessuna classe applicata, quindi nessuna personalizzazione dell'aspetto.

Questo è solo uno dei tanti elementi che si possono personalizzare, praticamente puoi differenziare ogni aspetto della pagina, menù, moduli, titolo, immagini etc, dipende tutto dalla tua fantasia e dai tuoi obiettivi.

Se hai domande scrivile nei commenti!