Al crear sitios multilingües con WPML, es posible que necesite un selector de idiomas personalizado. Conozca cómo hacerlo con simple PHP y CSS.
En este tutorial, le mostraremos cómo agregar un selector de idiomas flotante. Un selector de idiomas flotante tiene un aspecto fabuloso y facilita a sus clientes el acceso al sitio en su idioma.
Sitio con selector de idiomas flotante
Seguir estos tres pasos principales:
Agregar el código PHP que representa al selector de idiomas
Crear el estilo del selector de idiomas con CSS
Actualizar los ajustes del selector de idiomas
La parte de PHP
El primer paso es agregar el código PHP que corresponde para ubicar al selector de idiomas en la página. Para ello, se debe crear una función contenedor div con el selector de idiomas en su interior. Podemos utilizar laacción wpml_add_language_selector para representar al selector de idiomas.
En este ejemplo, queremos que el selector de idiomas se ubique en el pie de página, por lo que utilizamos nuestra nueva función con el propio enlace de WordPress, wp_footer.
//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>';
}
Usted puede copiarlo y agregarlo al archivo functions.php del tema secundario.
La parte del estilo
Con el código anterior en su lugar, ya tenemos un nuevo selector de idiomas agregado al pie de página del sitio web. Ahora, debemos personalizarlo para que aparezca flotante en la esquina inferior derecha del sitio web. Puede hacer esto utilizando el atributo CSS, position: fixed.
Realizar los siguientes pasos para agregar el código CSS:
Dirigirse a WPML → Idiomas.
Desplazarse hacia abajo hacia Opciones del selector de idiomas y expandir la sección CSS adicional.
También, puede agregar este código CSS dirigiéndose a Apariencia → Personalizar y haciendo clic en CSS adicional.
El ejemplo siguiente agrega algunos elementos de personalización adicionales como bordes redondeados y sombreado de cuadro. Por supuesto, usted podrá personalizarlo de la manera que desea.
/*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 idiomas 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() ?>
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() ?>