Solución JQuery: Magazeen Theme de Wordpress
27 de Octubre del 2009 | Deja un Comentario | Internet, Tutoriales |
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.

Hoy los Mexicanos nos despertamos con la desagradable noticia que el gobierno aprobó nuevos impuestos, los cuáles se venían cocinando desde hace tiempo.












