Al desarrollar sitios multilingües con WPML, es posible que necesites un selector de idioma personalizado. Aprende a hacerlo con unos sencillos PHP y CSS.
WPML te permite añadir selectores de idiomas a tus menús, Widgets, pies de página y a los sitios que utilicen el Editor de Sitios (antes conocido como Full Site Editing) completo con opciones de personalización y banderas incorporadas. Pero puede que necesites algo más especial para tu sitio.
En este tutorial, mostraremos cómo añadir un selector de idioma flotante. Un selector de idioma flotante tiene un aspecto estupendo y facilita que tus clientes vean tu sitio en su idioma.
Un sitio que utiliza el selector de idioma flotante
Sigue estos tres pasos principales:
Añade el código PHP que muestra el selector de idioma
Estiliza tu selector de idioma con CSS
Actualiza la configuración de tu selector de idiomas
La parte PHP
El primer paso es añadir el código PHP responsable de mostrar el selector de idioma en tu página. Para ello, crea una función que añada un contenedor div con el selector de idioma en su interior. Podemos utilizar laAcción wpml_add_language_selector para mostrar el selector de idioma.
En este ejemplo, queremos que el nuevo selector de idioma se muestre en el pie de página, así que utilizamos nuestra nueva función con el gancho wp_footer propio de WordPress.
//WPML - Add a floating language switcher to the footer
add_action('wp_footer', 'wpml_floating_language_switcher');
function wpml_floating_language_switcher() {
echo '<div class="wpml-floating-language-switcher">';
//PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
do_action('wpml_add_language_selector');
echo '</div>';
}
Puedes copiarlo y añadirlo al archivo functions. php de tu tema hijo.
La parte del estilismo
Con el código anterior, ya tenemos un nuevo selector de idioma añadido al pie de página de nuestra web. Ahora, es el momento de personalizarlo para que aparezca flotando en la esquina inferior derecha de la web. Puedes hacerlo utilizando el atributo CSS position: fixed.
Sigue estos pasos para añadir el código CSS:
Ir a WPML → Idiomas.
Desplázate hasta Opciones del selector de idioma y amplía la sección CSS adicional .
Alternativamente, puedes añadir este código CSS yendo a Apariencia → Personalizar y haciendo clic en CSS adicional.
El siguiente ejemplo añade algunas personalizaciones adicionales, como bordes redondeados y sombra de caja. Por supuesto, puedes personalizarlo como quieras.
/*Removing some default CSS our language switcher*/
.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;
}
.wpml-floating-language-switcher .wpml-ls-item {
display: block;
}
/*Customize this if you want*/
.wpml-floating-language-switcher {
position: fixed;
bottom: 20px;
right: 0px;
background: #f8f8f8; /*background color*/
border: 1px solid; /*border settings*/
border-color: #eee; /*color of the border*/
padding: 0px; /*padding of container*/
border-radius: 6px 0 0 6px; /*rounded border*/
/*Box Shadow*/
-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);
z-index: 999;
}
5 respuestas para “Selector de idioma personalizado”
Hola. ¿qué idiomas soporta o podría instalar?.
Saludos
Juan
Hola, cuando se utiliza un link de categoría en un menú, no aparecen los links de las traducciones para cada idioma…creo que esto es un bug, hay alguna solución?
Gracias
Ahi Explican los Idiomas Horizontalmente es asi exactamente como los Quiero, pero en el Header se podra hacer cambiando la palabra footer por header y tambien me podrian explicar a cual parte iria en la parte de functions asi como la parte del header y si va codigo en CSS
Gracias
Y estoy a sus Ordenes
Hola buen dìa, tengo un problema, quiero agregar la barra de idiomas que aparece en el footer, en mi header.php, ya intente muchas formas y no me aparece, y ya me estoy desesperando, por favor alguie que me ayude
Para conseguir esto puedes editar el fichero header.php de tu tema e insertar esta linea justo despues del tag BODY:
language_selector_footer() ?>
Language switcher PHP
Hola. ¿qué idiomas soporta o podría instalar?.
Saludos
Juan
Hola, cuando se utiliza un link de categoría en un menú, no aparecen los links de las traducciones para cada idioma…creo que esto es un bug, hay alguna solución?
Gracias
Ahi Explican los Idiomas Horizontalmente es asi exactamente como los Quiero, pero en el Header se podra hacer cambiando la palabra footer por header y tambien me podrian explicar a cual parte iria en la parte de functions asi como la parte del header y si va codigo en CSS
Gracias
Y estoy a sus Ordenes
Hola buen dìa, tengo un problema, quiero agregar la barra de idiomas que aparece en el footer, en mi header.php, ya intente muchas formas y no me aparece, y ya me estoy desesperando, por favor alguie que me ayude
Para conseguir esto puedes editar el fichero header.php de tu tema e insertar esta linea justo despues del tag BODY:
language_selector_footer() ?>