Personalizar selector qtranslate con dropdown de texto y flags

El resultado sería este (pasa el mouse encima del Idioma):

Para poder personalizar el aspecto del selector de idioma qTranslate (o de cualquier otro dropdown con select) podemos recurrir a un pequeño script en jQuery. En el siguiente tutorial veremos como conseguir que el menú se despliegue al pasar el mouse por encima del selector (hover) y además podremos definir un estilo personalizado del mismo.
Aquí los pasos:

1- Activamos otra área de widget que llamaremos sólo donde queremos que se enseñe el selector.
Requiere editar function.php y arrastrar el qTranslate Language Chooser desde el panel de amdin, en la sección widgets

2- Abrimos nuestro archivo functions.php y buscamos la zona en la que se están cargando los widgets:

 function twentyeleven_widgets_init() 
{ register_widget( 'Twenty_Eleven_Ephemera_Widget' ); 

Debajo de estas líneas encontraremos todos los widgets disponibles en nuestro tema. Lo ideal es copiar la misma estructura, cambiando los campos ‘name’ , ‘id’ y ‘description’. En nuestro caso estamos utilizando el tema Twentyeleven así que el código que añadiremos será el siguiente:

 
	register_sidebar( array(
		'name'          => __( 'QTranslate Sidebar', 'twentyeleven' ),
		'id'            => 'sidebar_qtranslate',
		'description'   => __( 'Shown on header.', 'theme-it' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<ul id="menu-q"><li><a class="widget">',
		'after_title'   => '</a>'
	));

Como podéis notar para este widget hemos creado una estructura en la que abrimos una etiqueta ul y una etiqueta li que no cerramos. Esto nos sirve para poder ocultar los elementos con el script de jQuery que veremos más adelante y que nos permite simular un dropdown.

3- Ahora tenemos disponible en el panel de admin el nuevo widget, en el arrastraremos el qTranslate Language Chooser, como se muestra en esta imágen

4- El código para llamar al widget que acabamos de crear y que contiendrá el selector qTranslate será el siguiente:

<?php if (is_single('72')) {  ?>
<div id="qtranslate_drop">
		<?php 
		dynamic_sidebar( 'sidebar_qtranslate' ); ?>
</li> <!--cerramos el li abierto en functions.php en register sidebar_qtranslate -->
</ul><!--cerramos el ul abierto en functions.php en register sidebar_qtranslate-->
</div>
<?php } ?>

5- Bien, ahora ya tenemos nuestro menú de idioma cargado en este caso sólo en el post con id 72 (el actual), pero lo que queremos es que se despliegue cuando pasamos el mouse encima. Para esto necesitamos un pequeño script de jQuery.

 
var timeout = 500; 
var closetimer = 0; 
var ddmenuitem = 0; 
function ddmenu_open(){ 
ddmenu_canceltimer(); 
ddmenu_close(); 
ddmenuitem = $(this).find('ul').css('visibility', 'visible'); 
} 
function ddmenu_close(){ 
if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); 
} 
function ddmenu_timer(){ 
closetimer = window.setTimeout(ddmenu_close, timeout); 
} 
function ddmenu_canceltimer(){ 
if(closetimer){ 
window.clearTimeout(closetimer); closetimer = null; 
}
} 
$(document).ready(function(){ 
$('#menu-q > li').bind('mouseover', ddmenu_open) $('#menu-q >li').bind('mouseout', ddmenu_timer) 
}); 
document.onclick = ddmenu_close; 

6- Y un poco de css para ocultar nuestro menu

 /*Qtranslate ------------------------------------------------*/ 
ul.qtrans_language_chooser{ visibility:hidden; } 
#qtranslate_drop { width:120px; } 

Una manera más limpia para cargar este script es guardar el mismo en un archivo .js (en mi caso lo he llamado qtranslate-drop.js) y hacer la llamada junto con la libreria jQuery (indispensable….si no no funciona). Pondremos este código en nuestro header.php, antes de cerrar la etiqueta head…Asegurarse de poner bien la ruta y que el wordpress encuentre los scripts. Aquí tenéis mas info sobre las diferentes maneras de cargar las librerías jQuery en WordPress.

<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/qtranslate-drop.js"></script>

Esto es todo….ya tenemos una simulación del dropdown para qTranslate que se muestra al pasar el mouse en el área del selector, sin tener que clickar en él, y desaparece al salir de la misma, y que podremos editar hasta conseguir el aspecto que más nos guste.

Deja un comentario