Personalizar selector qtranslate con dropdown de texto y flags

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

Hay dos opciones: 1-activar 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- hacer una llamada php Método 1: 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. 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 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 } ?> 

    Bien, ahora ya tenemos nuestro menú de idioma en el header.php, 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; 

    Y un poco de css para ocultar nuestro menu

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

    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> 

    Pues , y esto es todo….ya yenemos una simulación del dropdown para qTranslate que muestre tanto el texto como las banderas. Italiano:

  • Lascia un Commento