Trucchi Contao

Questa pagina è una specie di prontuario che raccoglie molti frammenti di codice, servono a risolvere alcuni piccoli difetti del CMS Contao. Sono tutti trucchi che dipendono dalla mia esperienza lavorativa e dal mio gusto personale, quindi non è detto che dobbiate seguire questi consigli.
Le istruzioni sono valide per la versione Contao 3.

1) Evitare il path duplicato della home page

Se abilitiamo il rewrite (impostazioni generali), Contao simula un sito statico ed imposta i percorsi delle pagine con l'alias, e ci aggiunge ".html". Questo è bene per SEO, ma abbiamo un problema. Se creiamo un modulo menu, la voce che punta alla home page ha il link con l'alias, ad esempio "home.html". Avremmo quindi un duplicato nelle statistiche di Analytics e di Webmaster Tools per una pagina che di fatto è la stessa: "http://www.nomesito.it/it/home.html" ed anche "http://www.nomesito.it/it/".
Questo voglio evitarlo perché oltre al fatto che Google potrebbe penalizzarci, in ogni caso dividiamo in due i risultati e quindi il ranking.

(Edit giugno 2013: ho scoperto che si può evitare questo problema facilmente, basta scrivere "index" come alias della pagina, in questo caso Contao corregge da solo il link)

La cosa da fare è inserire il seguente codice nel file .htaccess, alla fine del mod_rewrite. Ho messo due varianti a scelta.

##
# Redirect to prevent duplicate content of the home page
# uncomment the version you prefere
##

## Keeping the current directory path
RedirectMatch 301 (.*)/home.html $1

## Straight to the website root
# RedirectMatch 301 /home.html /

2) Mantenere il link sulle voci attive dei menu

Il template default del menu di Contao prevede che le voci attive siano senza link, ed abbiano invece uno <span>. Questa pratica è condivisa da altri ma a me non piace. Ritengo che il menu debba sempre contenere tutti i link delle pagine.
Per fare questo basta creare un nuovo template "nav_default" e rimuovere la condizione "if", il codice che ne risulta è il seguente.

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>

<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>

<?php endforeach; ?>
</ul>

3) Sistemare alcuni difetti del calendario

Il template "cal_default" ha per tutti gli eventi un class del tipo "event", poi "cal_x" dove la x è l'id dell'archivio eventi (utile nel caso volessi distinguere gli eventi in base alla categoria a cui appartengono), ed infine un class "current" che secondo me è di troppo, si confonde con il current del menu, e se non sto attento coi selettori mi potrebbe impostare erroneamente attivi tutti gli eventi.
Sarebbe meglio avere solo class="event cal_x". Il codice quindi è il seguente.

<div class="event cal_<?php echo $event['parent']; ?><?php echo $event['class']; ?>">

diventa...
  
<div class="event cal_<?php echo $event['parent']; ?>">

Oltre a questa correzione per il calendario grande ce ne sono anche altre che riguardano il mini calendar come spiegato in questo articolo. Nello stesso articolo spiego come evitare i contenuti duplicati (sempre motivi SEO), aggiungere l'immagine nei template degli eventi (che di default manca), ed ho incluso anche il codice css di riferimento per stilizzare un piccolo calendario.

4) Iscrivere gli utenti ad un gruppo e ad una newsletter

L'iscrizione alla newsletter in Contao può avvenire in due modi: uno rapido e spartano, e uno più completo.

Rapido e spartano: gli utenti forniscono solo una email, e si iscrivono direttamente nella lista della newsletter, quando si cancellano eliminano la loro email dalla lista. E' necessario creare queste cose:

la Newsletter in back-end
il modulo iscrizione newsletter
il modulo disiscrizione newsletter
la pagina dove sta la form di iscrizione
la pagina di risposta dopo la compilazione della form
la pagina dove si conferma la registrazione alla newsletter (Double opt-in)
la pagina dove sta la form di disiscrizione
la pagina di risposta dopo la disiscrizione

Metodo più completo: gli utenti sono registrati come membri, con un'anagrafica più completa, poi eventualmente con username e password, ed area riservata con accesso front-end. Gli utenti possono cancellarsi dalla newsletter restando membri, o rimuovere totalmente il loro account. La procedura è simile ma con alcune differenze.

la Newsletter in back-end
il gruppo utenti members
il modulo iscrizione newsletter
il modulo iscrizione utenti scegliendo anche il campo newsletter e quale newsletter
il modulo disiscrizione newsletter o eventualmente un modulo rimozione utente
la pagina dove sta la form di iscrizione
la pagina di risposta dopo la compilazione della form
la pagina dove si conferma la registrazione alla newsletter (Double opt-in)
la pagina dove sta la form di disiscrizione
la pagina di risposta dopo la disiscrizione

I membri possono iscriversi a più di una newsletter, per semplicità ho scelto un unico gruppo con un'unica newsletter (è anche il caso più comune).
Veniamo al punto: la form di iscrizione in front-end presenta un campo checkbox dove l'utente dovrebbe scegliere la newsletter a cui iscriversi. Questo campo però è superfluo se l'iscrizione è intesa per una sola newsletter fin da principio, sarebbe meglio quindi se fosse nascosto. Purtroppo da back end non si può configurare quindi dobbiamo fare un trucco. Quello più facile e rapido è via javascript, per attivare il checkbox e nasconderlo, propongo questi due script: uno per Mootools ed uno per Jquery, basta inserire quello che vi serve nella pagina in cui avete la form.

Script per Mootools
  
<script type="text/javascript">
window.addEvent('domready', function(){
$('ctrl_newsletter').getElement('.checkbox').setAttribute('checked','checked');
$('ctrl_newsletter').setStyle('display', 'none');
});
</script>


Script per JQuery

<script type="text/javascript">
$(document).ready(function() {
$('#ctrl_newsletter').find('.checkbox').attr('checked', true);
$('#ctrl_newsletter').css({'display':'none'});
});
</script>

5) Redirect delle vecchie url per rinnovo del sito

Anche questa è una operazione SEO. Nel mio caso avevo un vecchio sito Joomla che aveva gli URL non ottimizzati, con "index.php?....ecc...ecc..." eppure era ben posizionato.
Non mi sono preoccupato troppo se perdevo ranking, perché ero indicizzato comunque con keywords che non desideravo (articoli obsoleti, o per Joomla che non tratto più, o per Flash...). Tuttavia mi dispiaceva vedere tutti quegli errori in Webmaster Tools, quindi ho voluto redirigere almeno parte delle pagine verso il nuovo sito Contao 3.

Nel file .htaccess, subito dopo la Rewritebase ho inserito quindi il seguente codice:

#reindirizzo tutti i vecchi url
  RewriteRule ^demo/wbl-demo/(.*)$ it/? [R=301,L]
  RewriteRule ^demo/alphadiv/(.*)$ it/? [R=301,L]
  RewriteRule ^demo/positionfixed/(.*)$ it/? [R=301,L]

  RewriteCond %{QUERY_STRING} ^.*option=com_content.*?$ [OR]
  RewriteCond %{QUERY_STRING} ^.*option=com_contact.*?$ [OR]
  RewriteCond %{QUERY_STRING} ^.*option=com_rss.*?$ [OR]
  RewriteCond %{QUERY_STRING} ^.*option=com_akocomment.*?$ [OR]
  RewriteCond %{QUERY_STRING} ^.*option=com_frontpage.*?$ [OR]
  RewriteCond %{QUERY_STRING} ^.*option=com_search.*?$
  RewriteRule ^(.*)$ it/? [R=301,L]

In pratica le prime tre RewriteRule erano delle cartelle con delle demo, erano probabilmente cose molto visitate perché i file avevano parecchi accessi. Ho mandato tutte le richieste alla versione italiana "/it/" del mio nuovo sito.

Poi ho fatto una serie di RewriteCond per intercettare particolari parametri della Querystring, come ho già detto non avevo altra pagina che la index.php. Ho preso quindi i parametri più ricorrenti del sito (contenuto, commenti, ricerche interne...) e ho girato tutto ancora su /it/.

6) Bug in IE8 con Colorbox e le immagini max-width:100%

Ho visto sul sito dello sviluppatore di Colorbox che questa correzione nel css è già stata fatta. Tuttavia Contao (almeno fino la 3.0.3) ha una versione non aggiornata della plugin, e presenta il bug.
Avete due opzioni, o aggiornate Colorbox, oppure sistemate il css come spiego in questo articolo.

7) Form dei commenti con i Placeholder

Placeholder è una funzionalità HTML5, Contao l'ha implementata e la possiamo trovare nel generatore delle form.
Tuttavia se abilitiamo i commenti notiamo che il template della form non è ancora provvisto di placeholder (forse devono finire di aggiornare tutti i template delle form front-end). Comunque possiamo farlo noi con dei template custom come spiego in questo articolo.

Mercoledì 13 Febbraio 2013

(1 commenti)

.htaccess