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.
WPML te permite añadir selectores de idiomas a tus menús, widgets, pies de página y a los sitios mediante el Editor de Sitios (antes conocido como Full Site Editing), que incluye opciones de personalización y banderas integradas. Pero puede que necesites algo más especial para tu sitio.
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.
Un sitio que utiliza el selector de idioma flotante
Seguir 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 de 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 estilo
Con el código anterior en su sitio, 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.
Realizar los siguientes pasos para agregar 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 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 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() ?>