Realizzazione Template MODX #12 Multilingua

Scritto da Microcipcip il 19/10/2010, 9. Categoria: MODX CMS

Dopo due mesi di pausa, ecco un nuovo entusiasmante tutorial su MODx Evolution!

Oggi andremo a vedere come realizzare un sito multilingua italiano - inglese. 

Introduzione su come creare un sito multilingua

Per MODx Evolution esistono diversi extras/plugin che permettono di gestire siti multilingua. Il più famoso tra questi è sicuramente YAMS (Yet Another Multilingual Solution), il quale consente il multilingua tramite l'utilizzo di TVs. In questo articolo andremo però ad utilizzare un metodo molto più semplice adatto per siti di dimensioni medio piccole.

A fine tutorial otterremo un sito con link di questo tipo (ottimo sistema, a mio avviso, per il SEO):
www.nomesito.com/it/nomepagina.html
www.nomesito.com/en/nomepagina.html

 Introduzione su come creare un sito multilingua - 2 

Ecco i passi che andremo a seguire per trasformare il nostro sito da mono a multilingua:
- Creare la Risorsa "it" nella root del sito
- Spostare tutte le Risorse dentro "it"
- Duplicare "it" (e con esso tutte le sottocartelle) e rinominarlo "en"
- Creare ed inserire dentro le Risorse "it" ed "en" uno Snippet di reindirizzamento pagina
- Inserire le bandierine per cambiare la lingua nel Template
- Duplicare e tradurre i Template ed i Chunks, sistemare gli ID di Wayfinder e Ditto

1. Creare la Risorsa "it" ed "en"

Creiamo la Risorsa "it" nella root e spostiamo tutte le Risorse del sito al suo interno, come mostrato nell'immagine:

Ora duplichiamo la Risorsa "it" e rinominiamola "en" (url alias compreso):

2. Creare lo Snippet Redirect

Andiamo su Elements > Manage Elements > Snippets > New Snippet ed inseriamo il seguente codice:

Snippet name: Redirect
Description: Redirect from first page
Snippet Code (php):

<?php
$url = $modx->makeUrl($id);
ob_end_clean(); // this will end the output buffer and discard silently what ever was in it
header('Location: '.$url);
?>

3. Inserire la Snippet Call dentro le Risorse "it" ed "en"

Ora che lo Snippet è stato creato, apriamo la Risorsa "it" ed inseriamo, su Resource Content, la seguente Snippet Call:

[[Redirect?id=`1`]]
 // Il valore 1 corrisponde all'ID della Risorsa Home Page in italiano

Ora clicchiamo sul tab "Settings" e deselezioniamo "cacheable" e salviamo.
Apriamo la Risorsa "en" ed inseriamo, su Resource Content, la seguente Snippet Call:

[[Redirect?id=`21`]]
 // Il valore 21 corrisponde all'ID della Risorsa Home Page in inglese

Ora clicchiamo sul tab "Settings" e deselezioniamo "cacheable" e salviamo.

4. Inserire le bandierine per cambiare la lingua nel Template

inserire nel Template delle bandierine per cambiare la lingua è semplicissimo, basta inserire un div simile al seguente:

<div class="language">
    <a href="[~1~]"><img src="url-img-lingua-italiano.jpg" alt="#" /></a>
    <a href="[~21~]"><img src="url-img-lingua-inglese.jpg" alt="#" /></a>
</div>

5. Duplicare e tradurre Template, Chunks e sistemare Wayfinder e Ditto

L'ultima parte del tutorial consiste nel Duplicare e tradurre i Template ed i Chunks, che poi andranno assegnati alle Risorse del ramo "en". Anche le Snippet Call di Wayfinder e Ditto che generano i menu orizzontali e verticali andranno cambiati a seconda delle proprie esigenze. Non sto qui a mostrarvi i passaggi da fare, se avete seguito i miei tutorial precedenti non dovrebbe esserci niente di difficile.

6. Riepilogo

In questo articolo abbiamo visto, a grandi linee, come creare un sito multilingua di dimensioni medio piccole.

Nel prossimo articolo andremo a creare una Galleria fotografica con lightbox con supporto per il ridimensionamento ed il taglio delle immagini. A presto!

• Home
• Portfolio
• Blog
• Contattaci