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.
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.
La entrada Selector de idiomas flotante con WPML la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.
0 Commentaires