WPML viene provisto con su propio intercambiador de idioma, implementado como una lista desplegable de idiomas. Es bastante flexible aunque no siempre sea suficiente.

Puede construir sus propios intercambiadores de idioma personalizados e incluirlos en el Tema. Le mostraremos cómo agregar la lista de idiomas disponibles para entradas y la lista de idiomas para el pie.

Adquirir la lista de (otros) idiomas

Utilice la función icl_get_languages() para obtener la lista de traducciones para una página. Sintaxis:

icl_get_languages('skip_missing=N&orderby=KEY&order=DIR&link_empty_to=str')

* N=0/1
* KEY=id/código/nombre (nombre -> nombre_traducido), (valor por defecto: id)
* DIR=asc/desc (valor por defecto: asc)
* link_empty_to = str (valor por defecto: vacío, trabaja conjuntamente con skip_missing=0 y permite utilizar enlaces personalizados para los idiomas que no disponen de traducción para el elemento actual. {$lang} puede ser utilizado como marcador del código de idioma)

Notas:

  • El parámetro skip_missing le indica a la función cómo tratar a los idiomas para los cuales no hay traducciones.
  • La combinación de orderby y order permite la creación de selectores desplegables de idioma o selectores de idioma en los cuales los idiomas se muestran siempre en la misma posición.

La función devuelve una colección de entradas por idioma. Por ejemplo, para un sitio WordPress que utiliza inglés, francés e italiano devolverá:

Array
(
 [0] => Array
  (
   [id] => 1
   [active] => 1
   [native_name] => English
   [missing] => 0
   [translated_name] => English
   [language_code] => en
   [country_flag_url] => http://yourdomain/wpmlpath/res/flags/en.png
   [url] => http://yourdomain/about
  )

 [1] => Array
  (
   [id] => 4
   [active] => 0
   [native_name] => Français
   [missing] => 0
   [translated_name] => French
   [language_code] => fr
   [country_flag_url] => http://yourdomain/wpmlpath/res/flags/fr.png
   [url] => http://yourdomain/fr/a-propos
  )

 [2] => Array
  (
   [id] => 27
   [active] => 0
   [native_name] => Italiano
   [missing] => 0
   [translated_name] => Italian
   [language_code] => it
   [country_flag_url] => http://yourdomain/wpmlpath/res/flags/it.png
   [url] => http://yourdomain/it/circa
  )
)

Cada idioma tiene su propia colección de parámetros, la cual puede ser utilizada por la función de Tema para construir cualquier selector de idioma.

  • id: identificador de referencia interna
  • active: hace referencia al idioma activo (solo un idioma está activo).
  • native_name: refiere a la designación nativa del idioma (nunca se traduce).
  • translated_name: indica el nombre del idioma traducido al idioma activo.
  • country_flag_url: es la dirección URL a una imagen PNG que representa la bandera del país.
  • url: es el enlace a la traducción en ese idioma.
  • missing: es 1 si la traducción de ese elemento no se encuentra y 0 si existe.

Administración de traducciones sin equivalencia

Algunas páginas no pueden ser traducidas a todos los idiomas. Puede indicarle a la variable icl_get_languages qué devolver ante idiomas sin traducción.

Si ‘skip_missing=1’, esos idiomas no aparecerán en la vista. Si ‘skip_missing=0’, todos los idiomas se mostrarán y aquellos idiomas sin equivalencia serán dirigidos a la página de inicio de ese idioma.

Cómo utilizar las funciones del Tema

Puede construir su propio intercambiador de idioma en la forma que considere apropiada. Aquí le mostraremos dos formas populares de hacerlo.

Las funciones PHP de ejemplo que mostramos aquí deberían ir en el archivo functions.php (en la carpeta del Tema) y no agregadas al plugin.

Esta entrada está disponible también en…

Supongamos que deseara agregar una línea, al final o comienzo de cada entrada, indicando los idiomas para los cuales hay traducción. Esta función debería retornar solamente entradas traducidas existentes y, si no hubiere ninguna disponible, no debería mostrar nada.

function icl_post_languages(){
  $languages = icl_get_languages('skip_missing=1');
  if(1 < count($languages)){
    echo __('This post is also available in: ');
    foreach($languages as $l){
      if(!$l['active']) $langs[] = '<a href="'.$l['url'].'">'.$l['translated_name'].'</a>';
    }
    echo join(', ', $langs);
  }
}

Lo que hace esta función es:

  1. Obtener la lista de idiomas de WPML: $languages = icl_get_languages(‘skip_missing=1’);
  2. Verificar que existe más de un idioma para la entrada: if(1 < count($languages))
  3. Generar la salida salteando el idioma actual: if(!$l[‘active’])

Notas:

  1. El mensaje pasa por gettext. Esto es muy importante dado que este mensaje, que se agrega a diferentes entradas en diferentes idiomas, aparecerá en el idioma correcto:  __(‘Esta entrada está también disponible en: ‘);
  2. El nombre de idioma utilizado es el traducido. Esto asegura que la oración completa está escrita en el idioma correcto: $l[‘translated_name’]

El resultado es este:

Mensaje referido a la entrada disponible en otros idiomas
Mensaje referido a la entrada disponible en otros idiomas

Para incluir este mensaje en las entradas, agregue una llamada a la función icl_post_languages() desde el archivo single.php.

Lista de nombres de idioma y sus banderas para el pie

Aún cuando disponga de un selector de idioma el principio de la página, es una buena idea tener una lista de nombres de idiomas y sus banderas al pie. Muchas personas navegan automáticamente al final de la página para tener una noción primaria de lo que hay en ella, por lo que disponer de un selector de idiomas ahí es útil para los visitantes.

function languages_list_footer(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        echo '<div id="footer_language_list"><ul>';
        foreach($languages as $l){
            echo '<li>';
            if($l['country_flag_url']){
                if(!$l['active']) echo '<a href="'.$l['url'].'">';
                echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
                if(!$l['active']) echo '</a>';
            }
            if(!$l['active']) echo '<a href="'.$l['url'].'">';
            echo icl_disp_language($l['native_name'], $l['translated_name']);
            if(!$l['active']) echo '</a>';
            echo '</li>';
        }
        echo '</ul></div>';
    }
}

Esta función realiza lo siguiente:

  1. Si existe alguna traducción, genera un DIV y comienza una lista sin orden: if(!empty($languages)){ echo ‘<div id=”footer_language_list”><ul>’;
  2. Verifica todos los idiomas y los agrega como opción de la lista.
  3. Si no es el idioma activo, también lo enlaza a la página de ese mismo idioma: if(!$l[‘active’]) echo ‘<a href=”‘.$l[‘url’].'”>’;
  4. Agrega la bandera de idioma correspondiente: <img src=”‘.$l[‘country_flag_url’].'” alt=”‘.$l[‘language_code’].'” width=”18″ height=”12″ />
  5. Adiciona ambos nombres de idioma, el nativo y el traducido, si son distintos: echo icl_dispar_language($l[‘native_name’], $l[‘translated_name’]);

WPML genera la función icl_disp_language(). Su objetivo es verificar si los dos argumentos (native_language_name, translated_language_name) son distintos. Si lo son, devuelve ambos. En otro caso, devuelve solamente uno.

Asimismo, deberíamos agregar algún código CSS par dar forma a esta lista de idiomas. Dicho código centrará la lista de idiomas en el pie de página y le dará cierta forma:

#footer_language_list{
  margin-bottom: 25px;
  text-align: center;
}

#footer_language_list ul{
  list-style: none;
  margin:0;
  padding:0;
}

#footer_language_list ul li img{
  margin-right:5px;
}

#footer_language_list ul li{
  display:inline;
  margin:0 5px 0 5px;
  padding:0;
}

#footer_language_list ul li a, #footer_language_list ul li a:visited{
  color: #fff;
  text-decoration:underline;
}

#footer_language_list ul li a:hover, #footer_language_list ul li a:active{
  color: #fff;
}

He aquí el intercambiador de idiomas:

Pie de idioma
Pie de idioma

Para agregarlo al Tema, incluya la llamada a languages_list_footer en el archivo footer.php.

* Nota: puede permutar fácilmente entre un intercambiador de idioma horizontal y un intercambiador de idioma vertical. Simplemente elimine la instrucción display: inline de CSS.

Intercambiador de idioma con banderas solamente

Función simple para mostrar banderas enlazadas a las traducciones de la página actual.

function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        foreach($languages as $l){
            if(!$l['active']) echo '<a href="'.$l['url'].'">';
            echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
            if(!$l['active']) echo '</a>';
        }
    }
}

La salida de esta función debe ser configurada de forma separada. Por ejemplo, al poner la función en un bloque div y definir estilos personalizados para las etiquetas img.

<div id="flags_language_selector"><?php language_selector_flags(); ?></div >

El CSS:

#flags_language_selector img{
      margin:1px;
      border:1px solid #333;
}
Intercambiador de idioma de banderas

Sustituir las banderas de país y cambiar los nombres de idioma

WPML incluye una GUI para edición de la información de idioma. Vaya a WPML->Idiomas y haga clic en Editar idiomas. Podrá modificar los nombres de los idiomas, editar valores locales y elegir distintas banderas.

'skip_missing=0&orderby=name'

5 respuestas para “Intercambiador de idioma personalizado”

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

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

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