0

Menús desplegables de WordPress en dispositivos táctiles

JQueryLa semana pasada me percaté de un fallo importante que existe en muchas plantillas de WordPress, bien gratuitas o de pago. Estábamos trabajando en la web de un cliente cuando, una vez acabada, decidimos probar el tema que habíamos comprado y comprobamos que no se desplegaban los menús correctamente en iPad.

Muchas de estas plantillas hacen uso de SuperFish, un menú realizado en JavaScript que utiliza la librería JQuery para gestionar los efectos de despliegue. Es una opción muy atractiva porque es muy personalizable vía CSS y se integra muy bien con las funcionalidades para los nuevos menús introducidas con WordPress 3.0.

El problema llega cuando el desarrollador de la plantilla no se ha tomado la molestia de “complementarlo” con un par de plugins muy interesantes: hoverIntent y bgiframe. Un poco más adelante os cuento en qué consisten.

 Cómo integrar SuperFish en WordPress

Como he dicho anteriormente, SuperFish necesita la librería JQuery para funcionar. Afortunadamente no tenemos que preocupernos por esto, pues WordPress la trae integrada.

Para descargar los ficheros necesarios  nos vamos aquí. Lo primero que tenemos que hacer es copiar el fichero superfish.js a la carpeta js de nuestro tema. En mi caso se localizaba en la carpeta includes.

El paso siguiente es incluirlo en el código de WordPress. Esto lo hacemos usando las funciones wp_register_script y wp_enqueue_script, que lo que hacen es cargar los scripts en el <head> de nuestra página. Muchas plantillas hacen esto en el fichero functions.php, pero otras lo tienen mejor acotado y disponen de un fichero del tipo theme-scripts.php (normalmente en la carpeta includes) que lo único que hace es referenciar todos los scripts que se iniciarán con la plantilla. El funcionamiento es idéntico en ambos casos:

<?php
function my_script() {
$tpl_url = get_bloginfo(‘template_url’);
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, $tpl_url.’/js/jquery-1.5.1.min.js’, false, ‘1.5.1’);
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘hoverintent’, $tpl_url.’/js/hoverIntent.js’, array(‘jquery’), ‘r6’);
wp_enqueue_script(‘bgiframe’, $tpl_url.’/js/jquery.bgiframe.min.js’, array(‘jquery’), ‘2.1’);
wp_enqueue_script(‘superfish’, $tpl_url.’/js/superfish.js’, array(‘jquery’), ‘1.4.8’);
}
}
add_action(‘init’, ‘my_script’);
?>

Si la plantilla ya hacía uso de SuperFish no será necesario inicializarlo (porque ya debería estarlo), pero en caso de que lo estemos implementando por primera vez en la plantilla será necesario hacerlo. Para ello buscamos en el archivo header.php de la plantilla el  enganche a wp_head() e introducimos el siguiente código:

<script type=”text/javascript”>
jQuery(function(){
jQuery(‘ul.sf-menu’).superfish();
});
</script>
<? php wp_head(); ?>
</head>

SuperFish utiliza una clase CSS para realizar el efecto de despliegue. Esta clase es la .sf-menu, que tendremos que pasar como argumento a la función wp_nav_menu (si es que la plantilla no lo tiene ya, claro). Esto se hace en el mismo fichero en que estamos trabajando, el header.php. En mi caso, menu_class:

<?php wp_nav_menu( array(
‘container’       => ‘ul’,
‘menu_class’      => ‘sf-menu’,
‘menu_id’         => ‘topnav’,
‘depth’           => 0,
‘theme_location’ => ‘header_menu’
));
?>

HoverIntent y BgIframe

HoverIntent es un plugin desarrollado por Brian Cherne que permite una funcionalidad extra a SuperFish. Podríamos decir que modifica el funcionamiento de la función hover integrada en Superfish, haciendo que el menú se despliegue cuando disminuye la velocidad del cursor sobre la opción elegida en lugar de hacerlo inmediatamente al pasar por encima.

BgIframe fue diseñado por Brandon Aaron para corregir el problema del z-index en navegadores antiguos. Este plugin hace que el fondo del menú se muestre como un iframe siempre bajo los elementos que forman el menú (submenús).

Poner estos dos plugins a funcionar es muy sencillo, pues se hace de la misma manera que hemos hecho anteriormente. Basta con copiar los ficheros js en la misma carpeta en la que copiamos los de SuperFish y llamarlos usando la misma función. Os vuelvo a pegar el código:

<?php
function my_script() {
$tpl_url = get_bloginfo(‘template_url’);
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, $tpl_url.’/js/jquery-1.5.1.min.js’, false, ‘1.5.1’);
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘hoverintent’, $tpl_url.’/js/hoverIntent.js’, array(‘jquery’), ‘r6’);
wp_enqueue_script(‘bgiframe’, $tpl_url.’/js/jquery.bgiframe.min.js’, array(‘jquery’), ‘2.1’);
wp_enqueue_script(‘superfish’, $tpl_url.’/js/superfish.js’, array(‘jquery’), ‘1.4.8’);
}
}
add_action(‘init’, ‘my_script’);
?>

Usar estos plugins modifica el funcionamiento que SuperFish tiene establecido por defecto para la función hover, sustituyéndolo por otra función que sí que funciona con dispositivos táctiles.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *