Torna al supporto Uncategorized Tutorial sul sito multilingue semplice utilizzando i blocchi (senza plugin)

Tutorial sul sito multilingue semplice utilizzando i blocchi (senza plugin)

L’editor a blocchi di WordPress offre continuamente nuove possibilità di personalizzare il sito. In questo tutorial, esamineremo l’uso di blocchi per creare menu del sito in due lingue e uno strumento per il cambio di lingua per consentire ai tuoi visitatori di modificare la lingua in cui visualizzano il tuo sito.

Puoi vedere una demo di come funziona qui:

Note e riferimenti

  • Questo strumento per il cambio di lingua non tradurrà le tue pagine, ma ti consentirà di presentare il tuo sito ai visitatori in due o più lingue. Dovrai tradurre tu stesso le pagine.
  • Lo strumento per il cambio di lingua reindirizzerà solamente gli utenti alla pagina iniziale di ogni lingua.
  • Dovrai anche aggiornare i tuoi menu se aggiungi pagine aggiuntive al tuo sito.
  • La configurazione iniziale richiede un po’ di tempo, ma una volta completata, le modifiche e gli aggiornamenti vengono completati rapidamente.
Referenze e ulteriori informazioni

Questo tutorial utilizza le seguenti funzioni:

Metodo

1. Configurazione di pagine e slug della pagina
2. Selezione del layout per il menu e lo strumento per il cambio di lingua
3. Creazione dello strumento per il cambio di lingua
4. Aggiunta un menu di navigazione
5. Salvataggio del tuo nuovo menu e dello strumento per il cambio di lingua
6. Menu seconda lingua
7. Aggiunta di nuovi menu alle altre pagine
8. Aggiunta di più pagine

1. Configurazione di pagine e slug della pagina

Affinché questo tutorial funzioni efficacemente, raccomandiamo di usare uno dei nostri temi compatibili con l’editor a blocchi, elencati qui.

Vai su Il mio sito > Sito > Pagine. Inizia creando una pagina iniziale per ogni lingua in cui vorresti avere sul tuo sito. Non hai bisogno di aggiungere molti contenuti ancora; un titolo della pagina sarà sufficiente per ora.

Pubblica ogni pagina in modo che sia aggiornata, quindi modifica lo Slug della pagina di ogni pagina in modo che faccia riferimento alla relativa lingua. In questo esempio, il titolo della pagina iniziale in francese è Accueil e ha lo slug della pagina /fr/:

Assegna la pagina iniziale della tua lingua preferita come pagina iniziale statica per il tuo sito. In questo modo si avrà la certezza che i visitatori che visiteranno il tuo sito visualizzeranno prima il sito in una lingua per passare poi all’altra.

Una volta che disponi di tutte le pagine iniziali necessarie, crea altre pagine di contenuti per le diverse lingue. Non è ancora necessario aggiungere contenuti. Per ora va bene pubblicare la pagina con il solo titolo e basta.

Quando crei queste pagine, assegnale come Pagine secondarie delle pagine iniziali della tua lingua, utilizzando la sezione Attributi della pagina:

Immagine: indica il titolo della pagina e la sezione Attributi della pagina in cui è possibile definire una pagina principale.
Esempio: panoramica della struttura della pagina
Nell’esempio seguente, abbiamo due pagine iniziali in lingua: inglese e francese. Ciascuno di esse ha due pagine secondarie: Informazioni e Contatti per l’inglese e À Propos e Contact per il francese:
Immagine: panoramica della struttura delle pagine principali e secondarie.
2. Selezione del layout per il menu e lo strumento per il cambio di lingua

In Il mio sito > Sito > Pagine, fai clic sul titolo della pagina iniziale nella lingua principale per aprirla nell’editor di WordPress.

Sotto il titolo della pagina nell’editor, aggiungi un blocco Colonne e scegli un layout a due colonne. Se cambi idea sul layout che hai scelto, non preoccuparti perché puoi modificarlo nelle impostazioni del blocco. Consulta la guida relativa al blocco Colonne per ulteriori informazioni su come eseguire questa operazione.

Ti suggeriamo di usare un layout con una colonna più grande e una più piccola. La colonna più piccola conterrà lo strumento per il cambio di lingua e quella più grande il tuo menu.

Imposta il blocco Colonne su Wide o Full Width:

Immagine: indica l'allineamento della larghezza per il blocco Colonne
3. Creazione dello strumento per il cambio di lingua

A seconda di come desideri venga visualizzato lo strumento per il cambio di lingua, esistono due metodi: puoi digitare i nomi delle lingue o utilizzare le immagini in linea per visualizzare i contrassegni.

Nota: non consigliamo di usare i contrassegni per rappresentare le lingue per due motivi:
1. Sono meno accessibili per i visitatori che potrebbero non riuscire a vedere le immagini del contrassegno
2. Può causare confusione a seconda dei contrassegni che i tuoi visitatori associano a una lingua specifica: non tutti la pensano allo stesso modo.
Per chiarezza, ti consigliamo di usare link testuali (metodi 1 o 2).

Metodo 1: link testuali in un blocco Navigazione
Ora dovresti avere due colonne in attesa di contenuto. Fai clic sulla colonna più stretta e inserire un blocco Navigazione:
Immagine: indica il blocco Navigazione nell'elenco dei blocchi.
Seleziona Crea da tutte le pagine principali per riempire automaticamente il blocco con le pagine iniziali della tua lingua secondaria.

Puoi quindi modificare il testo di ogni elemento in modo da avere il nome della sua lingua (o la versione abbreviata):
Gif animata: modifica del testo di ciascun link in un blocco Navigazione.
Metodo 2: link testuali in un blocco Paragrafo
Ora dovresti avere due colonne in attesa di contenuto. Fai clic sulla colonna più stretta e aggiungere un blocco Paragrafo:
Immagine: indica la selezione di un blocco Paragrafo dall'elenco dei blocchi.

Digita i nomi delle lingue nel formato che preferisci, ad esempio “EN” e “FR” o “inglese” e “francese”.

Evidenzia il nome di ogni lingua e fai clic sul pulsante Inserisci collegamento ipertestuale per collegare il nome della lingua con la sua pagina iniziale. Esempio:

Gif animata: evidenzia una parte di testo e la imposta come link a una pagina del sito
Usando le abbreviazioni della lingua:
Gif animata: evidenzia una parte di testo e la imposta come link a una pagina del sito
Metodo 3: immagini in linea
Ora dovresti avere due colonne in attesa di contenuto. Fai clic sulla colonna più stretta e aggiungere un blocco Paragrafo:
Immagine: indica la selezione di un Blocco paragrafo dall'elenco dei blocchi.
Se disponi di immagini del contrassegno della lingua che desideri usare, puoi utilizzare la funzione delle immagini in linea (disponibile in Altre opzioni) per inserirle e collegarle:
Immagine: il menu Altre opzioni di un blocco Paragrafo, con l'immagine in linea evidenziata
Digita un solo spazio nel blocco Paragrafo per attivare la barra degli strumenti del blocco e visualizzare il menu Altre opzioni. Quando selezioni Immagine in linea, la casella della libreria multimediale/del caricamento si aprirà automaticamente. Carica o seleziona il tuo contrassegno. Per ulteriori informazioni sul caricamento o sulla selezione di un’immagine, consulta questo documento.

Quando l’immagine viene aggiunta, puoi fare clic su di essa per ridimensionarla:
Gif animata: seleziona l'immagine in linea e apparirà il selettore delle dimensioni.
Puoi quindi trasformare l’immagine in un link, allo stesso modo in cui crei un link testuale:
Ripeti questo processo per il contrassegno della seconda lingua.
4. Aggiunta di un menu di navigazione per le tue pagine nella prima lingua

Nella colonna opposta al tuo nuovo strumento per il cambio di lingua, è il momento di aggiungere un blocco Navigazione. Fai clic sulla colonna vuota per aprire il menu dei blocchi e fai la ricerca di Navigazione o cerca nella sezione Elementi del layout:

Immagine: indica la sottosezione Elementi del layout dell'elenco dei blocchi, con il blocco Navigazione indicato come blocco in alto a destra di tale sezione.

Il blocco verrà visualizzato con due opzioni: scegli Crea vuoto. Vedrai il blocco pronto per l’aggiunta delle tue pagine:

Aggiungi un link per ogni pagina nella tua prima lingua. Fai clic sul pulsante Aggiungi blocco (il pulsante nero “+”) a destra del blocco Navigazione per aggiungere un link aggiuntivo:

5. Salvataggio del tuo nuovo menu e dello strumento per il cambio di lingua

Usa il pulsante Navigazione dei blocchi nella parte superiore dell’editor per selezionare le colonne:

Gif animata: utilizzo di Navigazione dei blocchi per selezionare il blocco Colonne contenente il menu di navigazione e lo strumento per il cambio di lingua.

Utilizza la barra degli strumenti del blocco Colonne per visualizzare più opzioni e scegli Aggiungi a blocchi riutilizzabili:

Immagine: indica la barra degli strumenti del blocco e l'opzione Aggiungi a blocchi riutilizzabili.

Assegna al tuo nuovo Blocco riutilizzabile un nome che lo renda facile da identificare, ad esempio Menu: inglese. Puoi leggere di più su come funzionano i Blocchi riutilizzabili in questa guida.

Non dimenticare di aggiornare la pagina per salvare anche le modifiche a essa apportate. Congratulazioni, il tuo primo menu e lo strumenti per il cambio di lingua sono completati.

6. Menu seconda lingua

Per creare il menu per la seconda lingua, potresti seguire nuovamente i passaggi 1-5 oppure prendere una scorciatoia:

Apri una delle pagine della seconda lingua nell’editor di WordPress. Fai clic sul pulsante Aggiungi blocco (il pulsante nero “+”) per aggiungere un nuovo blocco alla pagina. Nell’elenco dei blocchi, scorri a destra fino in fondo per trovare la categoria dei Blocchi riutilizzabili, in cui viene salvato il menu. In alternativa, usa la casella di ricerca per trovarlo.

Gif animata: usa il menu del blocco per trovare un Blocco riutilizzabile.

Una volta che il blocco del menu è stato aggiunto a quella pagina, usa il menu Altre opzioni per convertire in blocchi regolari:

Immagine: indica il menu Altre opzioni e l'opzione Converti in blocco regolare.

Una volta che i blocchi vengono visualizzati come blocchi regolari anziché riutilizzabili, puoi aggiornare il blocco Navigazione in modo che colleghi le pagine della seconda lingua.

Metodo 1: rimozione e nuova aggiunta di un nuovo blocco Navigazione
Seleziona il blocco Navigazione usando il navigatore dei blocchi:
Immagine: mostra il navigatore dei blocchi e come selezionare un blocco
Rimuovi l’intero blocco Navigazione:
Immagine: indica il menu Altre opzioni nel blocco Navigazione e l'opzione Rimuovi blocco
Quindi segui il passaggio 4 sopra per aggiungere nuovamente un blocco Navigazione pulito per la tua seconda lingua
Metodo 2: modifica degli elementi di navigazione
Fai clic sull’elemento che desideri modificare. Fai clic sul pulsante “link” per aprire le informazioni del link, quindi fai clic sul pulsante Modifica. Puoi quindi digitare e selezionare la pagina desiderata. Tieni presente che dovrai anche modificare manualmente il testo del link:

Gif animata: modifica un elemento del blocco Navigazione

Dopo aver apportato le modifiche, salva questo nuovo blocco Colonne come nuovo Blocco riutilizzabile come nel passaggio 5 sopra e assegnagli un nome chiaro che indichi che è il menu per la tua seconda lingua.

Non dimenticare di aggiornare la pagina per salvare anche le modifiche a essa apportate. Congratulazioni, il tuo secondo menu e lo strumenti per il cambio di lingua sono completati.

7. Aggiunta di nuovi menu alle altre pagine

I tuoi menu e lo strumento per il cambio di lingua sono pronti. Ora puoi aggiungere i tuoi due menu di lingua alle altre pagine per le rispettive lingue, come descritto nel passaggio 6 sopra. Nota: una volta salvati i Blocchi riutilizzabili, puoi semplicemente aggiungerli ad altre pagine, ma non è necessario convertirli in blocchi regolari.

8. Aggiunta di più pagine

Hai creato più pagine per ogni lingua e hai bisogno di aggiungerle al tuo menu? Non preoccuparti, puoi modificare i tuoi Blocchi riutilizzabili e si aggiorneranno su ogni pagina a cui sono state aggiunte. Ulteriori dettagli sono disponibili qui.

Copied to clipboard!