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:
In questa guida
- Note e riferimenti
- 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 di un menu di navigazione per le tue pagine nella prima lingua
- 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
- 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.
Questo tutorial utilizza le seguenti funzioni:
- Slug delle pagine
- Pagine principali e secondarie
- Pagina iniziale statica
- Blocco Colonne
- Blocco Paragrafo
- (Facoltativo) Immagini in linea (disponibili dalla barra degli strumenti del blocco Paragrafo)
- Blocco Navigazione
- Blocchi riutilizzabili
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
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:
Esempio: panoramica della struttura della pagina
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:
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
Puoi quindi modificare il testo di ogni elemento in modo da avere il nome della sua lingua (o la versione abbreviata):
Metodo 2: link testuali in un blocco Paragrafo
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:
Metodo 3: immagini in linea
Quando l’immagine viene aggiunta, puoi fare clic su di essa per ridimensionarla:
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:
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:
Usa il pulsante Navigazione dei blocchi nella parte superiore dell’editor per selezionare le colonne:
Utilizza la barra degli strumenti del blocco Colonne per visualizzare più opzioni e scegli 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.
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.
Una volta che il blocco del menu è stato aggiunto a quella pagina, usa il menu Altre opzioni per convertire in blocchi regolari:
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
Metodo 2: modifica degli elementi di 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.
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.
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.