JQuery兼容性& WordPress的

时间:2013-10-15 22:41:13

标签: javascript jquery wordpress

我购买的html主题的基于JQuery的代码引用了JQuery对象的简写,即$

然而,出于兼容性原因,WordPress将Jquery对象用作JQuery

我想坚持使用WordPress这样做的方式,并将该主题的代码更改为与WordPress兼容。

有没有办法让该主题的javascript代码与JQuery对象一起使用? 更具体地说,我会给你一个例子;

考虑以下JavaScript代码,它使用一些JQuery魔法来处理Equal Height Columns

/* __________________ Equal Heights __________________*/
$.fn.eqHeights=function(a){var f={child:false};var a=$.extend(f,a);var d=$(this);if(d.length>0&&!d.data("eqHeights")){$(window).bind("resize.eqHeights",function(){d.eqHeights()});d.data("eqHeights",true)}if(a.child&&a.child.length>0){var c=$(a.child,this)}else{var c=$(this).children()}var g=0;var b=0;var e=[];c.height("auto").each(function(){var h=this.offsetTop;if(g>0&&g!=h){$(e).height(b);b=$(this).height();e=[]}b=Math.max(b,$(this).height());g=this.offsetTop;e.push(this)});$(e).height(b)};

还要考虑以下与该部分一起使用的init。

/* ________  equal heights __________________*/

$(document).ready(function () {
   $('.equalHeights').eqHeights();
});

现在......我该怎么办才能让上面的代码与WordPress兼容?

我知道我必须在上面的某个关键位置插入JQuery字符串,但不确定确切位置..

此codex页面(下面的链接)是一个很好的资源,但我仍然无法弄清楚它是如何完成的。

http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

http://bombdiggitydesign.com/crisp-2/Crisp-warm/hero-equal-height-columns.html的实际代码在http://bombdiggitydesign.com/crisp-2/Crisp-warm/assets/js/custom.js(只搜索EqualHeights)。

我只是复制了上面的一小部分来表达我的观点,而不是让你处理她庞大的custom.js。我认为我抓住的部分足以理解它是如何完成的。

2 个答案:

答案 0 :(得分:1)

这个问题的答案在以下stackoverflow网址中:

jQuery Uncaught TypeError: Cannot read property 'fn' of undefined (anonymous function)

但要把它带回家,这就是我需要做的事情:

将主代码包装在custom.js中,如下所示;

(function ( $ ) { 

    // all that $ based code goes here... 

}( jQuery ));

换句话说,

转到custom.js文件(位于http://bombdiggitydesign.com/crisp-2/Crisp-warm/assets/js/custom.js)并将其添加到顶部

(function ( $ ) {  

这到底部

}( jQuery ));

并保存文件。不需要额外的工作。

这是一个只有2行代码的整体解决方案,你不仅要处理我所指的EqualHeights部分,还要处理整个she-bang的其余部分。他们现在都与WordPress兼容。

希望它有所帮助。 - 我相信会。

答案 1 :(得分:0)

在我的情况下,问题是与最新版本的jQuery不兼容。将此添加到主题的functions.php中作为临时解决方法,直到插件修复为止:

function thethe_fix() {
    wp_deregister_script('jquery');
    wp_enqueue_script("jquery", 
        "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js", array('json2'),
        '1.8.3');
}
add_action( 'wp_print_scripts', 'thethe_fix', 20 );

请注意,这会将您的网站修复到jQuery的1.8.3版本,这可能不是一件好事。