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.

Widget Banderas Polylang original Cambiar las banderas 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.

Widget Banderas Polylang 1 Cambiar las banderas de Polylang

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:

Widget Banderas Polylang 2 Cambiar las banderas de Polylang

Por estas otras más vistosas y elegantes:

Widget Banderas Polylang 3 Cambiar las banderas de Polylang

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.

/* Polylang */
// Filtro para personalizar el estilo del Widget de Banderas del plugin Polylang
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/UnitedKingsom.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:

Widget Banderas Polylang 5 Cambiar las banderas de Polylang

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

Widget Banderas Polylang 6 Cambiar las banderas de Polylang

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:

Widget Banderas Polylang 4 Cambiar las banderas de Polylang

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 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); 
} 
?>
</ul>
</div>

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.

Dime qué te ha parecido el artículo...

rating off Cambiar las banderas de Polylangrating off Cambiar las banderas de Polylangrating off Cambiar las banderas de Polylangrating off Cambiar las banderas de Polylangrating off Cambiar las banderas de Polylang (Ninguna valoración todavía)
loading Cambiar las banderas de PolylangCargando…
Advertisements

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies

Veo que te gusta mi Blog...

Si te ha parecido interesante este artículo, no esperes a suscribirte a mi blog. Cuando vuelva a escribir otro seguro que te interesará y no desearás no haberte enterado. Puedes suscribirte con total tranquilidad de que no recibirás spam. Lo odio igual que tu. Solo quiero que aprendas cosas nuevas y te sientas agusto con mis artículos. ¡Gracias!

¡Gracias por suscribirte!

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!