El tema Magazeen de WordPress es un tema a mi gusto muy elegante y lo que es mejor, gratuito.
Tiene excelentes funcionalidades y muchas de ellas con JQuery, sin embargo el problema viene al tratar de meter algún plugin o algun extra que utilice Javascript, ya que el JQuery deja de funcionar o traba algunas de las funciones de las otras librerias.
En el mismo sitio del tema el usuario Spencer aparentemente de los mismos desarrolladores, recomienda modificar el archivo functions.js y recomienda leer la siguiente documentación de JQuery, aunque eso nos da una pista, la verdad batalle un buen rato para encontrar la solución, por lo cual la comparto con ustedes:
El Archivo functions.js original que se encuentra en la carpeta js/ es el siguiente:
$( function() { $( '.category' ).click( function() { $( this ).toggleClass( 'active' ) $( this ).siblings( '.dropdown' ).toggle(); $( this ).find( '.indicator' ).toggleClass( 'indicator-active' ); return false; } ); $( '#dock > li' ).hover( function() { $( '.latest' ).fadeOut( 'fast' ); $( this ).addClass( 'dock-active' ); $( this ).children( 'span' ).fadeIn( 200 ); }).bind( "mouseleave", function() { $( this ).removeClass( 'dock-active' ); $( this ).children( 'span' ).fadeOut( 200 ); } ); $( '#dock' ).bind( "mouseleave", function() { $( '.latest' ).fadeIn( 1000 ); } ); } ); |
Lo cambiamos por este:
jQuery( function() { jQuery( '.category' ).click( function() { jQuery( this ).toggleClass( 'active' ) jQuery( this ).siblings( '.dropdown' ).toggle(); jQuery( this ).find( '.indicator' ).toggleClass( 'indicator-active' ); return false; } ); jQuery( '#dock > li' ).hover( function() { jQuery( '.latest' ).fadeOut( 'fast' ); jQuery( this ).addClass( 'dock-active' ); jQuery( this ).children( 'span' ).fadeIn( 200 ); }).bind( "mouseleave", function() { jQuery( this ).removeClass( 'dock-active' ); jQuery( this ).children( 'span' ).fadeOut( 200 ); } ); jQuery( '#dock' ).bind( "mouseleave", function() { jQuery( '.latest' ).fadeIn( 1000 ); } ); } ); |
En el archivo header.php que esta sobre la raíz del tema buscamos las líneas:
<script src="<?php bloginfo( 'template_directory' ); ?>/js/pngfix.js"></script> <script src="<?php bloginfo( 'template_directory' ); ?>/js/jquery-latest.js"></script> <script src="<?php bloginfo( 'template_directory' ); ?>/js/effects.core.js"></script> <script src="<?php bloginfo( 'template_directory' ); ?>/js/functions.js"></script> |
Y después de ellas ponemos el siguiente código:
<script> jQuery.noConflict(); </script> |
Con esto tendremos la funcionalidad JQuery y no interferirá con nuestras otras librerías, espero les sirva.
Si tienen una solución mejor les agradecería que la compartieran.
Escribe un Comentario