[英]Resolve javascript conflict with parent theme on wordpress child theme
I've built a child theme of Divi Theme to use with Buddypress . 我已经建立了Divi Theme的子主题与Buddypress一起使用。 So far so good, except for a script conflict on commenting buttons.
到目前为止一切正常,除了注释按钮上的脚本冲突。
The theme load a javascript ( js/custom.js
at 2642:2662) with the following function: 主题加载具有以下功能的javascript(
js/custom.js
, js/custom.js
为2642:2662):
$( 'a[href*=#]:not([href=#])' ).click( function() {
if ( $(this).closest( '.woocommerce-tabs' ).length && $(this).closest( '.tabs' ).length ) {
return false;
}
if ( location.pathname.replace( /^\//,'' ) == this.pathname.replace( /^\//,'' ) && location.hostname == this.hostname ) {
var target = $( this.hash );
target = target.length ? target : $( '[name=' + this.hash.slice(1) +']' );
if ( target.length ) {
et_pb_smooth_scroll( target, false, 800 );
if ( ! $( '#main-header' ).hasClass( 'et-fixed-header' ) && $( 'body' ).hasClass( 'et_fixed_nav' ) && $( window ).width() > 980 ) {
setTimeout(function(){
et_pb_smooth_scroll( target, false, 200);
}, 500 );
}
return false;
}
}
});
This event target the same button that Buddypress use for commenting, preventing AJAX form from loading on click. 此事件的目标是与Buddypress用于评论的按钮相同,以防止单击时加载AJAX表单。
I don't want to edit the parent theme (custom.js). 我不想编辑父主题(custom.js)。 How can I prevent this conflict?
如何防止这种冲突? Is there a workaround, maybe from functions.php ?
是否有解决方法,可能是来自functions.php ?
UPDATE UPDATE
Using [wp_dequeue_script][4] to load that script later, didn't work. 稍后使用[wp_dequeue_script] [4]加载该脚本无效。 When using this code in functions.php
在functions.php中使用此代码时
function de_script() {
wp_dequeue_script( 'divi-custom-script' );
}
add_action( 'wp_print_scripts', 'de_script', 100 );
then the full script (custom.js) was not loaded at all. 则完全不会加载完整脚本(custom.js)。
First of all, to resolve the javascript conflict I've set up a simple tl_custom.js
under my theme js/
folder, with the following code 首先,为了解决javascript冲突,我在主题
js/
文件夹下设置了一个简单的tl_custom.js
,并使用以下代码
jQuery(document).ready(function($) {
// Remove handler set by themes/Divi/js/custom.js at line 2642
$( 'a[href*=#]:not([href=#])' ).off();
});
Then I add the script with the following code in functions.php
然后我在
functions.php
使用以下代码添加脚本
function tl_custom_scripts() {
if ( ! is_admin() ) {
$scriptsrc = get_stylesheet_directory_uri() . '/js/';
wp_register_script( 'tl_custom', $scriptsrc . 'tl_custom.js', '', '', true );
wp_enqueue_script( 'tl_custom' );
}
}
add_action( 'wp_enqueue_scripts', 'tl_custom_scripts', 20 );
The main problem is that the parent theme register custom.js
in the footer, so I had to set the wp_register_script last parameter to true
and then set add_action priority to 20. 主要问题是父主题在页脚中注册了
custom.js
,因此我不得不将wp_register_script的 last参数设置为true
,然后将add_action优先级设置为20。
this answer may be a bit too late now but I am currently working on an inherited project of which I continued working on. 这个答案现在可能为时已晚,但我目前正在从事一个继承的项目,而我仍在继续进行。 I found that they were using a Divi theme on an updated Wordpress which triggers all the errors above.
我发现他们在更新的Wordpress上使用了Divi主题,该主题触发了以上所有错误。
I inspected the source error and I found that this selector was incorrect: 我检查了源错误,发现此选择器不正确:
$( 'a[href*=#]:not([href=#])' )
I fixed this by changing it to this without compromising any functionality: 我通过在不影响任何功能的情况下将其更改为此问题来解决此问题:
$( 'a[href*=\\#]:not([href=\\#])' )
It also works with this: 它也适用于此:
$( 'a[href*="#"]:not([href="#"])' )
The issue was fixed and the functionality for that block of code is still working. 该问题已修复,该代码块的功能仍在起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.