El editor de bloques de WordPress aporta continuamente nuevas posibilidades para personalizar tu sitio. En este tutorial, vamos a aprender a usar bloques para crear menús del sitio en dos idiomas y a crear un selector de idioma para que tus visitantes puedan cambiar el idioma en el que ven tu sitio.
Aquí puedes ver una demostración de cómo funciona:
En esta guía
- Notas y referencias
- Método
- 1. Configurar páginas y slugs de página
- 2. Seleccionar el diseño del menú y del selector de idioma
- 3. Crear el selector de idioma
- 4. Añadir un menú de navegación para las páginas del primer idioma
- 5. Guardar el menú nuevo y el selector de idioma
- 6. Menú del segundo idioma
- 7. Añadir los menús nuevos a las otras páginas
- 8. Añadir más páginas
- Este selector de idioma no va a traducir las páginas, sino que te permitirá mostrar tu sitio a los visitantes en dos idiomas o más. Vas a tener que traducir las páginas.
- El selector de idioma solo redirigirá a los usuarios a la página de inicio de cada idioma.
- También tendrás que actualizar los menús si añades páginas adicionales a tu sitio.
- La configuración inicial puede tardar un tiempo, pero cuando termines, las actualizaciones y los ajustes se harán muy rápido.
En este tutorial se utilizan las siguientes funciones:
- Slugs de página
- Páginas principales y secundarias
- Página de inicio estática
- Bloque de columnas
- Bloque de párrafo
- (Opcional) Imágenes integradas (disponibles en la barra de herramientas del bloque de párrafo)
- Bloque de navegación
- Bloques reutilizables
1. Configurar páginas y slugs de página
2. Seleccionar el diseño del menú y el selector de idioma
3. Crear el selector de idioma
4. Añadir un menú de navegación
5. Guardar el menú nuevo y el selector de idioma
6. Menú del segundo idioma
7. Añadir los menús nuevos a las otras páginas
8. Añadir más páginas
Para que este tutorial funcione lo mejor posible, te recomendamos que uses uno de nuestros temas compatibles con el editor de bloques. Aquí puedes encontrar una lista.
Ve a Mi sitio > Sitio > Páginas. Para empezar, crea una página de inicio para cada idioma que quieras tener en tu sitio. Por ahora no tienes que añadir mucho contenido, con el título de la página es suficiente.
Publica las páginas para que estén actualizadas y luego cambia el slug de página para que cada una haga referencia a su idioma. En este ejemplo, la página de inicio en francés se titula Accueil y el slug de página es /fr/
:
![](https://en-support.files.wordpress.com/2019/12/frslug.png?w=1024)
Configura la página de inicio en el idioma que prefieras como la página de inicio estática de tu sitio. Así, te asegurarás de que los visitantes que lleguen a tu sitio van a verlo primero en un idioma y luego podrán cambiarlo.
Cuando tengas todas las páginas de inicio que necesites, crea algunas páginas de contenido para los distintos idiomas. Todavía no tienes que añadir contenido. No pasa nada por publicar las páginas solo con el título.
Al crear estas páginas, asígnalas como páginas secundarias de las páginas de inicio del idioma con la sección Atributos de página:
![Imagen: se señala el título de la página y la sección Atributos de página, en la que puedes definir la página principal.](https://en-support.files.wordpress.com/2019/12/parentpagesetting.png?w=1024)
Ejemplo: vista general de la estructura de la página
![Imagen: vista general de la estructura de páginas principales y páginas secundarias.](https://en-support.files.wordpress.com/2020/04/parentchildstructure.png)
En Mi sitio > Sitio > Páginas, haz clic en el título de la página de inicio del idioma principal para abrirla en el editor de WordPress.
En el editor, debajo del título de la página, añade un bloque de columnas y elige un diseño con dos columnas. Si cambias de idea y no quieres usar el diseño que elegiste, no te preocupes, puedes cambiarlo en los ajustes del bloque. Consulta la guía del bloque de columnas para obtener más información sobre cómo hacer esto.
Te recomendamos que uses un diseño con una columna más grande y otra más pequeña. En la columna más pequeña estará el selector de idioma y en la grande el menú.
Configura el bloque de columnas en ancho amplio o ancho completo:
![Imagen: se señala la alineación del ancho del bloque de columnas](https://en-support.files.wordpress.com/2019/12/columnalignment.png?w=1024)
En función de cómo quieras que aparezca el selector de idiomas, puedes elegir dos opciones: puedes escribir el nombre de los idiomas o puedes usar imágenes integradas para mostrar las banderas.
Nota: No recomendamos usar banderas para representar idiomas por dos motivos:
1. Es menos accesible para los visitantes que no puedan ver las imágenes de las banderas
2. Puede resultar confuso para algunos visitantes en función del idioma con el que relacionan la bandera. ¡No todos pensamos igual!
Para que sea más claro, recomendamos usar enlaces de texto (método 1 o 2).
Método 1: enlaces de texto en un bloque de navegación
![Imagen: se señala el bloque de navegación en la lista de bloques.](https://en-support.files.wordpress.com/2019/12/navlang1.png)
Puedes cambiar el texto de cada elemento para que tenga el nombre del idioma (o una versión abreviada):
![Gif animado: se cambia el texto los enlaces en un bloque de navegación.](https://en-support.files.wordpress.com/2019/12/navlang2.gif)
Método 2: enlaces de texto en un bloque de párrafo
![Imagen: se señala el bloque de párrafo en la lista de bloques.](https://en-support.files.wordpress.com/2019/12/addparagraph.png?w=1024)
Escribe el nombre de los idiomas en el formato que prefieras, por ejemplo, «EN» y «FR» o «Inglés» y «Francés».
Destaca el nombre de los idiomas y haz clic en el botón Insertar hipervínculo para enlazar el nombre del idioma con su página de inicio. Ejemplo:
![Gif animado: se destaca una parte del texto y se configura como un enlace a la página del sitio](https://en-support.files.wordpress.com/2019/12/textlink1.gif)
![Gif animado: se destaca una parte del texto y se configura como un enlace a la página del sitio](https://en-support.files.wordpress.com/2019/12/textlink2.gif)
Método 3: imágenes integradas
![Imagen: se señala el bloque de párrafo en la lista de bloques.](https://en-support.files.wordpress.com/2019/12/addparagraph.png?w=1024)
![Imagen: el menú Más opciones de un bloque de párrafo con la opción Imagen integrada resaltada](https://en-support.files.wordpress.com/2019/12/inline1.png)
Cuando hayas añadido la imagen, puedes hacer clic en ella para cambiarla de tamaño:
![Gif animado: elige la imagen integrada y aparecerá el selector de tamaño.](https://en-support.files.wordpress.com/2019/12/resizeflag.gif)
![Gif animado: se hace clic en la imagen integrada para elegirla y luego se hace clic en el botón Enlace. Después, puedes elegir la página que quieras enlazar.](https://en-support.files.wordpress.com/2019/12/linkimg.gif)
En la otra columna, al lado del selector de idioma, hay que añadir un bloque de navegación. Haz clic en la columna vacía para abrir el menú del bloque y busca Navegación o búscalo en la sección Elementos de diseño:
![Imagen: se señala la subsección de Elementos de diseño de la lista de bloques. El bloque de navegación está situado en la parte superior derecha de la sección.](https://en-support.files.wordpress.com/2019/12/navblock1.png?w=1024)
El bloque tendrá dos opciones. Elige Crear vacío. Verás que el bloque ya estará listo para que añadas las páginas:
![](https://en-support.files.wordpress.com/2019/12/navblock2.png?w=1024)
Añade un enlace por cada página en el idioma principal. Haz clic en el botón Añadir bloque (el botón negro con un signo «+») a la derecha del bloque de navegación para añadir un enlace adicional:
![](https://en-support.files.wordpress.com/2019/12/navblock3.gif?w=1024)
Usa el botón del bloque de navegación en la parte superior del editor para elegir las columnas:
![Gif animado: se usa el bloque de navegación para elegir el bloque de columnas que tiene el menú de navegación y el selector de idioma.](https://en-support.files.wordpress.com/2019/12/selectcolumns.gif?w=1024)
Usa la barra de herramientas del bloque de columnas para ver más opciones y elige Añadir a los bloques reutilizables:
![Imagen: se señala la barra de herramientas del bloque y la opción Añadir a los bloques reutilizables.](https://en-support.files.wordpress.com/2019/12/addtoreusable.png?w=1012)
Ponle un nombre al bloque reutilizable para que sea fácil de identificar, por ejemplo, Menú – inglés. Puedes leer más sobre el funcionamiento de los bloques reutilizables en esta guía.
Acuérdate de actualizar la página y de guardar los cambios. Felicidades, ¡ya has terminado el menú y el selector de idioma para el primer idioma!
Para crear el menú para el segundo idioma, puedes seguir los pasos del 1 al 5 de nuevo, o puedes ir por el camino corto:
Abre una de las páginas en el segundo idioma en el editor de WordPress. Haz clic en el botón Añadir bloque (el botón negro con un signo «+») para añadir un bloque nuevo a la página. En la lista de bloques, desplázate hasta el final para encontrar la categoría de bloques reutilizables, donde se guarda el menú. Si lo prefieres, también puedes usar el cuadro de búsqueda para encontrarla.
![Gif animado: se usa el menú del bloque para buscar un bloque reutilizable.](https://en-support.files.wordpress.com/2019/12/findblock.gif?w=1024)
Cuando hayas añadido el bloque de menú a la página, usa el menú Más opciones y elige la opción Convertir en bloques normales:
![Imagen: se señala el menú Más opciones y la opción Convertir en bloques normales.](https://en-support.files.wordpress.com/2019/12/converttoregular.png?w=928)
Cuando los bloques se muestren como bloques normales en vez de como bloques reutilizables, ya puedes actualizar el bloque de navegación para que enlace con las páginas en el segundo idioma.
Método 1: eliminar y volver a añadir un nuevo bloque de navegación
![Imagen: se señala el navegador de bloques y cómo elegir un bloque](https://en-support.files.wordpress.com/2019/12/blocknavigator2.png)
![Imagen: se señala el menú Más opciones en el bloque de navegación y la opción Eliminar bloque](https://en-support.files.wordpress.com/2019/12/removenavblock.png)
Método 2: cambiar los elementos de navegación
![Gif animado: se modifica un elemento de un bloque de navegación](https://en-support.files.wordpress.com/2019/12/changenavitem.gif)
Cuando hayas terminado con los cambios, guarda el nuevo bloque de columnas como un bloque reutilizable nuevo, como se indica anteriormente en el paso 5. Ponle un nombre que no lleve a confusión que indique que es el menú del segundo idioma.
Acuérdate de actualizar la página y de guardar los cambios. Felicidades, ¡ya has terminado el menú y el selector de idioma para el segundo idioma!
Los menús y el selector de idiomas están listos. Ahora puedes añadir los menús en los dos idiomas a las otras páginas para los respectivos idiomas, como se describió anteriormente en el paso 6. Ten en cuenta que cuando se guarden los bloques reutilizables puedes añadirlos a otras páginas, pero no tienes que convertirlos en bloques normales.
¿Has creado más páginas para cada idioma y tienes que añadirlas al menú? No te preocupes, puedes editar los bloques reutilizables y se actualizarán en todas las páginas en las que se añadieron. Aquí puedes encontrar más información.