Añadir selector de idioma en el theme: WordPress Multilingual Plugin WPML

Como su propio nombre indica, WPML es un plugin premium que convierte tu sitio web WordPress en Multilingüe.

Como diseñador web en Bilbao, me han surgido multitud de proyectos bajo WordPress en los que el desarrollo en varios idiomas ha sido requisito fundamental.

Pues bien, con este plugin conseguimos nuestro objetivo de una manera muy fácil, por supuesto el plugin funciona a la perfección.

En la mayoría de las ocasiones, si desarrollamos un theme desde 0, necesitamos incluir el selector de idiomas, por ejemplo, en el header de nuestra web.

De esta manera, tenemos que añadir este fragmento de código donde queramos mostrarlo:

<div class="language">
       <?php
    $languages = icl_get_languages('skip_missing=1');
      echo '<div class="language-selector">';
      if(1 < count($languages)){
        foreach($languages as $code => $l){
          if($l['active']){
              $langs[] = '<a class="current-language" href="'.$l['url'].'">'.strtoupper($code).'</a>';
          }
          else{
              $langs[] = '<a href="'.$l['url'].'">'.strtoupper($code).'</a>';
          };
        }
        echo join(' | ', $langs);
      }
      echo '</div>';
      ?>
    </div>

Con el código .strtoupper($code) le estamos diciendo que nos muestre el código de nuestro idioma, como por ejemplo: ES | EN.

En el caso de que nos interese mostrar las banderas, deberemos sustituir “’.strtoupper($code).’” por

Quedando el código de la siguiente manera:

<div class="language">
       <?php
    $languages = icl_get_languages('skip_missing=1');
      echo '<div class="language-selector">';
      if(1 < count($languages)){
        foreach($languages as $code => $l){
          if($l['active']){
              $langs[] = '<a class="current-language" href="'.$l['url'].'"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /></a>';
          }
          else{
              $langs[] = '<a href="'.$l['url'].'"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /></a>';
          };
        }
        echo join(' | ', $langs);
      }
      echo '</div>';
      ?>
    </div>

Si os ha servido, compartir este artículo para ayudar a otros desarrolladores a encontrar la solución.