Cambiar las banderas de Polylang

Con este tutorial os mostraré cómo cambiar las banderas de Polylang que trae por defecto por otras más vistosas y con un diseño mejorado y más atractivo.

Este método, aunque alguno piense que puede que no sea la forma más adecuada de hacerlo, es la mejor forma que he encontrado para que cada vez que actualice el plugin no pierda los iconos de las banderas y tenga que aplicar el cambio cada vez.

De esta manera, tendremos siempre nuestras banderas personalizadas independientemente de las actualizaciones del plugin Polylang.

Este es el diseño original del widget de Polylang.

Como podéis ver, las banderas de Polylang aparecen en orden vertical. Esto es porque el widget es personalizable y podemos mostrar también los nombres. Pero en mi caso no quiero mostrar los nombres de las banderas, solo quiero mostrar los iconos. Por lo que cambiaré el diseño para que salgan alineadas horizantalmente una al lado de otra.

Paso 1 - Poner las banderas en horizontal

Primero voy a modificar el estilo del widget de las banderas en la hoja de estilos de nuestro theme para terminar de adaptarlo a nuestro entorno. Tenemos que incluir estos estilos en el fichero style.css de nuestro tema:

/* Polylang */
.widget_polylang_header {
	text-align: right;
}
.widget_polylang {
	margin-top: 5px;
}
.widget_polylang li {
	display: inline;
}

.widget_polylang li a img {
	height: 40px;
}

Si refrescamos la página veremos que ya nos aparecen los iconos alineados horizontalmente pero todavía con el icono original.

Paso 2 - Subir los nuevos iconos

Ahora subiremos los nuevos iconos a nuestro wordpress. Los vamos a subir a una carpeta nueva que vamos a llamar por ejemplo img  y que vamos a crear bajo nuestro Theme. En este caso he realizado el tutorial con el Theme Seventeen:

\wp-content\themes\twentyseventeen\img

El objetivo es cambiar las banderas de Polylang originales:

Por estas otras más vistosas y elegantes:

Descarga estos iconos GRATIS. Solo te pido que te suscribas al Blog. No te enviaré SPAM. Me gusta menos que a tí.

Paso 3 - Crear un filtro para cambiar las banderas de Polylang

Ahora vamos a crear un Filtro de Wordpres para cambiar las banderas de Polylang. Este código reemplazará en tiempo de ejecución la bandera original por la que hayamos subido a nuestra web.

add_filter('pll_the_languages', 'banderas_polylang', 10, 2);
function banderas_polylang($output, $args) {

// Reemplazamos el icono de las banderas que viene por defecto por otro icono más vistoso
$spain_old='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFnSURBVHjaYvzPgAD/UNlYEUAAmuTYAAAQhAEYqF/zFbe50RZ1cMmS9TLi0pJLRjZohAMTGFUN9HdnHgEE1sDw//+Tp0ClINW/f0NIKPoFJH/9//ULyGaUlQXaABBALAx/Gf4zAt31F4i+ffj3/cN/XrFfzOx//v///f//LzACM/79ZmD8/e8TA0AAMYHdDVT958vXP38nMDB0s3x94/Tj5y+YahhiAKLfQKUAAcQEdtJfoDHMF2L+vPzDmFXLelf551tGFOOhev4A/QgQQExgHwAd8IdFT/Wz6j+GhlpmXSOW/2z///8Eq/sJ18Dw/zdQA0AAMQExxJjjdy9x2/76EfLz4MXdP/i+wsyGkkA3Aw3984cBIIAYfzIwMKel/bt3jwEaLNAwgZIQxp/fDH/+MqqovL14ESCAWICeZvr9h0FSEhSgwBgAygFDEMT+wwAhgQgc4kAEVAwQQIxfUSMSTxxDAECAAQAJWke8v4u1tAAAAABJRU5ErkJggg==';
$spain=get_stylesheet_directory_uri()."/img/Spain.png";
$portugal_old="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAG8SURBVHjaYmSIZGD4wgAF/xgYWBj+boQysSKAAGJh+MRQnVoNUgEE///9ZfzLoPiX4e8fxj9/mP/8Yfr9+/+fP/9h5JdNmwACiIWBCaj4/5P3T7mY/xoJ/9UR/v0n8O+f17/Zlv/+//73/1+////+9f/XL6BqRllZoA0AAcQCNvv/339/C03+8v/8w7bk7+/vv/+7/P4S95ur+xdY9W+IBobfv4EaAAKICeiuv////vnz58PX3xxb/7BlN3/K7Ph1WoSR/fcfhl//f4KN/wW1BGg6QAAxMfxi+PP37++/v1kYfn//+usnE+cHCbWfTKz/mH7+ZgUpQmj48wdoA0AAsQA1/P0HZP458/qXqvNfjdnVItxy3wNvApUIvwPb8BvqJEawkwACiIXhDwPQ+F9/f+2890dY6/cnrycCb++z3frNfOwX01eEagZgKAHdzcAAEEAgG4DGA/W8+fO79+Rvdt5f2+b++sP+m+kdWDVEwx+gBmBY/wX6ASCAWBi+Mfz+80eSX/L3n99AzwBDm0H2NwtQHS/QapDBIPT3LwQBnQQQQIwMxgwM7xgYfjAArQKRTAyvP2OPYwgACDAAjtdGduN8tIgAAAAASUVORK5CYII=";
$portugal=get_stylesheet_directory_uri()."/img/Portugal.png";
$unitedkingdom_old="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAflJREFUeNpinDRzn5qN3uFDt16+YWBg+Pv339+KGN0rbVP+//2rW5tf0Hfy/2+mr99+yKpyOl3Ydt8njEWIn8f9zj639NC7j78eP//8739GVUUhNUNuhl8//ysKeZrJ/v7z10Zb2PTQTIY1XZO2Xmfad+f7XgkXxuUrVB6cjPVXef78JyMjA8PFuwyX7gAZj97+T2e9o3d4BWNp84K1NzubTjAB3fH0+fv6N3qP/ir9bW6ozNQCijB8/8zw/TuQ7r4/ndvN5mZgkpPXiis3Pv34+ZPh5t23//79Rwehof/9/NDEgMrOXHvJcrllgpoRN8PFOwy/fzP8+gUlgZI/f/5xcPj/69e/37//AUX+/mXRkN555gsOG2xt/5hZQMwF4r9///75++f3nz8nr75gSms82jfvQnT6zqvXPjC8e/srJQHo9P9fvwNtAHmG4f8zZ6dDc3bIyM2LTNlsbtfM9OPHH3FhtqUz3eXX9H+cOy9ZMB2o6t/Pn0DHMPz/b+2wXGTvPlPGFxdcD+mZyjP8+8MUE6sa7a/xo6Pykn1s4zdzIZ6///8zMGpKM2pKAB0jqy4UE7/msKat6Jw5mafrsxNtWZ6/fjvNLW29qv25pQd///n+5+/fxDDVbcc//P/zx/36m5Ub9zL8+7t66yEROcHK7q5bldMBAgwADcRBCuVLfoEAAAAASUVORK5CYII=";
$unitedkingdom=get_stylesheet_directory_uri()."/img/UnitedKingdom.png";

// La variable $output contiene el código HTML por defecto que pinta las baderas en formato lista <ul><li>.
// A esta le cambiamos los iconos por defecto por otros más vistosos.

$urls = str_replace($unitedkingdom_old,$unitedkingdom,str_replace($portugal_old,$portugal,str_replace($spain_old,$spain,$output)));//polylang_shortcode()

return $urls;
}

Con este último habremos cambiado las banderas por los iconos alternativos que quiero utilizar.

Si queremos cambiar el icono de otras banderas, tendremos que utilizar el inspector de elementos de las herramientas de desarrollador de nuestro navegador. En el caso de Firefox y Chrome se abre pulsando la tecla F12. Debemos colocarnos sobre la bandera y localizar este código:

Después hacemos doble clic sobre el elemento "data:image/png;base64" para mostrarlo al completo:

Y copiamos el código completo que será el que utilizaremos en la función que os mostré arriba donde haremos el reemplazo correspondiente. Tendréis que añadir las variables adicionales que necesitéis y completar con los idiomas que queráis mostrar.

El resultado será parecido a este:

Funciones API de Polylang

Para más información sobre las funciones API de Polylang para poder realizar alguna adaptación más a nuestro gusto este es el enlace para consultar las Funciones API de Polylang.

Shortcode Polylang

Este es un Shortcode para poder colocar las banderas de Polylang en cualquier parte de nuestro tema WordPress.

Tenemos que colocar el código en el fichero functions.php de nuestro Theme:

// Polylang Shortcode - https://wordpress.org/plugins/polylang/
// Add this code in your functions.php
// Put shortcode [polylang] to post/page for display flags
// Sacado de: https://gist.github.com/taninbkk/f95281b44b3762435777

function polylang_shortcode() {
ob_start();
pll_the_languages(array('show_flags'=>1,'show_names'=>0));
$flags = ob_get_clean();
return $flags;
}
add_shortcode( 'polylang', 'polylang_shortcode' );

Por ejemplo. Si queremos mostrar las banderas en el header, tenemos que hacer la llamada desde el Header.php para insertar nuestro Widget de Banderas:

<!-- BANDERAS POLYLANG -->
<!--<div id="banderas"><ul>-->
<div class="widget_polylang widget_polylang_header"><ul>
<?php
//echo banderas_polylang(polylang_shortcode(), '');
if (function_exists('banderas_polylang')) {
// Llamamos a la función banderas_polylang para que muestre nuestro widget de banderas con estilo personalizado
echo banderas_polylang(polylang_shortcode(), '');
} else {
//error_log("La función 'banderas_polylang' no existe en el fichero functions.php del theme.", 0);
}

$spain_old='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAFnSURBVHjaYvzPgAD/UNlYEUAAmuTYAAAQhAEYqF/zFbe50RZ1cMmS9TLi0pJLRjZohAMTGFUN9HdnHgEE1sDw//+Tp0ClINW/f0NIKPoFJH/9//ULyGaUlQXaABBALAx/Gf4zAt31F4i+ffj3/cN/XrFfzOx//v///f//LzACM/79ZmD8/e8TA0AAMYHdDVT958vXP38nMDB0s3x94/Tj5y+YahhiAKLfQKUAAcQEdtJfoDHMF2L+vPzDmFXLelf551tGFOOhev4A/QgQQExgHwAd8IdFT/Wz6j+GhlpmXSOW/2z///8Eq/sJ18Dw/zdQA0AAMQExxJjjdy9x2/76EfLz4MXdP/i+wsyGkkA3Aw3984cBIIAYfzIwMKel/bt3jwEaLNAwgZIQxp/fDH/+MqqovL14ESCAWICeZvr9h0FSEhSgwBgAygFDEMT+wwAhgQgc4kAEVAwQQIxfUSMSTxxDAECAAQAJWke8v4u1tAAAAABJRU5ErkJggg==';
$spain=get_stylesheet_directory_uri()."/img/Spain.png";
$portugal_old="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAG8SURBVHjaYmSIZGD4wgAF/xgYWBj+boQysSKAAGJh+MRQnVoNUgEE///9ZfzLoPiX4e8fxj9/mP/8Yfr9+/+fP/9h5JdNmwACiIWBCaj4/5P3T7mY/xoJ/9UR/v0n8O+f17/Zlv/+//73/1+////+9f/XL6BqRllZoA0AAcQCNvv/339/C03+8v/8w7bk7+/vv/+7/P4S95ur+xdY9W+IBobfv4EaAAKICeiuv////vnz58PX3xxb/7BlN3/K7Ph1WoSR/fcfhl//f4KN/wW1BGg6QAAxMfxi+PP37++/v1kYfn//+usnE+cHCbWfTKz/mH7+ZgUpQmj48wdoA0AAsQA1/P0HZP458/qXqvNfjdnVItxy3wNvApUIvwPb8BvqJEawkwACiIXhDwPQ+F9/f+2890dY6/cnrycCb++z3frNfOwX01eEagZgKAHdzcAAEEAgG4DGA/W8+fO79+Rvdt5f2+b++sP+m+kdWDVEwx+gBmBY/wX6ASCAWBi+Mfz+80eSX/L3n99AzwBDm0H2NwtQHS/QapDBIPT3LwQBnQQQQIwMxgwM7xgYfjAArQKRTAyvP2OPYwgACDAAjtdGduN8tIgAAAAASUVORK5CYII=";
$portugal=get_stylesheet_directory_uri()."/img/Portugal.png";
$unitedkingdom_old="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAIAAAD5gJpuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAflJREFUeNpinDRzn5qN3uFDt16+YWBg+Pv339+KGN0rbVP+//2rW5tf0Hfy/2+mr99+yKpyOl3Ydt8njEWIn8f9zj639NC7j78eP//8739GVUUhNUNuhl8//ysKeZrJ/v7z10Zb2PTQTIY1XZO2Xmfad+f7XgkXxuUrVB6cjPVXef78JyMjA8PFuwyX7gAZj97+T2e9o3d4BWNp84K1NzubTjAB3fH0+fv6N3qP/ir9bW6ozNQCijB8/8zw/TuQ7r4/ndvN5mZgkpPXiis3Pv34+ZPh5t23//79Rwehof/9/NDEgMrOXHvJcrllgpoRN8PFOwy/fzP8+gUlgZI/f/5xcPj/69e/37//AUX+/mXRkN555gsOG2xt/5hZQMwF4r9///75++f3nz8nr75gSms82jfvQnT6zqvXPjC8e/srJQHo9P9fvwNtAHmG4f8zZ6dDc3bIyM2LTNlsbtfM9OPHH3FhtqUz3eXX9H+cOy9ZMB2o6t/Pn0DHMPz/b+2wXGTvPlPGFxdcD+mZyjP8+8MUE6sa7a/xo6Pykn1s4zdzIZ6///8zMGpKM2pKAB0jqy4UE7/msKat6Jw5mafrsxNtWZ6/fjvNLW29qv25pQd///n+5+/fxDDVbcc//P/zx/36m5Ub9zL8+7t66yEROcHK7q5bldMBAgwADcRBCuVLfoEAAAAASUVORK5CYII=";
$unitedkingdom=get_stylesheet_directory_uri()."/img/UnitedKingdom.png";
$urls = str_replace($unitedkingdom_old,$unitedkingdom,str_replace($portugal_old,$portugal,str_replace($spain_old,$spain,polylang_shortcode())));
//echo polylang_shortcode(); 
//echo $urls;
?>
</ul></div>
<!-- FIN - BANDERAS POLYLANG -->

Conclusiones

Con este tutorial hemos conseguido cambiar los iconos que trae el Plugin Polylang por otros más vistosos y también hemos aprendido a mostrar las banderas en otra parte de nuestra web con un shortcode WordPress que hemos utilizado gracias a las funciones API Polylang. De esta manera podemos actualizar el plugin Polylang sin preocuparnos de perder los iconos que hayamos reemplazado.