Selector de idiomas personalizado

Al desarrollar sitios multilingües con WPML, es posible que necesite un selector de idiomas personalizado. Aprenda a hacerlo con un poco de PHP y CSS simple.

WPML le permite añadir selectores de idiomas a sus menús, widgets, pies de página y a los sitios que utilizan el Editor del sitio (anteriormente conocido como edición completa del sitio), con opciones de personalización y banderas integradas. Sin embargo, es posible que necesite algo más especial para su sitio.

En este tutorial, le mostraremos cómo añadir un selector de idiomas flotante. Un selector de idiomas flotante tiene un aspecto fantástico y facilita a sus clientes ver su sitio en su idioma.

Siga estos tres pasos principales:

1. Añada el código PHP que renderiza el selector de idiomas
2. Dé estilo a su selector de idiomas con CSS
3. Actualice la configuración de su selector de idiomas

La parte de PHP

El primer paso es añadir el código PHP responsable de renderizar el selector de idiomas en su página. Para ello, debe crear una función que añada un contenedor div con el selector de idiomas en su interior. Podemos utilizar la acción wpml_add_language_selector para renderizar el selector de idiomas.

En este ejemplo, queremos que el nuevo selector de idiomas se muestre en el pie de página, por lo que utilizamos nuestra nueva función con el propio hook wp_footer de WordPress.

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

//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>'; 
}

Puede copiarlo y añadirlo al archivo functions.php de su tema (hijo).

La parte de estilos

Con el código anterior implementado, ya tenemos un nuevo selector de idiomas añadido al pie de página de nuestro sitio web. Ahora, es el momento de personalizarlo para que flote en la esquina inferior derecha del sitio web. Puede hacerlo utilizando el atributo CSS position: fixed.

Siga estos pasos para añadir el código CSS:

1. Vaya a WPML → Configuración → Selectores de idiomas.
2. En la tarjeta Opciones del selector de idiomas, expanda CSS adicional.

De forma alternativa, puede 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 (box-shadow). Por supuesto, puede personalizarlo como quiera.

/*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 configuración

Finalmente, debe ajustar algunas configuraciones para que el selector de idiomas solo muestre las banderas.

Siga estos pasos:

1. Vaya a WPML → Configuración → Selectores de idiomas → Selectores de idioma personalizados.
2. Desplácese hacia abajo hasta Selectores de idioma personalizados y haga clic en Activar.
3. Haga clic en el botón Personalizar.
4. En la sección Qué incluir en el selector de idiomas, deje marcada la casilla Bandera y desmarque Nombre del idioma nativo, Nombre del idioma en el idioma actual y Idioma actual.
5. Haga clic en Guardar.

¡Eso es todo! Ahora debería tener un bonito selector de idiomas personalizado en el sitio web:

Extra: Selector de idiomas flotante vertical

También puede crear un selector de idiomas vertical en su lugar, como en la captura de pantalla a continuación:

Para ello, simplemente reemplace el CSS anterior con el siguiente código:

/*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;
}