Skip Navigation
Inicio » Documentación » Guía de inicio » Configuración del idioma » Opciones del selector de idiomas » Selector de idiomas personalizado

Selector de idiomas personalizado

Amir
Actualizado
agosto 16, 2021

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:

  1. Agregar el código PHP que representa al selector de idiomas
  2. Crear el estilo del selector de idiomas con CSS
  3. 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 la acció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.

El código PHP completo se verá así:

Language switcher PHP 
//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:

  1. Dirigirse a WPML → Idiomas.
  2. 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.

Language Switcher Styling 
/*Removing some default CSS from 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;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 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);
}

La parte de ajustes

Finalmente, deberá implementar algunos ajustes para que el selector de idiomas muestre solo las banderas.

Realizar los siguientes pasos:

  1. Dirigirse a WPML → Idiomas.
  2. Desplazarse hacia abajo hacia Personalizar selectores de idiomas y hacer clic en Activar.
  3. Hacer clic en el botón Personalizar.
  4. Para Qué incluir en el selector de idiomas, seleccionar Bandera y desmarcar las otras opciones.
  5. Hacer clic en Guardar.
Language switcher options
Mostrar solo la bandera en el selector de idiomas flotante.

Y eso es todo. Ahora tiene un fabuloso selector de idiomas personalizado en el sitio web.

Horizontal language switcher
El selector de idiomas en la interfaz de usuario

Bonus: Selector de idiomas flotante vertical

También, puede crear un selector de idiomas vertical, como el de la captura de pantalla siguiente:

Vertical language switcher
Selector de idiomas vertical

Para esto, solo reemplace el CSS anterior con el siguiente código:

Vertical Language Switcher CSS 
/*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”

  2. 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

  3. 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

  4. 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() ?>