Si utilizas el plugin de webs multilenguaje WPML, el estándar que se usa profesionalmente, puede que no te satisfagan las opciones por defecto para mostrar el cambiador de idiomas. Si es tu caso vamos a ver cómo hacer un selector de idiomas flotante bien chulo.
WPML ofrece varios modos de mostrar el selector de idiomas, pero no siempre se adaptan bien a la web, así que la idea es crear un nuevo selector de idiomas, flotante, que se vea en todo momento.
Los pasos que daremos para crearlo son, en este orden, estos:
- Crear un código PHP para generar el nuevo selector de idiomas flotante.
- Añadir CSS para darle estilo al selector de idiomas flotante.
- Cambiar los ajustes del selector de idiomas desde la página de configuración de idiomas de WPML.
Índice de contenidos
Crear el selector de idiomas flotante con PHP
El primer paso es añadir el código PHP responsable de generar el selector de idioma en tu página.
Para ello, hay que crear una función que añada un contenedor div con el selector de idioma dentro de él. Podemos utilizar la acción wpml_add_language_selector para mostrar el selector de idiomas.
En este ejemplo, queremos que el nuevo selector de idiomas se muestre en el pie de página, así que usamos nuestra nueva función con el propio gancho wp_footer de WordPress.
El código PHP completo sería así:
/* Selector flotante de idiomas de WPML */
add_action('wp_footer', 'wpml_floating_language_switcher');
function wpml_floating_language_switcher() {
echo '<div class="wpml-floating-language-switcher">';
do_action('wpml_add_language_selector');
echo '</div>';
}El código anterior puedes añadirlo al final del archivo functions.php del tema (hijo) activo, a un plugin especializado o como te sea más cómodo añadir códigos a tu web. No obstante, como vamos a aplicarlo al tema actual, con estilos, mi consejo es que lo añadas al functions.php del tema.
Añadir CSS con los estilos al selector de idiomas flotante
Cuando hayas añadido el código PHP anterior ahora toca darle algo de estilos para que se muestre de manera elegante en tu web.
Para que flote en la esquina inferior derecha de la web utilizaremos atributo CSS position: fixed.
Sigue los siguientes pasos para añadir el código CSS:
- Ve a WPML → Idiomas.
- Desplázate hasta las Opciones del selector de idiomas y expande la sección CSS adicional.
- Pega en la caja el código CSS personalizado de abajo.
El siguiente ejemplo añade alguna personalización adicional, como bordes redondeados y box-shadow. Por supuesto, puedes personalizarlo como quieras.
/* Primero quitamos el CSS por defecto del selector de idiomas */
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
margin-bottom: 0;
}
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions a {
background-color: transparent !important;
}
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
padding: 5px;
}
/* Y ahora personalizamos el selector de idiomas flotante a nuestro gusto */
.wpml-floating-language-switcher {
position: fixed;
bottom: 10px;
right: 10px;
background: #f8f8f8; /*color de fondo*/
border: 1px solid; /*ajustes del borde*/
border-color: #eee; /*color del borde*/
padding: 0px; /*relleno del contenedor*/
border-radius: 6px; /*bordes redondeados*/
/*Sombra de la caja*/
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}
Si lo prefieres, también puedes añadir este código CSS yendo a Apariencia → Personalizar y haciendo clic en CSS adicional.
Configurar los ajustes del selector de idiomas personalizado de WPML
Ahora que hemos creado el código PHP que mostrará el selector de idiomas flotante, y le hemos aplicado estilos personalizados para hacerlo más bonito, vamos a configurar unos ajustes a nuestro selector de idiomas personalizado.
En este caso, simplemente porque quedará mejor, vamos a configurar que muestre solo las banderas, sin el nombre del idioma.
Los pasos son sencillos, estos:
- Ve a WPML → Idiomas.
- Desplázate hacia abajo hasta Selectores de idioma personalizados y haz clic en Activar.
- Haz clic en el botón de Personalizar.
- En el apartado llamado Qué incluir en el selector de idiomas, marca Bandera y desmarca el resto de opciones.
- Haz clic en Guardar.
Vamos, así:
¡Y ya hemos terminado! ¿Pensabas que sería más difícil?
Solo queda probar nuestro precioso nuevo selector de idiomas flotante, que se verá así de majo…
Por supuesto, el selector de idiomas flotante de WPML estará siempre visible, pues se moverá con la página, añadiendo una funcionalidad genial a la web en lo que se refiere al cambio de idiomas.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola Fernando,
como siempre mil gracias por tus claras explicaciones y por el contenido que nos envías a diario.
Un par de preguntas solamente:
.- Entre WPML y Polylang ¿cuál es mejor según tu opinión? Me refiero a velocidad de carga, recursos,…
.- Revisando el tutorial, he visto que en el código PHP aparece este código:
» …add_action(‘wp_footer’,… »
lo cual entiendo que le indicas al programa que tiene que crear algo (en este caso una capa div) en el footer. ¿cierto?
La pregunta es: si yo quisiera que apareciera el mismo botón flotante en la cabecera, tendría que cambiar ‘wp-footer’ por ‘wp-header’ ¿no? Pero ¿y si quisiera que apareciera por ejemplo donde tú tienes el icono de «accesibilidad»? ¿cómo le doy esas coordenadas?
Mil gracias, y hasta pronto.
Un abrazo
En cuanto a lo de WPML y Polylang, para uso profesional WPML sin duda, ya lo explico aquí, también lo de la carga de páginas: https://ayudawp.com/wpml-divi/#%C2%BFY_que_pasa_con_la_optimizacion_He_oido_que_WPML_hace_lentas_las_webs
Sobre lo de ponerlo en cabecera no lo he probado pero sí, funcionaría también casi seguro. Luego, para cuadrar el lugar exacto hay que jugar con los valores CSS de botton, right, left, etc de la posición, como con el plugin de RGPD que recomiendo siempre, donde también puedes cambiar esos valores.