Personalizzare il modulo di login in Joomla 3 - prima parte
Non mi è mai piaciuta molto la disposizione "colonnare" del modulo di login di Joomla predefinito. Soprattutto da quando cerco di evitare la disposizione laterale dei moduli per mantenere la pulizia e lo stile minimale del sito.
In passato mi sono affidato a estensioni di terze parti che fornivano moduli di login alternativi, con layout personalizzabile.
Avendo deciso di ridurre all'indispensabile le estensioni, e soprattutto per comprendere meglio il funzionamento del sistema, ho deciso di creare un modulo login alternativo partendo dai componenti core di Joomla.
Ho pensato di sfruttare una funzionalità di Joomla che ho trascurato in passato: la possibilità di creare layout alternativi.
Si tratta di una forma di override, tecnica che ho spiegato in un altro articolo. In breve, nelle impostazioni del modulo è possibile selezionare un layout alternativo, che sostituisce quello predefinito del sistema. A differenza dell'override descritto nell'articolo citato, dove il codice del modulo viene modificato, in questo approccio si aggiunge un nuovo layout per il modulo, lasciando l'originale disponibile e inalterato.
Lo scopo di questo articolo è creare un layout alternativo per il modulo di login, che prevede la disposizione orizzontale dei campi relativi a nome utente, password, etc in luogo della disposizione standard colonnare.
In questa pagina, potete vedere in alto a destra l'applicazione pratica di questa tecnica con i campi di input e pulsante Accedi in orizzontale.
Una premessa doverosa. Si tratta di un argomento ostico per chi è alle prime armi con Joomla: richiede una certa conoscenza del sistema e di PHP. Non si modifica alcun file core, si aggiungono nuovi file, per cui è semplice rimediare ad errori: basta cancellare i file creati e/o selezionare il layout predefinito del modulo. Tuttavia, la possibilità di errori è sempre presente, per cui suggerisco un backup completo del database e del sito prima di procedere.
Questo articolo è stato scritto e testato con la versione 3.4.8 di Joomla e la versione 1.0 del template protostar. Versioni diverse potrebbero richiedere modifiche differenti, anche se le teoria di base rimane valida.
Se rilevate differenze tra le righe di codice originali, che descrivo più oltre, rispetto alla versione in vostro possesso, è possibile che la procedura descritta in questo articolo non funzioni.
Se, dopo avere seguito i passi indicati, si verificano errori che non riuscite a correggere, cancellate semplicemente i file horizontal.php e horizontal_logout.php, cui faccio riferimento nell'articolo, dalla cartella <%cartella Joomla 3%>\templates\protostar\html\mod_login per riportare il sistema a condizioni precedenti.
Non mi assumo responsabilità per malfunzionamenti, errori o altri problemi che dovessero presentarsi dopo avere seguito i passi suggeriti nel seguito. Si tratta di una procedura che ho usato più volte senza riscontrare problemi o "effetti collaterali", tuttavia, considerata la possibilità di applicarla con versioni differenti del sistema, del template, su server di varia natura, e, non ultimo, considerato che il signor Murphy è sempre in agguato, questo avvertimento è dovuto.
Partiamo da un'installazione base di Joomla 3.4.8. Il template predefinito per il sito lato utente è Protostar; se si sono installati i dati di esempio, accedendo al sito stesso dovrebbe apparire una pagina home simile a quella di figura (ne riporto una parte):
Nella parte destra è visibile il pannello Accesso Utenti, con i campi Nome utente e Password. Lo scopo è riorganizzare il modulo in modo che i campo di testo ed i pulsanti siano orizzontali.
La prima cosa da fare è individuare la posizione dove visualizzare il pannello orizzontale. Le posizioni disponibili dipendono, come noto, dal template utilizzato. Verifichiamo allora quali sono le posizioni che il template mette a disposizione: per conoscerle consultate l'articolo Pillole di Joomla: visualizzare sul sito le posizione del template.
Nel caso del template Protostar, possiamo usare la posizione position-0, in alto a destra. Nell'impostazione base è dedicata al modulo Cerca, che andiamo immediatamente a disabilitare, oppure possiamo trovargli un'altra posizione, a vostro piacimento. Ai fini di questo articolo, lo disabilitiamo.
Il primo passo è rendere disponibile il layout alternativo per il modulo di login. Procediamo in questo modo:
Individuiamo la cartella del template protostar: dovrebbe essere
<%cartella Joomla 3%>\templates\protostar
dove
<%cartella Joomla 3%>è la cartella dove abbiamo installato Joomla;- Spostiamoci nella cartella
protostare quindi nella sottocartellahtml; - Creiamo la cartella
mod_login; Spostiamoci nella cartella
<%cartella Joomla 3%>\modules\mod_login\tmpl
dove troviamo alcuni file; di questi, copiamo negli appunti i file
default.phpedefault_logout.php, gli unici presenti nel caso di Joomla 3.4.8;Incolliamo questi file nella cartella creata in precedenza:
<%cartella Joomla 3%>\templates\protostar\html\mod_login
- Infine, assegnamo un nuovo nome ai due file appena copiati, chiamandoli p.e.
horizontal.phpehorizontal_logout.php.
Molto più complicato da descrivere che da fare...
Ora, andiamo all'amministrazione del sito; selezioniamo Estensioni - Moduli e quindi clic sul modulo Accesso Utenti, poi clic sul menu Avanzate.
Se abbiamo fatto tutto correttamente, quando facciamo clic sulla casella a discesa Layout alternativo dovrebbe essere presente un'opzione --Dal protostar template-- horizontal., come da figura:
Questo è il nuovo layout disponibile per il modulo. Ora si tratta di personalizzarlo.
Il primo file da modificare è <%cartella Joomla 3%>\templates\protostar\html\mod_login\horizontal.php.
Si deve aprirlo con un editor di testo standard (il Blocco note va benissimo). Prima di passare alle modifiche, descrivo brevemente il codice, senza addentrarmi più di tanto nei dettagli, per dare un'idea di massima del comportamento del modulo predefinito.
È possibile che alcuni passaggi non risultino perfettamente chiari, ma l'importante è che il risultato sia quello voluto. Inoltre, l'analisi del codice può essere uno stimolo per comprendere un po' più a fondo come funziona il motore di Joomla e portarvi poi a progettare e testare le vostre modifiche.
Tralasciando il codice specifico per Joomla all'inizio, abbiamo il tag form di apertura (ca. riga 18):
<form action="<?php echo JRoute::_(htmlspecialchars(JUri::getInstance()->toString()), true, $params->get('usesecure')); ?>" method="post" id="login-form" class="form-inline">
Il tag di chiusura del form è alla fine del file. Niente di particolare da segnalare, se non che tutto quanto dovremo modificare è contenuto tra questi tag.
Subito dopo abbiamo il testo che è possibile mostrare prima dei campi di immissione dati:
<?php if ($params->get('pretext')) : ?>
<div class="pretext">
<p><?php echo $params->get('pretext'); ?></p>
</div>
<?php endif; ?>
Questo testo viene mostrato se si inserisce un testo in Testo prima del form nelle impostazioni del modulo.
Ora inizia la parte che ci riguarda da vicino:
<div class="userdata">
<div id="form-login-username" class="control-group">
<div class="controls">
<?php if (!$params->get('usetext')) : ?>
<div class="input-prepend">
<span class="add-on">
<span class="icon-user hasTooltip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>"></span>
<label for="modlgn-username" class="element-invisible"><?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
</span>
<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>" />
</div>
<?php else: ?>
<label for="modlgn-username"><?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?></label>
<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>" />
<?php endif; ?>
</div>
</div>
......
Tralascio dettagli sulle classi CSS (potete approfondire in modo autonomo...); possiamo vedere che il codice visualizza il campo per l'inserimento del nome utente, con le varie proprietà (label, input, etc.); in particolare, se nel modulo è abilitata l'opzione Visualizzazione etichette, viene eseguito il codice dopo <?php if (!$params->get('usetext')) : ?>, altrimenti si esegue il codice dopo <?php else: ?> fino a <?php endif; ?>.
Il campo per l'inserimento del nome utente è preceduto da una label di testo (se Visualizzazione etichette è impostato a Testo) o da un'icona (se Visualizzazione etichette è impostato a Icone). La cosa che ci interessa, ai fini della nostra modifica, è l'uso del tag div che crea un elemento block, imponendo un "ritorno a capo" per elementi successivi (sì sto semplificando ma va bene così...).
Il codice successivo:
<div id="form-login-password" class="control-group"> ... </div>
è equivalente al precedente ma si applica, ovviamente, al campo password.
Subito dopo abbiamo qualcosa di poco chiaro, a prima vista:
<?php if (count($twofactormethods) > 1): ?> <div id="form-login-secretkey" class="control-group"> ... </div> <?php endif; ?>
Analizzando il codice, si capisce che lo scopo è visualizzare un terzo campo di input se si verifica la condizione count($twofactormethods) > 1. Si tratta di una nuova funzionalità di Joomla, introdotta credo con la versione 3.2: l'autenticazione a due fattori. Non sto ad approfondire qui; se siete interessati, potete consultare questo articolo.
Sottolineo due punti: trattandosi di un ulteriore campo di input, dobbiamo tenerne conto nelle nostre modifiche. Secondo: NON ABILITATE QUESTA FUNZIONALITA' SE NON LA CONOSCETE A FONDO. Correte il rischio di non potere più accedere all'amministrazione del sito.
Se volete testare il risultato delle modifiche al codice, fate come me: commentate temporaneamente le righe <?php if (count($twofactormethods) > 1): ?> ed il corrispondente <?php endif; ?>, in modo da visualizzare il campo senza però che sia abilitata l'autenticazione a due fattori.
Segue il codice per il pulsante di invio del modulo:
<div id="form-login-submit" class="control-group">
<div class="controls">
<button type="submit" tabindex="0" name="Submit" class="btn btn-primary"><?php echo JText::_('JLOGIN') ?></button>
</div>
</div>
Abbiamo poi un elenco, con il link a registrazione (visualizzato solo se è consentita), nome utente dimenticato e password dimenticata:
<ul class="unstyled">
<?php if ($usersConfig->get('allowUserRegistration')) : ?>
<li>
<a href="<?php echo JRoute::_('index.php?option=com_users&view=registration&Itemid=' . UsersHelperRoute::getRegistrationRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_REGISTER'); ?> <span class="icon-arrow-right"></span></a>
</li>
<?php endif; ?>
<li>
<a href="<?php echo JRoute::_('index.php?option=com_users&view=remind&Itemid=' . UsersHelperRoute::getRemindRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
</li>
<li>
<a href="<?php echo JRoute::_('index.php?option=com_users&view=reset&Itemid=' . UsersHelperRoute::getResetRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>
</li>
</ul>
Ci sono poi alcuni campi hidden, che non dobbiamo modificare, segue il codice che visualizza il testo dopo i campi di input. Viene mostrato se si inserisce un testo in Testo dopo il form nelle impostazioni del modulo:
<?php if ($params->get('posttext')) : ?>
<div class="posttext">
<p><?php echo $params->get('posttext'); ?></p>
</div>
<?php endif; ?>
Mi rendo conto che l'articolo sta diventando lungo, e credo che sia il caso di digerire questa parte prima di passare alla modifica del codice.
Vai alla seconda parte dell'articolo.
Tags: Joomla, Override, Personalizzare template, PHP